Fix false positives for single value within template literal

[jdvivar]

I've looked for similar bugs and although there are similar titles I couldn't find this one. It's not in the changelog and it's reproducible in the playground demo. I also created this small repo to more easily reproduce it: https://github.com/jdvivar/demo-bug-stylelint

Clearly describe the bug

False positive on single css-in-js value

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

Not a rule, but a syntax error

What code is needed to reproduce the bug?

with this test.ts file:

import { css } from 'lit-element'
export const max = css`100px`

What stylelint configuration is needed to reproduce the bug?

and this config .stylelintrc.json:

{
  "extends": "stylelint-config-standard"
}

Which version of stylelint are you using?

13.2.1

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

CLI with stylelint --syntax css-in-js "test.ts"
CLI with stylelint "test.ts"

Both with the same output

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

Yep, CSS-in-JS

What did you expect to happen?

Nothing to be flagged

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

test.ts
 2:24  ✖  Unknown word   CssSyntaxError

[jeddy3]

@jdvivar Thanks for the clear report, reproducible demo and repository!

It's likely a problem with the parser stylelint uses to support CSS-in-JS. I've added this issue to #4574, which is a growing list of the problems with the syntax that we need help to fix.

Please consider contributing to the parser if you have time.

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