How to write an at-rule visitor

[mattpilott]

Hello, I'd like to make an at-rule like this:

@breakpoints {
  mobile: 640px;
  tablet: 1024px;
  laptop: 1280px;
  desktop: 1440px;
}

which outputs the following:

@custom-media --from-mobile (min-width: 40em);
@custom-media --until-mobile (max-width: 39.9375em);

@custom-media --from-tablet (min-width: 64em);
@custom-media --until-tablet (max-width: 63.9375em);

@custom-media --from-laptop (min-width: 80em);
@custom-media --until-laptop (max-width: 79.9375em);

@custom-media --from-desktop (min-width: 90em);
@custom-media --until-desktop (max-width: 89.9375em);

I have started writing a visitor but cannot figure out from docs etc how to get the above, here's what i have at the moment:

export const breakpoints = {
  Rule: {
    custom: {
      breakpoints(rule) {
        return {
          type: 'custom-media',
          value: {}
        }
      }
    }
  }
}

How can i achieve this?

[mattpilott]

I got to here, which works:

export const breakpoints = {
  Rule: {
    custom: {
      breakpoints({ loc, body: { value: { declarations } } }) {
        const ret = declarations.map(({ value: { name, value } }) => {
          const val = value[0].value.value
          return [
            {
              type: 'custom-media',
              value: {
                name: `--from-${name}`,
                loc,
                query: { mediaQueries: [{ raw: `(min-width: ${val / 16}em)` }] }
              }
            },
            {
              type: 'custom-media',
              value: {
                name: `--until-${name}`,
                loc,
                query: { mediaQueries: [{ raw: `(max-width: ${(val - 1) / 16}em)` }] }
              }
            }
          ]
        })
        return ret.flat()
      }
    }
  }
}