43081j / postcss-lit

PostCSS syntax for extracting CSS from template literals inside JS/TS files
84 stars 6 forks source link

"SyntaxError: Unexpected token" - Using lit x typescript x stylelint #49

Open KaiSMR opened 10 months ago

KaiSMR commented 10 months ago

I try to integrate stylelint with postcss-lit lit in a lit-element project with typescript files, but currently i am facing issues. When i am trying to run the lint command for this exact typescript file, it fails with SyntaxError: Unexpected token (46:8)

When running it for other files, it works perfectly and shows expexted stylelint errors (if there any)

Command: yarn stylelint "src/foo/bar.ts"

Error

SyntaxError: Unexpected token (46:8)
    at instantiate (/foo/bar/node_modules/@babel/parser/lib/index.js:60:32)
    at constructor (/foo/bar/node_modules/@babel/parser/lib/index.js:355:12)
    at TypeScriptParserMixin.raise (/foo/bar/node_modules/@babel/parser/lib/index.js:3204:19)
    at TypeScriptParserMixin.unexpected (/foo/bar/node_modules/@babel/parser/lib/index.js:3235:16)
    at TypeScriptParserMixin.parseExprAtom (/foo/bar/node_modules/@babel/parser/lib/index.js:11236:16)
    at TypeScriptParserMixin.parseExprAtom (/foo/bar/node_modules/@babel/parser/lib/index.js:6919:20)
    at TypeScriptParserMixin.parseExprSubscripts (/foo/bar/node_modules/@babel/parser/lib/index.js:10842:23)
    at TypeScriptParserMixin.parseUpdate (/foo/bar/node_modules/@babel/parser/lib/index.js:10825:21)
    at TypeScriptParserMixin.parseMaybeUnary (/foo/bar/node_modules/@babel/parser/lib/index.js:10801:23)
    at TypeScriptParserMixin.parseMaybeUnary (/foo/bar/node_modules/@babel/parser/lib/index.js:9685:18)
error Command failed with exit code 1.

The first if ( is exactly 46:8, the rest of the code outside has been removed.

// File: src/foo/bar.ts

const firstFocusableEl = <HTMLScriptElement>focusableEls[0];
const lastFocusableEl = <HTMLScriptElement>(
  focusableEls[focusableEls.length - 1]
);

setTimeout(() => {
    if (
        document.activeElement &&
        document.activeElement.localName !== 'custom-element'
    ) {
        if (!isShiftKey) {
            firstFocusableEl.focus();
        } else {
            lastFocusableEl.focus();
        }
        event.preventDefault();
    }
}, 1);

Setup

postcss.config.ts/postcss.config.js (tried both)

module.exports = {
  syntax: 'postcss-lit',
};

.stylelintrc.json

{
  "extends": [
    "stylelint-config-standard"
  ],
  "customSyntax": "postcss-lit"
}

package.json (same result with and without that preset)

"postcss-lit": {
    "babelOptions": {
      "presets": ["@babel/preset-typescript"]
    }
  }

Debug

Tried to log the state inside of _nodemodules/@babel/parser/lib/index.js at unexpected()

Extract of that log:

 { 
  [...]
  value: 'if',
  start: 1563,
  end: 1565,
  lastTokEndLoc: Position { line: 45, column: 24, index: 1554 },
  lastTokStartLoc: Position { line: 45, column: 23, index: 1553 },
  lastTokStart: 1553,
  context: [
    TokContext { token: '{', preserveSpace: false },
    TokContext { token: '<tag>...</tag>', preserveSpace: true },
    TokContext { token: '{', preserveSpace: false }
  ],
  [...]
}

Versions (extract from package.json)

"stylelint": "^15.10.3",
"stylelint-config-standard": "^34.0.0",
"postcss": "^8.4.28",
"postcss-lit": "^1.1.0",

Thanks for your help!

EDIT

Added code to the example, which caused the issue.

I still don't know why it's not working with that typing, would be interesting to hear that, so i'll leave this issue open! (FYI: tsc compiles it without any errors)

Without the <HTMLScriptElement> it works perfectly!

const firstFocusableEl = focusableEls[0];
const lastFocusableEl =  focusableEls[focusableEls.length - 1];