43081j / 43081j/postcss-lit

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

オープン
#49 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る
主要言語
TypeScript
スター
90
フォーク
9
平均マージ
1日 9分
マージ済み PR(30日)
3

説明

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];
```

コントリビューションガイド

このリポジトリのコントリビューションガイドは索引されていません

調査の方向性

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.

索引モデルが issue の本文から書いたものです。

評価

技術スタック
typescript
領域
developer-experience, tooling
issue の種類
バグ
難易度
3/5
見積もり時間
1〜2日
活発さ
停滞
明瞭さ
明確に書かれている
初心者へのやさしさ
45/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。