Support CSS-in-JS with postcss-styled-syntax

[EvgenyOrekhov]

I use postcss-styled-syntax and I get false warnings.

Config:

{
  "customSyntax": "postcss-styled-syntax",

  "plugins": [
    "stylelint-scales"
  ],

  "rules": {
    "scale-unlimited/declaration-strict-value": [
      "/color$/",
      {
        "ignoreVariables": true,
        "ignoreFunctions": false,
        "ignoreKeywords": ["currentColor", "transparent", "inherit"],
        "disableFix": true
      }
    ]
  }
}

Code:

import styled from "styled-components";

export const Button = styled.button`
  color: ${(props) => props.theme.colors.button};
`;

stylelint --fix '**/*.tsx'

test.tsx
 4:3  ✖  Expected variable, function or keyword for "=>" of "color"  scale-unlimited/declaration-strict-value

[AndyOGo]

Thanks for your issue.

Though to support CCS-in-JS, this plugin would need a parser for ECMAScript and that is out of the scope of this plugin.