Custom at-rule style parsing

[danteissaias]

I am trying to create the following transform:

/* Input */
@breakpoints {
   .mt-1 { margin-top: 1px };
}

/* Output */
@media all {
  .mt-1 { margin-top: 1px };
}

@media (max-width: 600px) {
  .sm\:mt-1 { margin-top: 1px };
}

@media (max-width: 800px) {
  .md\:mt-1 { margin-top: 1px };
}

How can I parse unknown at-rules' block property as a style declaration?

[danteissaias]

Similar postcss plugin for reference: https://github.com/davidwarrington/postcss-responsive-classes

[devongovett]

At the moment, unknown at rules are always parsed as raw token values. We can't really know what they are supposed to contain - e.g. style rules, other at rules, declarations, etc. Postcss just sorta guesses based on some heuristics I think, but I'd like to avoid this to ensure the parser is forward compatible with new syntax. So for now, you'd need to look at the tokens and construct rules yourself.

The underlying Rust API supports implementing custom at rule parsers. In the future, I'd like to experiment with providing an API to do this in JS. It'll probably be more limited, like defining the types of the prelude and block. Maybe something like this?

transform({
  // ...
  customAtRules: {
    breakpoints: {
      // Type of the prelude. Maybe based on https://drafts.css-houdini.org/css-properties-values-api/#syntax-strings
      prelude: '<custom-ident> | <url> | <integer> | ...' | null,
      // Type of the block. Maybe based on https://drafts.csswg.org/css-syntax/#declaration-rule-list
      block: '<declaration-list> | <rule-list> | ...' | null
    }
  }
})

Then based on this information, the parser would know how to parse the @breakpoints rule and would return it in the AST. It could also perform syntax checking as part of parsing so you would always know that what you get back is valid.

Any thoughts on such an API?

[danteissaias]

Your proposed API is good. Do you think it could be useful to allow extending types from an existing at-rule?

transform({
  // ...
  customAtRules: {
    breakpoints: {
      // Inherit types from media at-rule
      extend: 'media',
      // Override prelude types
      prelude: '<custom-ident> | <url> | <integer> | ...' | null,
    }
  }
})

[devongovett]

I don't think we should support changing the syntax of standardized features. It would be really hard to do that in the existing parser and probably not a good idea for future CSS extensibility.

[danteissaias]

I didn’t provide the best explanation.

I think @breakpoints should be able to re-use @media’s parser for example rather than specifying its own.

I agree that modifying the syntax of standardised at-rules isn’t a great idea.

[devongovett]

Oh yeah. The body of a media rule is just a rule-list so that would be one of the options.