Fix false positives for interpolations in CSS-in-JS

[hudochenkov]

Clearly describe the bug

False positives for interpolations in CSS-in-JS. I think problem with parser. It might be also the same problem as #4713

Which rule, if any, is the bug related to?

Probably many rules, as it's more likely a parser problem. I found these so far:

• font-family-name-quotes
• font-family-no-missing-generic-family-keyword
• value-keyword-case

What code is needed to reproduce the bug?

import styled from 'styled-components';

export const Button = styled.button`
	font-size: ${(props) => props.theme.fontSizeBase};
	font-family: ${(props) => props.theme.fontStackBase};
	font: ${({ theme }) => `normal ${theme.fontSizeBase}/${theme.lineHeightBase} ${theme.fontStackBase}`};
`;

• Demo for all rules
• Demo for font-family-name-quotes
• Demo for font-family-no-missing-generic-family-keyword
• Demo for value-keyword-case

What stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "font-family-name-quotes":"always-unless-keyword",
    "font-family-no-missing-generic-family-keyword": true,
    "value-keyword-case": "lower"
  }
}

Which version of stylelint are you using?

13.7.1

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

CLI with stylelint "**/*.js".

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

Yes, interpolations in CSS-in-JS

What did you expect to happen?

No warnings to be flagged.

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

The following warnings were flagged:

5:25
error
Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)

6:22
error
Unexpected missing generic font family (font-family-no-missing-generic-family-keyword)

5:25
error
Expected quotes around "=> props.theme.fontStackBase}" (font-family-name-quotes)

6:22
error
Expected quotes around "=> `normal" (font-family-name-quotes)

4:26
error
Expected "props.theme.fontSizeBase}" to be "props.theme.fontsizebase}" (value-keyword-case)

[jeddy3]

Would this also be address by #4944 (and the work upstream)? I think this is how the styled-components processor worked too.

[hudochenkov]

It might.

[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.