Add support for @source inline(…) and @source not inline(…)

Author: thecrypticace

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

@@ -368,6 +368,32 @@ withFixture('v4/dependencies', (c) => {
     })
   })
 
+  test.concurrent('@source inline(…)', async ({ expect }) => {
+    let result = await completion({
+      text: '@source inline("',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 16,
+      },
+    })
+
+    expect(result).toEqual(null)
+  })
+
+  test.concurrent('@source not inline(…)', async ({ expect }) => {
+    let result = await completion({
+      text: '@source not inline("',
+      lang: 'css',
+      position: {
+        line: 0,
+        character: 20,
+      },
+    })
+
+    expect(result).toEqual(null)
+  })
+
   test.concurrent('@import "…" source(…)', async ({ expect }) => {
     let result = await completion({
       text: '@import "tailwindcss" source("',

packages/tailwindcss-language-server/tests/document-links/document-links.test.js

@@ -157,6 +157,18 @@ withFixture('v4/basic', (c) => {
     ],
   })
 
+  testDocumentLinks('@source inline(…)', {
+    text: '@source inline("m-{1,2,3}");',
+    lang: 'css',
+    expected: [],
+  })
+
+  testDocumentLinks('@source not inline(…)', {
+    text: '@source not inline("m-{1,2,3}");',
+    lang: 'css',
+    expected: [],
+  })
+
   testDocumentLinks('Directories in source(…) show links', {
     text: `
       @import "tailwindcss" source("../../");

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

@@ -320,6 +320,74 @@ withFixture('v4/basic', (c) => {
     },
   })
 
+  testHover('css @source inline glob expansion', {
+    exact: true,
+    lang: 'css',
+    text: `@source inline("{hover:,active:,}m-{1,2,3}")`,
+    position: { line: 0, character: 23 },
+    expected: {
+      contents: {
+        kind: 'markdown',
+        value: [
+          '**Expansion**',
+          '```plaintext',
+          '- hover:m-1',
+          '- hover:m-2',
+          '- hover:m-3',
+          '- active:m-1',
+          '- active:m-2',
+          '- active:m-3',
+          '- m-1',
+          '- m-2',
+          '- m-3',
+          '```',
+        ].join('\n'),
+      },
+      range: {
+        start: { line: 0, character: 15 },
+        end: { line: 0, character: 43 },
+      },
+    },
+    expectedRange: {
+      start: { line: 2, character: 9 },
+      end: { line: 2, character: 15 },
+    },
+  })
+
+  testHover('css @source not inline glob expansion', {
+    exact: true,
+    lang: 'css',
+    text: `@source not inline("{hover:,active:,}m-{1,2,3}")`,
+    position: { line: 0, character: 23 },
+    expected: {
+      contents: {
+        kind: 'markdown',
+        value: [
+          '**Expansion**',
+          '```plaintext',
+          '- hover:m-1',
+          '- hover:m-2',
+          '- hover:m-3',
+          '- active:m-1',
+          '- active:m-2',
+          '- active:m-3',
+          '- m-1',
+          '- m-2',
+          '- m-3',
+          '```',
+        ].join('\n'),
+      },
+      range: {
+        start: { line: 0, character: 19 },
+        end: { line: 0, character: 47 },
+      },
+    },
+    expectedRange: {
+      start: { line: 2, character: 9 },
+      end: { line: 2, character: 18 },
+    },
+  })
+
   testHover('--theme() works inside @media queries', {
     lang: 'tailwindcss',
     text: `@media (width>=--theme(--breakpoint-xl)) { .foo { color: red; } }`,

packages/tailwindcss-language-service/src/completions/file-paths.test.ts

@@ -61,3 +61,12 @@ test('Detecting v4 directives that point to files', async () => {
     suggest: 'directory',
   })
 })
+
+test('@source inline is ignored', async () => {
+  function find(text: string) {
+    return findFileDirective({ enabled: true, v4: true }, text)
+  }
+
+  await expect(find('@source inline("')).resolves.toEqual(null)
+  await expect(find('@source not inline("')).resolves.toEqual(null)
+})

packages/tailwindcss-language-service/src/completions/file-paths.ts

@@ -1,6 +1,8 @@
 import type { State } from '../util/state'
 
 // @config, @plugin, @source
+// - @source inline("…") is *not* a file directive
+// - @source not inline("…") is *not* a file directive
 const PATTERN_CUSTOM_V4 =
   /@(?<directive>config|plugin|source)(?<not>\s+not)?\s*(?<partial>'[^']*|"[^"]*)$/
 const PATTERN_CUSTOM_V3 = /@(?<directive>config)\s*(?<partial>'[^']*|"[^"]*)$/

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

@@ -14,7 +14,7 @@ const PATTERN_UTIL_SOURCE =
 
 // @source …
 const PATTERN_AT_SOURCE =
-  /(?:\s|^)@(?<directive>source)\s*(?<not>not)?\s*(?<source>'[^']*'?|"[^"]*"?|[a-z]*|\)|;)/dg
+  /(?:\s|^)@(?<directive>source)\s*(?<not>not)?\s*(?<source>'[^']*'?|"[^"]*"?|[a-z]*(?:\([^)]+\))?|\)|;)/dg
 
 const HAS_DRIVE_LETTER = /^[A-Z]:/
 
@@ -135,6 +135,11 @@ export function getInvalidSourceDiagnostics(
         })
       }
 
+      // `@source inline(…)` is fine
+      else if (directive === 'source' && source.startsWith('inline(')) {
+        //
+      }
+
       // - `@import "tailwindcss" source(no)`
       // - `@tailwind utilities source('')`
       else if (directive === 'source' && source !== 'none' && !isQuoted) {

packages/tailwindcss-language-service/src/hoverProvider.ts

@@ -170,6 +170,7 @@ async function provideSourceGlobHover(
 
   let patterns = [
     /@source(?:\s+not)?\s*(?<glob>'[^']+'|"[^"]+")/dg,
+    /@source(?:\s+not)?\s*inline\((?<glob>'[^']+'|"[^"]+")/dg,
   ]
 
   let matches = patterns.flatMap((pattern) => findAll(pattern, text))