search

hudochenkov / postcss-styled-syntax

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

Incorrect parsing of JS code within declarations #13

Closed foucdeg closed 1 year ago

foucdeg commented 1 year ago

This is my code:

export const Circle = styled.div<{ selected: boolean }>`
  background-color: ${(props) => (props.selected ? colorPalette.purple : colorPalette.black)};
`;

I've activated the rule 'scale-unlimited/declaration-strict-value' from https://github.com/AndyOGo/stylelint-declaration-strict-value.

Stylelint complains: "Expected variable, function or keyword for "=>" of "background-color" (scale-unlimited/declaration-strict-value)".

I will also open an issue with the rule author, but mistaking JS code for a CSS property value seems to be a parsing issue.

Using stylelint 15.6.0, postcss-styled-syntax@0.4.0, stylelint-declaration-strict-value 1.9.2.

hudochenkov commented 1 year ago

This is not a bug. It is intended behavior. In PostCSS AST we have declaration with property background-color and value ${(props) => (props.selected ? colorPalette.purple : colorPalette.black)}.

Since PostCSS could parse many different syntaxes, plugins should make checks on syntax to avoid false issues. E. g. Stylelint has whole bunch of isStandard* utils to check if rule can work with parsed value.

foucdeg commented 1 year ago

Ok, thanks, so this is a plugin issue if I understand correctly?

foucdeg commented 1 year ago

Yep, plugin doesn't support CSS-in-JS.