feat: add css-in-js tag support

package.json

@@ -13,7 +13,11 @@
         "onLanguage:scss",
         "onLanguage:sass",
         "onLanguage:less",
-        "onLanguage:vue"
+        "onLanguage:vue",
+        "onLanguage:javascript",
+        "onLanguage:typescript",
+        "onLanguage:javascriptreact",
+        "onLanguage:typescriptreact"
     ],
     "contributes": {},
     "scripts": {

src/extension.ts

@@ -16,13 +16,28 @@ export const activate = () => {
 
         abbreviationShorthand.lastIndex = 0
     })
+    const taggedTemplateStylesLangs = new Set(['javascript', 'typescript', 'javascriptreact', 'typescriptreact'])
 
-    vscode.languages.registerCompletionItemProvider(['css', 'scss', 'less', 'vue'], {
+    vscode.languages.registerCompletionItemProvider(['css', 'scss', 'less', 'vue', ...taggedTemplateStylesLangs], {
         async provideCompletionItems(document, position, token, context) {
             const completions: vscode.CompletionItem[] = []
             // exit early on line start
             if (!position.character) return
-            const stylesRange = await getStylesRange(document, position)
+            const { kindName, start, end } =
+                ((await vscode.commands.executeCommand('tsEssentialPlugins.getNodeAtPosition', { offset: document.offsetAt(position) })) as any) ?? {}
+
+            // TODO: make it work in LastTemplateToken cases
+            const supportedSyntaxKinds = new Set(['TemplateHead', 'TemplateMiddle', 'FirstTemplateToken' /* 'LastTemplateToken ' */])
+
+            const isInTaggedTemplate =
+                supportedSyntaxKinds.has(kindName) &&
+                /\s*.*?(styled|css)\.?.*/.test(document.getText(new vscode.Range(document.positionAt(start).with(undefined, 0), document.positionAt(start))))
+
+            const stylesRange =
+                taggedTemplateStylesLangs.has(document.languageId) && isInTaggedTemplate
+                    ? new vscode.Range(document.positionAt(start).translate(undefined, 1), document.positionAt(end).translate(undefined, -1))
+                    : await getStylesRange(document, position)
+
             if (!stylesRange) return
 
             const virtualDocument: SimpleVirtualDocument = {

src/parseCss.ts

@@ -2,7 +2,7 @@
 import postcssParser from 'postcss/lib/parse'
 import Node from 'postcss/lib/node'
 import Rule from 'postcss/lib/rule'
-import { Declaration } from 'postcss'
+import { Declaration, Root } from 'postcss'
 
 const findUsedRules = (stylesContent: string, offset: number) => {
     const usedRules = new Map<string, { value: string; offset: number }>()
@@ -28,6 +28,14 @@ const findUsedRules = (stylesContent: string, offset: number) => {
 
     const foundNode = findPositionContainingNode(offset, parsed.nodes)
 
+    // styled component case
+    if (!foundNode && parsed instanceof Root && 'nodes' in parsed) {
+        for (const node of parsed.nodes as Node[])
+            if (node instanceof Declaration) {
+                usedRules.set(node.prop, { value: node.value, offset: node.source!.start!.offset })
+            }
+    }
+
     if (foundNode instanceof Rule) {
         for (const node of foundNode.nodes)
             if (node instanceof Declaration) {