Don't show syntax error for *s inside --value and --modifier functions (#1215)

Fixes #1208

Needs infrastructure from #1216 and tests

---------

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

Author: 3 people

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,13 @@ 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, '_')
+  })
+
+  // Replace `--some-var-*` with `--some-var-_`
+  css = css.replace(/--([a-zA-Z0-9]+)-[*]/g, '--$1_')
+
   return css
 }

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

@@ -218,6 +218,7 @@ defineTest({
         @import 'tailwindcss';
         @theme {
           --color-primary: #333;
+          --leading-*: initial;
         }
       `,
     })
@@ -234,7 +235,7 @@ defineTest({
           uri: '{workspace:default}/file-1.css',
           range: {
             start: { line: 1, character: 0 },
-            end: { line: 3, character: 1 },
+            end: { line: 4, character: 1 },
           },
         },
       },
@@ -351,6 +352,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',

packages/vscode-tailwindcss/CHANGELOG.md

@@ -5,6 +5,8 @@
 - LSP: Declare capability for handling workspace folder change notifications ([#1223](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1223))
 - Don't throw when resolving paths containing a `#` character ([#1225](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1225))
 - Show `@theme` in symbol list in CSS language mode ([#1227](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1227))
+- Don't show syntax error when `*` appear inside `—value(…)` and `--modifier(…)`  ([#1226](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1226))
+- Don't show syntax error for theme namespaces inside `@theme` ([#1226](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1226))
 
 ## 0.14.6