Merge branch 'main' into fix/v4-load-via-jiti

Author: RobinMalfait

packages/tailwindcss-language-server/package.json

@@ -2,7 +2,7 @@
   "name": "@tailwindcss/language-server",
   "description": "Tailwind CSS Language Server",
   "license": "MIT",
-  "version": "0.0.25",
+  "version": "0.0.26",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tailwindlabs/tailwindcss-intellisense.git",

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

@@ -131,9 +131,21 @@ export async function scan(options: ScanOptions): Promise<ScanResult | null> {
   }
 
   // V3
+  if (lte(options.oxideVersion, '4.0.0-alpha.30')) {
+    let scanner = new oxide.Scanner({
+      detectSources: { base: options.basePath },
+      sources: options.sources,
+    })
+
+    return {
+      files: scanner.files,
+      globs: scanner.globs,
+    }
+  }
+
+  // V4
   let scanner = new oxide.Scanner({
-    detectSources: { base: options.basePath },
-    sources: options.sources,
+    sources: [{ base: options.basePath, pattern: '**/*' }, ...options.sources],
   })
 
   return {

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

@@ -1,4 +1,4 @@
-import { test } from 'vitest'
+import { test, expect } from 'vitest'
 import { withFixture } from '../common'
 
 withFixture('basic', (c) => {
@@ -169,9 +169,9 @@ withFixture('v4/basic', (c) => {
       {
         range: { start: { line: 0, character: 12 }, end: { line: 0, character: 22 } },
         color: {
-          red: 0.9372549019607843,
-          green: 0.26666666666666666,
-          blue: 0.26666666666666666,
+          red: expect.closeTo(0.98, 0.01),
+          green: expect.closeTo(0.172, 0.01),
+          blue: expect.closeTo(0.21, 0.01),
           alpha: 1,
         },
       },
@@ -184,9 +184,9 @@ withFixture('v4/basic', (c) => {
       {
         range: { start: { line: 0, character: 12 }, end: { line: 0, character: 25 } },
         color: {
-          red: 0.9372549019607843,
-          green: 0.26666666666666666,
-          blue: 0.26666666666666666,
+          red: expect.closeTo(0.98, 0.01),
+          green: expect.closeTo(0.172, 0.01),
+          blue: expect.closeTo(0.21, 0.01),
           alpha: 0.2,
         },
       },

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

@@ -310,8 +310,8 @@ withFixture('v4/basic', (c) => {
     let result = await completion({ lang, text, position, settings })
     let textEdit = expect.objectContaining({ range: { start: position, end: position } })
 
-    expect(result.items.length).toBe(12398)
-    expect(result.items.filter((item) => item.label.endsWith(':')).length).toBe(224)
+    expect(result.items.length).toBe(12492)
+    expect(result.items.filter((item) => item.label.endsWith(':')).length).toBe(270)
     expect(result).toEqual({
       isIncomplete: false,
       items: expect.arrayContaining([
@@ -553,11 +553,11 @@ withFixture('v4/basic', (c) => {
     expect(resolved).toEqual({
       ...item,
       detail:
-        'font-size: var(--font-size-sm, 0.875rem /* 8.75px */); line-height: var(--font-size-sm--line-height, 1.25rem /* 12.5px */);',
+        'font-size: var(--font-size-sm, 0.875rem /* 8.75px */); line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem /* 12.5px */));',
       documentation: {
         kind: 'markdown',
         value:
-          '```css\n.text-sm {\n  font-size: var(--font-size-sm, 0.875rem /* 8.75px */);\n  line-height: var(--font-size-sm--line-height, 1.25rem /* 12.5px */);\n}\n```',
+          '```css\n.text-sm {\n  font-size: var(--font-size-sm, 0.875rem /* 8.75px */);\n  line-height: var(--tw-leading, var(--font-size-sm--line-height, 1.25rem /* 12.5px */));\n}\n```',
       },
     })
   })
@@ -579,8 +579,8 @@ withFixture('v4/basic', (c) => {
 
     expect(resolved).toEqual({
       ...item,
-      detail: 'background-color: var(--color-red-500, #ef4444);',
-      documentation: '#ef4444',
+      detail: 'background-color: var(--color-red-500, oklch(0.637 0.237 25.331));',
+      documentation: '#fb2c36',
     })
   })
 })

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

@@ -59,6 +59,23 @@ withFixture('v4/basic', (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')
@@ -69,5 +86,171 @@ withFixture('v4/basic', (c) => {
   // testFixture('css-conflict/css-multi-rule')
   // testFixture('css-conflict/css-multi-prop')
   // testFixture('invalid-screen/simple')
-  // testFixture('invalid-theme/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: [],
+  })
+})
+
+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: [],
+  })
 })