Rewrite all occurrences of * in a CSS variable name (#1256)

Fixes #1248

Author: thecrypticace

packages/tailwindcss-language-server/src/language/css-server.ts

@@ -225,7 +225,7 @@ export class CssServer {
               if (match) {
                 symbol.name = `${match[1]} ${match[2]?.trim() ?? match[3]?.trim()}`
               }
-            } else if (symbol.name === `.placeholder`) {
+            } else if (/^\._+$/.test(symbol.name)) {
               let doc = documents.get(symbol.location.uri)
               let text = doc.getText(symbol.location.range)
               let match = text.trim().match(/^(@[^\s]+)(?:([^{]+)[{]|([^;{]+);)/)

packages/tailwindcss-language-server/src/language/rewriting.test.ts

@@ -50,16 +50,22 @@ test('@utility', () => {
     '@utility foo-* {',
     '  color: red;',
     '}',
+    '@utility bar-* {',
+    '  color: --value(--font-*-line-height);',
+    '}',
   ]
 
   let output = [
     //
-    '.placeholder     {', // wrong
+    '._______     {',
     '  color: red;',
     '}',
-    '.placeholder       {', // wrong
+    '._______       {',
     '  color: red;',
     '}',
+    '._______       {',
+    '  color: --value(--font-_-line-height);',
+    '}',
   ]
 
   expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
@@ -70,25 +76,33 @@ test('@theme', () => {
     //
     '@theme {',
     '  --color: red;',
+    '  --*: initial;',
+    '  --text*: initial;',
     '  --font-*: initial;',
     '  --font-weight-*: initial;',
     '}',
     '@theme inline reference static default {',
     '  --color: red;',
+    '  --*: initial;',
+    '  --text*: initial;',
     '  --font-*: initial;',
     '  --font-weight-*: initial;',
     '}',
   ]
 
   let output = [
     //
-    '.placeholder {', // wrong
+    '._____ {',
     '  --color: red;',
+    '  --_: initial;',
+    '  --text_: initial;',
     '  --font-_: initial;',
     '  --font-weight-_: initial;',
     '}',
-    '.placeholder                                 {', // wrong
+    '._____                                 {',
     '  --color: red;',
+    '  --_: initial;',
+    '  --text_: initial;',
     '  --font-_: initial;',
     '  --font-weight-_: initial;',
     '}',
@@ -110,8 +124,8 @@ test('@custom-variant', () => {
 
   let output = [
     //
-    '@media (℘)                   {}', // wrong
-    '.placeholder     {', // wrong
+    '@media(℘)                   {}',
+    '.______________     {',
     '  &:hover {',
     '    @slot;',
     '  }',
@@ -133,7 +147,7 @@ test('@variant', () => {
 
   let output = [
     //
-    '.placeholder     {', // wrong
+    '._______     {',
     '  &:hover {',
     '    @slot;',
     '  }',

packages/tailwindcss-language-server/src/language/rewriting.ts

@@ -14,9 +14,10 @@ function replaceWithAtRule(delta = 0) {
 }
 
 function replaceWithStyleRule(delta = 0) {
-  return (_match: string, p1: string) => {
+  return (_match: string, name: string, p1: string) => {
+    let className = '_'.repeat(name.length)
     let spaces = ' '.repeat(p1.length + delta)
-    return `.placeholder${spaces}{`
+    return `.${className}${spaces}{`
   }
 }
 
@@ -36,16 +37,16 @@ export function rewriteCss(css: string) {
   css = css.replace(/@screen(\s+[^{]+){/g, replaceWithAtRule(-2))
   css = css.replace(/@variants(\s+[^{]+){/g, replaceWithAtRule())
   css = css.replace(/@responsive(\s*){/g, replaceWithAtRule())
-  css = css.replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule())
-  css = css.replace(/@theme(\s+[^{]*){/g, replaceWithStyleRule())
+  css = css.replace(/@(utility)(\s+[^{]+){/g, replaceWithStyleRule())
+  css = css.replace(/@(theme)(\s+[^{]*){/g, replaceWithStyleRule())
 
-  css = css.replace(/@custom-variant(\s+[^;{]+);/g, (match: string) => {
-    let spaces = ' '.repeat(match.length - 11)
-    return `@media (${MEDIA_MARKER})${spaces}{}`
+  css = css.replace(/@(custom-variant)(\s+[^;{]+);/g, (match: string, name: string) => {
+    let spaces = ' '.repeat(match.length - name.length + 3)
+    return `@media(${MEDIA_MARKER})${spaces}{}`
   })
 
-  css = css.replace(/@custom-variant(\s+[^{]+){/g, replaceWithStyleRule())
-  css = css.replace(/@variant(\s+[^{]+){/g, replaceWithStyleRule())
+  css = css.replace(/@(custom-variant)(\s+[^{]+){/g, replaceWithStyleRule())
+  css = css.replace(/@(variant)(\s+[^{]+){/g, replaceWithStyleRule())
   css = css.replace(/@layer(\s+[^{]{2,}){/g, replaceWithAtRule(-3))
   css = css.replace(/@reference\s*([^;]{2,})/g, '@import    $1')
 
@@ -73,8 +74,13 @@ export function rewriteCss(css: string) {
     return match.replace(/[*]/g, '_')
   })
 
+  // Replace `--*` with `--_`
+  // Replace `--some-var*` with `--some-var_`
   // Replace `--some-var-*` with `--some-var-_`
-  css = css.replace(/--([a-zA-Z0-9-]+)-[*]/g, '--$1-_')
+  // Replace `--text-*-line-height` with `--text-_-line-height`
+  css = css.replace(/--([a-zA-Z0-9-*]*)/g, (match) => {
+    return match.replace(/[*]/g, '_')
+  })
 
   return css
 }

packages/tailwindcss-language-server/tests/css/css-server.test.ts

@@ -38,7 +38,7 @@ defineTest({
           uri: '{workspace:default}/file-1.css',
           range: {
             start: { line: 1, character: 0 },
-            end: { line: 1, character: 31 },
+            end: { line: 1, character: 30 },
           },
         },
       },

packages/vscode-tailwindcss/CHANGELOG.md

@@ -5,6 +5,7 @@
 - v4: Support loading bundled versions of some first-party plugins ([#1240](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1240))
 - Cancel initial file search if it takes too long ([#1242](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1242))
 - LSP: Don’t throw when the client does not provide `textDocument` in capabilities ([#1252](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1252))
+- v4: Allow `*` anywhere in a CSS variable name ([#1256](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1256))
 
 # 0.14.8