43081j / 43081j/postcss-lit

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

Aperta
#49 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub
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

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.