Handle projects with a configured prefix

Author: thecrypticace

packages/tailwindcss-language-server/tests/diagnostics/diagnostics.test.js

@@ -155,3 +155,102 @@ withFixture('v4/basic', (c) => {
     expected: [],
   })
 })
+
+withFixture('v4/with-prefix', (c) => {
+  function testInline(fixture, { code, expected, language = 'html' }) {
+    test(fixture, async () => {
+      let promise = new Promise((resolve) => {
+        c.onNotification('textDocument/publishDiagnostics', ({ diagnostics }) => {
+          resolve(diagnostics)
+        })
+      })
+
+      let doc = await c.openDocument({ text: code, lang: language })
+      let diagnostics = await promise
+
+      expected = JSON.parse(JSON.stringify(expected).replaceAll('{{URI}}', doc.uri))
+
+      expect(diagnostics).toEqual(expected)
+    })
+  }
+
+  // testFixture('css-conflict/simple')
+  // testFixture('css-conflict/variants-negative')
+  // testFixture('css-conflict/variants-positive')
+  // testFixture('css-conflict/jsx-concat-negative')
+  // testFixture('css-conflict/jsx-concat-positive')
+  // testFixture('css-conflict/vue-style-lang-sass')
+
+  // testFixture('css-conflict/css')
+  // testFixture('css-conflict/css-multi-rule')
+  // testFixture('css-conflict/css-multi-prop')
+  // testFixture('invalid-screen/simple')
+
+  testInline('simple typos in theme keys (in key)', {
+    code: '.test { color: theme(--color-red-901) }',
+    language: 'css',
+    expected: [
+      {
+        code: 'invalidConfigPath',
+        range: { start: { line: 0, character: 21 }, end: { line: 0, character: 36 } },
+        severity: 1,
+        message: "'--color-red-901' does not exist in your theme. Did you mean '--color-red-900'?",
+        suggestions: ['--color-red-900'],
+      },
+    ],
+  })
+
+  testInline('simple typos in theme keys (in namespace)', {
+    code: '.test { color: theme(--colors-red-901) }',
+    language: 'css',
+    expected: [
+      {
+        code: 'invalidConfigPath',
+        range: { start: { line: 0, character: 21 }, end: { line: 0, character: 37 } },
+        severity: 1,
+        message: "'--colors-red-901' does not exist in your theme. Did you mean '--color-red-900'?",
+        suggestions: ['--color-red-900'],
+      },
+    ],
+  })
+
+  testInline('No similar theme key exists', {
+    code: '.test { color: theme(--font-obliqueness-90) }',
+    language: 'css',
+    expected: [
+      {
+        code: 'invalidConfigPath',
+        range: { start: { line: 0, character: 21 }, end: { line: 0, character: 42 } },
+        severity: 1,
+        message: "'--font-obliqueness-90' does not exist in your theme.",
+        suggestions: [],
+      },
+    ],
+  })
+
+  testInline('valid theme keys dont issue diagnostics', {
+    code: '.test { color: theme(--color-red-900) }',
+    language: 'css',
+    expected: [],
+  })
+
+  testInline('types in legacy theme config paths', {
+    code: '.test { color: theme(colors.red.901) }',
+    language: 'css',
+    expected: [
+      {
+        code: 'invalidConfigPath',
+        range: { start: { line: 0, character: 21 }, end: { line: 0, character: 35 } },
+        severity: 1,
+        message: "'colors.red.901' does not exist in your theme config.",
+        suggestions: [],
+      },
+    ],
+  })
+
+  testInline('valid legacy theme config paths', {
+    code: '.test { color: theme(colors.red.900) }',
+    language: 'css',
+    expected: [],
+  })
+})

packages/tailwindcss-language-server/tests/fixtures/v4/with-prefix/app.css

@@ -0,0 +1,5 @@
+@import 'tailwindcss';
+
+@theme prefix(tw) {
+  --color-potato: #907a70;
+}

packages/tailwindcss-language-server/tests/fixtures/v4/with-prefix/package-lock.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "tailwindcss": "^4.0.0-alpha.30"
+  }
+}

packages/tailwindcss-language-server/tests/fixtures/v4/with-prefix/package.json

@@ -207,7 +207,8 @@ export function getInvalidConfigPathDiagnostics(
 }
 
 function resolveThemeValue(design: DesignSystem, path: string) {
-  let candidate = `[--custom:theme(${path})]`
+  let prefix = design.theme.prefix ?? null
+  let candidate = prefix ? `${prefix}:[--custom:theme(${path})]` : `[--custom:theme(${path})]`
 
   // Compile a dummy candidate that uses the theme function with the given path.
   //
@@ -230,7 +231,12 @@ function resolveThemeValue(design: DesignSystem, path: string) {
 function resolveKnownThemeKeys(design: DesignSystem): string[] {
   let validThemeKeys = Array.from(design.theme.entries(), ([key]) => key)
 
-  return validThemeKeys
+  let prefixLength = design.theme.prefix?.length ?? 0
+
+  return prefixLength > 0
+    ? // Strip the configured prefix from the list of valid theme keys
+      validThemeKeys.map((key) => `--${key.slice(prefixLength + 3)}`)
+    : validThemeKeys
 }
 
 function validateV4ThemePath(state: State, path: string): ValidationResult {

packages/tailwindcss-language-service/src/diagnostics/getInvalidConfigPathDiagnostics.ts

@@ -3,6 +3,8 @@ import type { Rule } from './ast'
 import type { NamedVariant } from './candidate'
 
 export interface Theme {
+  // Prefix didn't exist on
+  prefix?: string
   entries(): [string, any][]
 }