CssSyntaxError on a valid line of code

[SilencerWeb]

Clearly describe the bug

I get a syntax error on a valid line of code

What code is needed to reproduce the bug?

export const OutermostOffset = styled.div`
  top: ${(p) => css`calc(${p.theme.viewportGapY} + constant(safe-area-inset-top))`};
`;

What stylelint configuration is needed to reproduce the bug?

{
  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-styled-components"
  ],
  "rules": {
    "declaration-empty-line-before": null,
    "value-keyword-case": null
  }
}

Which version of stylelint are you using?

13.2.0

How are you running stylelint: CLI, PostCSS plugin, Node.js API?

CLI, stylelint ./src/**/style.ts

Does the bug relate to non-standard syntax (e.g. SCSS, Less etc.)?

Yes, it is related to styled-components. The problem is in css function. If I will remove it, then stylelint will work fine but this function is needed there

What did you expect to happen?

No error

What actually happened (e.g. what warnings or errors did you get)?

Got an error Unknown word, CssSyntaxError

[alexander-akait]

Do not use stylelint-processor-styled-components, stylelint support styled-components out of box

/cc @chinesedfan please deprecate module, we get minimum 1-2 problems weekly

[SilencerWeb]

@evilebottnawi erm... even without using stylelint-processor-styled-components I get this error.

And tbh without stylelint-processor-styled-components I get even more errors, without this plugin stylelint doesn't support media queries

[alexander-akait]

Yes, looks we have some problems on parser side #4574, let's reopen, but you do not use stylelint-processor-styled-components

[chinesedfan]

@evilebottnawi The processor is hard to be deprecated, until gucong3000/postcss-jsx#62 gives some feedbacks or roadmaps. Thanks for understanding.

[alexander-akait]

@chinesedfan we used fork version of postcss-jsx, please look https://github.com/stylelint/postcss-css-in-js. Can you duplicate the issue? thanks!

[jeddy3]

Closing as the syntax option was removed for the 14.0.0 release. (See the migration guide.)

We'll also be deprecating our forked CSS-in-JS package, in favour of leaner custom syntaxes.

Please consider writing a custom syntax specific to the CSS-in-JS library in this issue and fixing the bug there.