False positive / parsing issue with JS inside CSS declarations

[foucdeg]

This is my code:

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

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

Although mistaking JS code for a CSS property value seems to be a parser issue (which I've opened on the parser repo), perhaps you could check whether there is anything wrong on the rule side?

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

[foucdeg]

Workaround:

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

[AndyOGo]

Hi @foucdeg

1. This plugin does not support CSS-in-JS

---

You left out some critical information.

Based on your code, I assume you may use styled components with some CSS-in-JS approach, correct?

I can only guess, without knowing any details about your tool chain. If you run style-lint on your .js files, then this is the wrong place.

[foucdeg]

Hi, your assumptions are correct, this is styled-components. I assumed that the separation of concerns between the parser and the rule plugin meant that the "source" syntax was irrelevant to the plugin. Incidentally, the rule works fine on the codebase when I use a direct value for background-color.

I'm using a boilerplate that uses both styled-components and stylelint-declarations-strict-value, I'll report that they're not compatible.

[AndyOGo]

I see, thanks for the info.

This plugin does only support specific CSS-like syntax's (no ECMAScript).

An overview of what is supported can be found in the description of the readme:

A stylelint plugin that enforces either variables ($sass, namespace.$sass, @less, var(--cssnext), css-loader @value), functions or custom CSS values, like keywords (inherit, none, currentColor etc.), colors (#fff, red, etc.) or numbers incl. units (0, 1px, 100%, etc.) for CSS https://github.com/AndyOGo/stylelint-declaration-strict-value#stylelint-declaration-strict-value