Fix —value([*]) syntax error

Co-authored-by: tizu69 <[email protected]>

Author: thecrypticace

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

@@ -177,6 +177,30 @@ test('@import', () => {
   expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
 })
 
+test('--value(namespace) / --modifier(namespace)', () => {
+  let input = [
+    //
+    '.foo {',
+    '  color: --value(--color-*)',
+    '  background: --modifier(--color-*)',
+    '  z-index: --value([*])',
+    '  z-index: --modifier([*])',
+    '}',
+  ]
+
+  let output = [
+    //
+    '.foo {',
+    '  color: --value(--color-_)',
+    '  background: --modifier(--color-_)',
+    '  z-index: --value([_])',
+    '  z-index: --modifier([_])',
+    '}',
+  ]
+
+  expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
+})
+
 describe('v3', () => {
   test('@screen', () => {
     let input = [

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

@@ -68,5 +68,10 @@ export function rewriteCss(css: string) {
 
   css = css.replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_')
 
+  // Ignore `*` in in --value and --modifier functions
+  css = css.replace(/--(value|modifier)\((.*?)\)/g, (match) => {
+    return match.replace(/[*]/g, '_')
+  })
+
   return css
 }

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

@@ -351,6 +351,31 @@ defineTest({
   },
 })
 
+defineTest({
+  name: '--value(namespace) + --modifier(namespace)',
+  prepare: async ({ root }) => ({
+    client: await createClient({
+      server: 'css',
+      root,
+    }),
+  }),
+  handle: async ({ client }) => {
+    let doc = await client.open({
+      lang: 'tailwindcss',
+      name: 'file-1.css',
+      text: css`
+        .foo {
+          width: --value(--spacing-*);
+          height: --modifier(--spacing-*);
+          height: --modifier([*]);
+        }
+      `,
+    })
+
+    expect(await doc.diagnostics()).toEqual([])
+  },
+})
+
 // Legacy
 defineTest({
   name: '@screen',