Add support for styled-jsx / CSS in JS syntax

Author: lsegal

packages/tailwindcss-language-service/src/util/getLanguageBoundaries.ts

@@ -20,10 +20,12 @@ let htmlScriptTypes = [
 ]
 
 let text = { text: { match: /[^]/, lineBreaks: true } }
+let styledCssBlockStart = { match: /css(?:\.resolve|\.global)?`/, push: 'styledCssBlock' }
 
 let states = {
   main: {
     cssBlockStart: { match: /<style(?=[>\s])/, push: 'cssBlock' },
+    cssStyledBlockStart: styledCssBlockStart,
     jsBlockStart: { match: '<script', push: 'jsBlock' },
     ...text,
   },
@@ -35,7 +37,13 @@ let states = {
     interp: { match: '{', push: 'interp' },
     ...text,
   },
+  styledCssBlock: {
+    cssBlockEnd: { match: '`', pop: 1 },
+    jsBlockStart: { match: '${', push: 'jsInterp' },
+    ...text,
+  },
   jsBlock: {
+    cssStyledBlockStart: styledCssBlockStart,
     scriptStart: { match: '>', next: 'script' },
     jsBlockEnd: { match: '/>', pop: 1 },
     langAttrStartDouble: { match: 'lang="', push: 'langAttrDouble' },
@@ -47,6 +55,12 @@ let states = {
     interp: { match: '{', push: 'interp' },
     ...text,
   },
+  jsInterp: {
+    cssStyledBlockStart: styledCssBlockStart,
+    interp: { match: '{', push: 'jsInterp' },
+    jsBlockEnd: { match: '}', pop: 1 },
+    ...text,
+  },
   interp: {
     interp: { match: '{', push: 'interp' },
     end: { match: '}', pop: 1 },
@@ -154,7 +168,7 @@ export function getLanguageBoundaries(
   let lexer = defaultType === 'none' ? vueLexer : defaultLexer
   lexer.reset(text)
 
-  let type = defaultType
+  let types = [defaultType]
   let boundaries: LanguageBoundary[] = [
     { type: defaultType, range: { start: { line: 0, character: 0 }, end: undefined } },
   ]
@@ -168,12 +182,13 @@ export function getLanguageBoundaries(
           if (!boundaries[boundaries.length - 1].range.end) {
             boundaries[boundaries.length - 1].range.end = position
           }
-          type = token.type.replace(/BlockStart$/, '')
-          boundaries.push({ type, range: { start: position, end: undefined } })
+          types.push(token.type.replace(/(?:[A-Z].+?)?BlockStart$/, ''))
+          boundaries.push({ type: types[types.length - 1], range: { start: position, end: undefined } })
         } else if (token.type.endsWith('BlockEnd')) {
           let position = indexToPosition(text, offset)
+          types.pop()
           boundaries[boundaries.length - 1].range.end = position
-          boundaries.push({ type: defaultType, range: { start: position, end: undefined } })
+          boundaries.push({ type: types[types.length - 1], range: { start: position, end: undefined } })
         } else if (token.type === 'lang') {
           boundaries[boundaries.length - 1].type = token.text
         } else if (token.type === 'type' && htmlScriptTypes.includes(token.text)) {

packages/vscode-tailwindcss/package.json

@@ -83,21 +83,27 @@
           "source.css",
           "source.vue",
           "source.svelte",
+          "source.tsx",
+          "source.jsx",
           "text.html"
         ]
       },
       {
         "scopeName": "tailwindcss.at-rules.scss.injection",
         "path": "./syntaxes/at-rules.scss.tmLanguage.json",
         "injectTo": [
-          "source.css.scss"
+          "source.css.scss",
+          "source.tsx",
+          "source.jsx"
         ]
       },
       {
         "scopeName": "tailwindcss.at-rules.postcss.injection",
         "path": "./syntaxes/at-rules.postcss.tmLanguage.json",
         "injectTo": [
-          "source.css.postcss"
+          "source.css.postcss",
+          "source.tsx",
+          "source.jsx"
         ]
       },
       {
@@ -108,6 +114,8 @@
           "source.css.postcss",
           "source.vue",
           "source.svelte",
+          "source.tsx",
+          "source.jsx",
           "text.html"
         ]
       },
@@ -119,6 +127,8 @@
           "source.css.postcss",
           "source.vue",
           "source.svelte",
+          "source.tsx",
+          "source.jsx",
           "text.html"
         ]
       },
@@ -130,6 +140,8 @@
           "source.css.postcss",
           "source.vue",
           "source.svelte",
+          "source.tsx",
+          "source.jsx",
           "text.html"
         ]
       }