SyntaxError: Unexpected token

[monsieurnebo]

Hi folks,

postcss-lit & styled-components ?

I'm looking for the "2022 right way of linting styled components", and postcss-lit has been brought in this discussion.

From my understanding: ✅ it does grant stylelint the ability to extract CSS from JS template literals... 🔴 ... But it does not add the "whole styled components" syntax support.

Am I right?

Usage error

I just gave a try to the package with the following stylelint config:

  "processors": ["stylelint-processor-styled-components"],
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-styled-components"
  ],
  "customSyntax": "postcss-lit",

Which leads me to the following error:

$ stylelint "components/**/*.js"
SyntaxError: Unexpected token (1:0)
    at instantiate (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:72:32)
    at constructor (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:358:12)
    at Object.raise (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:3341:19)
    at Object.unexpected (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:3379:16)
    at Object.parseExprAtom (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:13118:22)
    at Object.parseExprSubscripts (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:12643:23)
    at Object.parseUpdate (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:12622:21)
    at Object.parseMaybeUnary (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:12593:23)
    at Object.parseMaybeUnary (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:10795:20)
    at Object.parseMaybeUnaryOrPrivate (/Users/username/projectname/node_modules/postcss-lit/node_modules/@babel/parser/lib/index.js:12387:61)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Isn't is supposed to work? 🤔

as long as you set the syntax, latest postcss should be able to handle it without any extra plugins etc.

Thanks for your work.

---

Related to: https://github.com/43081j/postcss-lit/issues/24

[43081j]

postcss-lit likely won't work out of the box on styled-components (or at least not entirely).

really we need a new postcss-styled-components syntax. i started creating one of those but didn't find time to finish it yet. i have a busy few weeks ahead but will try have another look at it.

ill also update the thread you linked to if i get chance. im not aware of a solution out of the box until we do that

[monsieurnebo]

@43081j Thanks for your answer.

really we need a new postcss-styled-components syntax. i started creating one of those but didn't find time to finish it yet. i have a busy few weeks ahead but will try have another look at it.

I'm looking forward to this!

[kutnickclose]

One error I ran into (the same babel parser issue) was that I was using a processor (linaria) and needed to remove it in order to let postcss-lit (and babel under the hood) parse the whole file, not just the css.

You may want to try:

 -  "processors": ["stylelint-processor-styled-components"],
 + "processors": [],
  "extends": [
    "stylelint-config-standard-scss",
    "stylelint-config-styled-components"
  ],
  "customSyntax": "postcss-lit",