Improve support for source(…) feature in v4

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

@@ -27,6 +27,7 @@ function getDefaultSettings(): Settings {
         invalidVariant: 'error',
         invalidConfigPath: 'error',
         invalidTailwindDirective: 'error',
+        invalidSourceDirective: 'error',
         recommendedVariantOrder: 'warning',
       },
       showPixelEquivalents: true,

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

@@ -0,0 +1,194 @@
+import { expect, test } from 'vitest'
+import { withFixture } from '../common'
+
+const css = String.raw
+
+withFixture('v4/basic', (c) => {
+  function runTest(name, { code, expected, language }) {
+    test(name, 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).toMatchObject(expected)
+    })
+  }
+
+  runTest('Source directives require paths', {
+    language: 'css',
+    code: `
+      @import 'tailwindcss' source();
+      @import 'tailwindcss' source('');
+      @import 'tailwindcss' source("");
+      @tailwind utilities source();
+      @tailwind utilities source('');
+      @tailwind utilities source("");
+    `,
+    expected: [
+      {
+        code: 'invalidSourceDirective',
+        message: 'Need a path for the source directive',
+        range: {
+          start: { line: 1, character: 35 },
+          end: { line: 1, character: 35 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: 'Need a path for the source directive',
+        range: {
+          start: { line: 2, character: 35 },
+          end: { line: 2, character: 37 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: 'Need a path for the source directive',
+        range: {
+          start: { line: 3, character: 35 },
+          end: { line: 3, character: 37 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: 'Need a path for the source directive',
+        range: {
+          start: { line: 4, character: 33 },
+          end: { line: 4, character: 33 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: 'Need a path for the source directive',
+        range: {
+          start: { line: 5, character: 33 },
+          end: { line: 5, character: 35 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: 'Need a path for the source directive',
+        range: {
+          start: { line: 6, character: 33 },
+          end: { line: 6, character: 35 },
+        },
+      },
+    ],
+  })
+
+  runTest('source(none) must not be mispelled', {
+    language: 'css',
+    code: `
+      @import 'tailwindcss' source(no);
+      @tailwind utilities source(no);
+    `,
+    expected: [
+      {
+        code: 'invalidSourceDirective',
+        message: '`source(no)` is invalid. Did you mean `source(none)`.',
+        range: {
+          start: { line: 1, character: 35 },
+          end: { line: 1, character: 37 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: '`source(no)` is invalid. Did you mean `source(none)`.',
+        range: {
+          start: { line: 2, character: 33 },
+          end: { line: 2, character: 35 },
+        },
+      },
+    ],
+  })
+
+  runTest('source("…") does not produce diagnostics', {
+    language: 'css',
+    code: `
+      @import 'tailwindcss' source('../app');
+      @tailwind utilities source('../app');
+      @import 'tailwindcss' source("../app");
+      @tailwind utilities source("../app");
+    `,
+    expected: [],
+  })
+
+  runTest('source("…") must not be a glob', {
+    language: 'css',
+    code: `
+      @import 'tailwindcss' source('../app/**/*.html');
+      @import 'tailwindcss' source('../app/index.{html,js}');
+      @tailwind utilities source('../app/**/*.html');
+      @tailwind utilities source('../app/index.{html,js}');
+    `,
+    expected: [
+      {
+        code: 'invalidSourceDirective',
+        message: `source('../app/**/*.html') uses a glob but a glob cannot be used here. Use a directory name instead.`,
+        range: {
+          start: { line: 1, character: 35 },
+          end: { line: 1, character: 53 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: `source('../app/index.{html,js}') uses a glob but a glob cannot be used here. Use a directory name instead.`,
+        range: {
+          start: { line: 2, character: 35 },
+          end: { line: 2, character: 59 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: `source('../app/**/*.html') uses a glob but a glob cannot be used here. Use a directory name instead.`,
+        range: {
+          start: { line: 3, character: 33 },
+          end: { line: 3, character: 51 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message: `source('../app/index.{html,js}') uses a glob but a glob cannot be used here. Use a directory name instead.`,
+        range: {
+          start: { line: 4, character: 33 },
+          end: { line: 4, character: 57 },
+        },
+      },
+    ],
+  })
+
+  runTest('paths given to source("…") must error when not POSIX', {
+    language: 'css',
+    code: String.raw`
+      @import 'tailwindcss' source('C:\\absolute\\path');
+      @import 'tailwindcss' source('C:relative.txt');
+    `,
+    expected: [
+      {
+        code: 'invalidSourceDirective',
+        message:
+          'POSIX-style paths are required with source() but `C:\\absolute\\path` is a Windows-style path.',
+        range: {
+          start: { line: 1, character: 35 },
+          end: { line: 1, character: 55 },
+        },
+      },
+      {
+        code: 'invalidSourceDirective',
+        message:
+          'POSIX-style paths are required with source() but `C:relative.txt` is a Windows-style path.',
+        range: {
+          start: { line: 2, character: 35 },
+          end: { line: 2, character: 51 },
+        },
+      },
+    ],
+  })
+})

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

@@ -8,6 +8,7 @@ import { getInvalidVariantDiagnostics } from './getInvalidVariantDiagnostics'
 import { getInvalidConfigPathDiagnostics } from './getInvalidConfigPathDiagnostics'
 import { getInvalidTailwindDirectiveDiagnostics } from './getInvalidTailwindDirectiveDiagnostics'
 import { getRecommendedVariantOrderDiagnostics } from './getRecommendedVariantOrderDiagnostics'
+import { getInvalidSourceDiagnostics } from './getInvalidSourceDiagnostics'
 
 export async function doValidate(
   state: State,
@@ -19,6 +20,7 @@ export async function doValidate(
     DiagnosticKind.InvalidVariant,
     DiagnosticKind.InvalidConfigPath,
     DiagnosticKind.InvalidTailwindDirective,
+    DiagnosticKind.InvalidSourceDirective,
     DiagnosticKind.RecommendedVariantOrder,
   ],
 ): Promise<AugmentedDiagnostic[]> {
@@ -44,6 +46,9 @@ export async function doValidate(
         ...(only.includes(DiagnosticKind.InvalidTailwindDirective)
           ? getInvalidTailwindDirectiveDiagnostics(state, document, settings)
           : []),
+        ...(only.includes(DiagnosticKind.InvalidSourceDirective)
+          ? getInvalidSourceDiagnostics(state, document, settings)
+          : []),
         ...(only.includes(DiagnosticKind.RecommendedVariantOrder)
           ? await getRecommendedVariantOrderDiagnostics(state, document, settings)
           : []),