"SyntaxError: Unexpected token" - Using lit x typescript x stylelint
KaiSMR opened this issue · comments
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 node_modules/@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];