Fix errors around using @import with layer() and @layer in Tailwind CSS Language mode (#1097)

Fixes #1095
Fixes #1096
Fixes #1098

Author: thecrypticace

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

@@ -337,22 +337,29 @@ function replace(delta = 0) {
 
 function createVirtualCssDocument(textDocument: TextDocument): TextDocument {
   let content = textDocument
-      .getText()
-      .replace(/@screen(\s+[^{]+){/g, replace(-2))
-      .replace(/@variants(\s+[^{]+){/g, replace())
-      .replace(/@responsive(\s*){/g, replace())
-      .replace(/@layer(\s+[^{]{2,}){/g, replace(-3))
-      .replace(
-        /@media(\s+screen\s*\([^)]+\))/g,
-        (_match, screen) => `@media (${MEDIA_MARKER})${' '.repeat(screen.length - 4)}`,
-      )
+    .getText()
+
+    // Remove inline `@layer` directives
+    // TODO: This should be unnecessary once we have updated the bundled CSS
+    // language service
+    .replace(/@layer\s+[^;{]+(;|$)/g, '')
+
+    .replace(/@screen(\s+[^{]+){/g, replace(-2))
+    .replace(/@variants(\s+[^{]+){/g, replace())
+    .replace(/@responsive(\s*){/g, replace())
+    .replace(/@layer(\s+[^{]{2,}){/g, replace(-3))
+    .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
-      .replace(
-        /@import\s*("(?:[^"]+)"|'(?:[^']+)')\s*((source|theme|prefix)\([^)]+\)\s*)+/g,
-        (_match, url) => `@import "${url.slice(1, -1)}"`,
-      )
-      .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_')
+      other = other.replace(/((source|theme|prefix)\([^)]+\)\s*)+?/g, '')
+
+      return `@import "${url.slice(1, -1)}" ${other}`
+    })
+    .replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_')
 
   return TextDocument.create(
     textDocument.uri,
@@ -389,7 +396,9 @@ async function validateTextDocument(textDocument: TextDocument): Promise<void> {
     .filter((diagnostic) => {
       if (
         diagnostic.code === 'unknownAtRules' &&
-        /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant)/.test(diagnostic.message)
+        /Unknown at rule @(tailwind|apply|config|theme|plugin|source|utility|variant)/.test(
+          diagnostic.message,
+        )
       ) {
         return false
       }

packages/vscode-tailwindcss/CHANGELOG.md

@@ -3,6 +3,9 @@
 ## Prerelease
 
 - Reload variants when editing the theme in v4 ([#1094](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1094))
+- Don't show syntax errors when imports contain `layer(…)` and `source(…)` ([#1095](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1095))
+- Don't show syntax errors when document contains an `@layer` statement ([#1095](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1095))
+- Correct syntax highlighting when imports contain `layer(…)` ([#1095](https://github.com/tailwindlabs/tailwindcss-intellisense/pull/1095))
 
 ## 0.12.14
 

packages/vscode-tailwindcss/syntaxes/at-rules.tmLanguage.json

@@ -37,6 +37,9 @@
         {
           "include": "source.css#url"
         },
+        {
+          "include": "#layer-fn"
+        },
         {
           "include": "#source-fn"
         },
@@ -522,7 +525,7 @@
           "patterns": [
             {
               "match": "none(?=[)])",
-              "name": "variable.other.css"
+              "name": "support.constant.none.css"
             },
             {
               "include": "source.css#string"
@@ -531,6 +534,33 @@
         }
       ]
     },
+    "layer-fn": {
+      "patterns": [
+        {
+          "begin": "(?i)(?:\\s*)(?<![\\w@-])(layer)([(])",
+          "beginCaptures": {
+            "1": {
+              "name": "support.function.layer.css"
+            },
+            "2": {
+              "name": "punctuation.section.function.begin.bracket.round.css"
+            }
+          },
+          "end": "[)]",
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.section.function.end.bracket.round.css"
+            }
+          },
+          "patterns": [
+            {
+              "match": "\\s*([a-zA-Z][a-zA-Z0-9.]+|\\\\(?:[0-9a-fA-F]{1,6}))?\\s*",
+              "name": "support.constant.layer-name.css"
+            }
+          ]
+        }
+      ]
+    },
     "theme-meta-fn": {
       "patterns": [
         {