Fix @layer replacement bug (#1458)

Fixes #1457

- [x] need a bit of manual testing but I think everything is good

Author: thecrypticace

packages/tailwindcss-language-server/package.json

@@ -96,7 +96,7 @@
     "vite": "^6.3.5",
     "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^3.2.1",
-    "vscode-css-languageservice": "6.3.6",
+    "vscode-css-languageservice": "6.3.7",
     "vscode-jsonrpc": "8.2.0",
     "vscode-languageclient": "8.1.0",
     "vscode-languageserver": "8.1.0",

packages/tailwindcss-language-server/src/language/rewriting.test.ts

@@ -1,19 +1,24 @@
 import { describe, expect, test } from 'vitest'
 import { rewriteCss } from './rewriting'
-import dedent from 'dedent'
 
-// TODO: Remove once the bundled CSS language service is updated
-test('@layer statements are removed', () => {
+// https://github.com/tailwindlabs/tailwindcss-intellisense/issues/1457
+test('@layer statements inside comments do not break', () => {
   let input = [
     //
-    '@layer theme, base, components, utilities;',
-    '@import "tailwindcss";',
+    '/* @layer',
+    '*/',
+    '@import "./path/to/a/file.css";',
+    '',
+    '@source "./**/*.{ts,tsx}";',
   ]
 
   let output = [
     //
-    '', // wrong
-    '@import "tailwindcss" ;',
+    '/* @layer',
+    '*/',
+    '@import "./path/to/a/file.css" ;', // wrong
+    '',
+    '@source "./**/*.{ts,tsx}";',
   ]
 
   expect(rewriteCss(input.join('\n'))).toBe(output.join('\n'))
@@ -31,7 +36,7 @@ test('@layer blocks', () => {
 
   let output = [
     //
-    '@media(℘)        {',
+    '@layer utilities {',
     '  .foo {',
     '    color: red;',
     '  }',

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

@@ -29,11 +29,6 @@ function replaceWithStyleRule(delta = 0) {
  * errors for things that aren't actually errors.
  */
 export function rewriteCss(css: string) {
-  // Remove inline `@layer` directives
-  // TODO: This should be unnecessary once we have updated the bundled CSS
-  // language service
-  css = css.replace(/@layer\s+[^;{]+(;|$)/g, '')
-
   css = css.replace(/@screen(\s+[^{]+){/g, replaceWithAtRule(-2))
   css = css.replace(/@variants(\s+[^{]+){/g, replaceWithAtRule())
   css = css.replace(/@responsive(\s*){/g, replaceWithAtRule())
@@ -47,7 +42,6 @@ export function rewriteCss(css: string) {
 
   css = css.replace(/@(custom-variant)(\s+[^{]+){/g, replaceWithStyleRule())
   css = css.replace(/@(variant)(\s+[^{]+){/g, replaceWithStyleRule())
-  css = css.replace(/@layer(\s+[^{]{2,}){/g, replaceWithAtRule(-3))
   css = css.replace(/@reference\s*([^;]{2,})/g, '@import    $1')
 
   css = css.replace(

packages/tailwindcss-language-server/tests/css/css-server.test.ts

@@ -618,17 +618,6 @@ defineTest({
 
     // Symbols show up for @custom-variant
     expect(await doc.symbols()).toMatchObject([
-      {
-        kind: SymbolKind.Module,
-        name: '@layer base',
-        location: {
-          uri: '{workspace:default}/file-1.css',
-          range: {
-            start: { line: 0, character: 0 },
-            end: { line: 4, character: 1 },
-          },
-        },
-      },
       {
         kind: SymbolKind.Class,
         name: '.foo',
@@ -640,17 +629,6 @@ defineTest({
           },
         },
       },
-      {
-        kind: SymbolKind.Module,
-        name: '@layer utilities',
-        location: {
-          uri: '{workspace:default}/file-1.css',
-          range: {
-            start: { line: 5, character: 0 },
-            end: { line: 9, character: 1 },
-          },
-        },
-      },
       {
         kind: SymbolKind.Class,
         name: '.bar',