Add support for new Tailwind CSS v4.0.0-beta.9 features (#1117)

- [x] Add support for `@reference` (alias for `@import "…" reference`)
- [ ] Add support for `--value()`
  - [x] Completions (functional `@utility` context only)
  - [ ] Warning when used in non-functional utility context
  - [ ] Syntax highlighting
- [ ] Add support for `--modifier()`
  - [x] Completions (functional `@utility` context only)
  - [ ] Warning when used in non-functional utility context
  - [ ] Syntax highlighting
- [ ] Suggestions inside `--value()` and `--modifier()`
  - [ ] Theme keys
    - [x] Initial version: Same suggestions as @theme { … }
    - [ ] Final version: Compute theme key prefixes and suggest these
      - [ ] Ignore nested theme keys (`--` separated)
  - [x] Bare value data types
  - [x] Arbitrary value data types
- [ ] Add support for `--spacing()`
- [ ] Completions (this maybe doesn't make sense — it just takes a
number, variable, or just whatever)
  - [x] Syntax highlighting
- [ ] Add support for `--theme()`
  - [x] Completions
  - [x] Syntax highlighting
- [ ] Add `theme()` function deprecation warning (v4 only)
- [ ] When using modern variable syntax offer quick fix to `--theme(…)`

Author: thecrypticace

packages/tailwindcss-language-server/src/css/resolve-css-imports.ts

@@ -12,6 +12,17 @@ export function resolveCssImports({
   loose?: boolean
 }) {
   return postcss([
+    // Replace `@reference "…"` with `@import "…" reference`
+    {
+      postcssPlugin: 'replace-at-reference',
+      Once(root) {
+        root.walkAtRules('reference', (atRule) => {
+          atRule.name = 'import'
+          atRule.params += ' reference'
+        })
+      },
+    },
+
     // Hoist imports to the top of the file
     {
       postcssPlugin: 'hoist-at-import',

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

@@ -348,17 +348,22 @@ function createVirtualCssDocument(textDocument: TextDocument): TextDocument {
     .replace(/@variants(\s+[^{]+){/g, replace())
     .replace(/@responsive(\s*){/g, replace())
     .replace(/@layer(\s+[^{]{2,}){/g, replace(-3))
+    .replace(/@reference\s*([^;]{2,})/g, '@import    $1')
     .replace(
       /@media(\s+screen\s*\([^)]+\))/g,
       (_match, screen) => `@media (${MEDIA_MARKER})${' '.repeat(screen.length - 4)}`,
     )
-    .replace(/@import\s*("(?:[^"]+)"|'(?:[^']+)')\s*(.*?)(?=;|$)/g, (_match, url, other) => {
-      // Remove`source(…)`, `theme(…)`, and `prefix(…)` from `@import`s
-      // otherwise we'll show syntax-error diagnostics which we don't want
-      other = other.replace(/((source|theme|prefix)\([^)]+\)\s*)+?/g, '')
-
-      return `@import "${url.slice(1, -1)}" ${other}`
-    })
+    .replace(
+      /@import(\s*)("(?:[^"]+)"|'(?:[^']+)')\s*(.*?)(?=;|$)/g,
+      (_match, spaces, url, other) => {
+        // Remove`source(…)`, `theme(…)`, and `prefix(…)` from `@import`s
+        // otherwise we'll show syntax-error diagnostics which we don't want
+        other = other.replace(/((source|theme|prefix)\([^)]+\)\s*)+?/g, '')
+
+        // We have to add the spaces here so the character positions line up
+        return `@import${spaces}"${url.slice(1, -1)}" ${other}`
+      },
+    )
     .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_')
 
   return TextDocument.create(