Fix false positives for template literal interpolations in media-feature-name-no-unknown

[maclockard]

Clearly describe the bug

There are false positives when specifying a media query value using CSS in JS.

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

media-feature-name-no-unknown

What code is needed to reproduce the bug?

const StyledLogo = styled.div`
  overflow: hidden;

  @media (max-width: ${({ theme }) => theme.mediaQuery.MEDIUM}px) {
    width: 18px;
  }
`;

What stylelint configuration is needed to reproduce the bug?

{
  "rules": {
    "media-feature-name-no-unknown": true
  }
}

Which version of stylelint are you using?

13.6.1

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

CLI with stylelint './**/*.{tsx,ts,css}

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

Yes, its related to using CSS in JS using styled-components

What did you expect to happen?

No errors to be flagged.

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

The following errors were flagged:

components/app/NavigationBar.tsx
 75:11  ✖  Unexpected unknown media feature name "m"   media-feature-name-no-unknown

This is related to #4574

[maclockard]

Also tested 13.7.2, still got the failure though

[hudochenkov]

It is more likely related to other issues with template literals interpolations listed in #4574. There is some work is happening to fix this in #4944.

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