search

hudochenkov / postcss-styled-syntax

PostCSS syntax for CSS-in-JS like styled-components
MIT License
69 stars 4 forks source link

`parseError` using custom variables with `@media` #14

Closed alex-tavares closed 1 year ago

alex-tavares commented 1 year ago

I'm getting a parseError when using custom variables with @media as in the example below:

 const Class = css`
     @media ${breakpoint} {...}
 `

Error printed in the terminal:

  19:12  ✖  Cannot parse media query  parseError

To remedy this problem, the rules media-feature-name-unit-allowed-list and media-feature-range-notation had to be disabled so that it prevents @media from being parsed.

Versions I'm using: postcss-styled-syntax@0.4.0 stylelint@15.4.0 @emotion/css@11.10.5

hudochenkov commented 1 year ago

This is an error coming from the Stylelint rule, and not from this syntax. Stylelint rules should be adjusted to ignore non-standard params for at-rules. Please, open an issue in the Stylelint repository.

For reference, your example would be parsed to this AST node:

AtRule {
    name: 'media',
    params: '${breakpoint}',
    ...
}

You can include this info in the issue your create. It will make easier for folks at Stylelint to fix it.