"SyntaxError: Unexpected token" - Using lit x typescript x stylelint
- Lingua principale
- TypeScript
- Stelle
- 90
- Fork
- 9
- Merge medio
- 1g 9m
- PR unite (30g)
- 3
Descrizione
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
```bash
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_
```typescript
const firstFocusableEl = focusableEls[0];
const lastFocusableEl = (
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)
```javascript
module.exports = {
syntax: 'postcss-lit',
};
```
_.stylelintrc.json_
```json
{
"extends": [
"stylelint-config-standard"
],
"customSyntax": "postcss-lit"
}
```
_package.json_ (same result with and without that preset)
```json
"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: '...', 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 `` it works perfectly!
```typescript
const firstFocusableEl = focusableEls[0];
const lastFocusableEl = focusableEls[focusableEls.length - 1];
```
Guida per i contributori
Nessuna guida per i contributori indicizzata per questo repository
Direzione di ricerca
The issue is in postcss-lit's parsing of TypeScript files when a type assertion like `` appears before an array access. Start by examining the custom syntax in node_modules/postcss-lit/lib/index.js to see how it extracts CSS from template literals. Look at the babel parser configuration and the token context handling. The error occurs at line 46 column 8 in src/foo/bar.ts; test with a minimal file containing the problematic type assertion to reproduce the SyntaxError. Check if the babelOptions preset for TypeScript is correctly applied.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Valutazione
- Stack tecnologico
- typescript
- Ambito
- developer-experience, tooling
- Tipo di issue
- Bug
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Stato di attività
- Ferma
- Chiarezza
- Specificata chiaramente
- Idoneità per principianti
- 45/100