Rewrite all occurrences of * in a CSS variable name

Author: thecrypticace

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

@@ -50,6 +50,9 @@ test('@utility', () => {
     '@utility foo-* {',
     '  color: red;',
     '}',
+    '@utility bar-* {',
+    '  color: --value(--font-*-line-height);',
+    '}',
   ]
 
   let output = [
@@ -60,6 +63,9 @@ test('@utility', () => {
     '.placeholder       {', // wrong
     '  color: red;',
     '}',
+    '.placeholder       {', // wrong
+    '  color: --value(--font-_-line-height);',
+    '}',
   ]
 
   expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
@@ -70,11 +76,15 @@ 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;',
     '}',
@@ -84,11 +94,15 @@ test('@theme', () => {
     //
     '.placeholder {', // wrong
     '  --color: red;',
+    '  --_: initial;',
+    '  --text_: initial;',
     '  --font-_: initial;',
     '  --font-weight-_: initial;',
     '}',
     '.placeholder                                 {', // wrong
     '  --color: red;',
+    '  --_: initial;',
+    '  --text_: initial;',
     '  --font-_: initial;',
     '  --font-weight-_: initial;',
     '}',

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

@@ -73,8 +73,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
 }