Fix rewritten style rule offsets

Author: thecrypticace

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

@@ -225,7 +225,7 @@ export class CssServer {
               if (match) {
                 symbol.name = `${match[1]} ${match[2]?.trim() ?? match[3]?.trim()}`
               }
-            } else if (symbol.name === `.placeholder`) {
+            } else if (/^\._+$/.test(symbol.name)) {
               let doc = documents.get(symbol.location.uri)
               let text = doc.getText(symbol.location.range)
               let match = text.trim().match(/^(@[^\s]+)(?:([^{]+)[{]|([^;{]+);)/)

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

@@ -57,13 +57,13 @@ test('@utility', () => {
 
   let output = [
     //
-    '.placeholder     {', // wrong
+    '._______     {',
     '  color: red;',
     '}',
-    '.placeholder       {', // wrong
+    '._______       {',
     '  color: red;',
     '}',
-    '.placeholder       {', // wrong
+    '._______       {',
     '  color: --value(--font-_-line-height);',
     '}',
   ]
@@ -92,14 +92,14 @@ test('@theme', () => {
 
   let output = [
     //
-    '.placeholder {', // wrong
+    '._____ {',
     '  --color: red;',
     '  --_: initial;',
     '  --text_: initial;',
     '  --font-_: initial;',
     '  --font-weight-_: initial;',
     '}',
-    '.placeholder                                 {', // wrong
+    '._____                                 {',
     '  --color: red;',
     '  --_: initial;',
     '  --text_: initial;',
@@ -124,8 +124,8 @@ test('@custom-variant', () => {
 
   let output = [
     //
-    '@media (℘)                   {}', // wrong
-    '.placeholder     {', // wrong
+    '@media(℘)                   {}',
+    '.______________     {',
     '  &:hover {',
     '    @slot;',
     '  }',
@@ -147,7 +147,7 @@ test('@variant', () => {
 
   let output = [
     //
-    '.placeholder     {', // wrong
+    '._______     {',
     '  &:hover {',
     '    @slot;',
     '  }',

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

@@ -14,9 +14,10 @@ function replaceWithAtRule(delta = 0) {
 }
 
 function replaceWithStyleRule(delta = 0) {
-  return (_match: string, p1: string) => {
+  return (_match: string, name: string, p1: string) => {
+    let className = '_'.repeat(name.length)
     let spaces = ' '.repeat(p1.length + delta)
-    return `.placeholder${spaces}{`
+    return `.${className}${spaces}{`
   }
 }
 
@@ -36,16 +37,16 @@ export function rewriteCss(css: string) {
   css = css.replace(/@screen(\s+[^{]+){/g, replaceWithAtRule(-2))
   css = css.replace(/@variants(\s+[^{]+){/g, replaceWithAtRule())
   css = css.replace(/@responsive(\s*){/g, replaceWithAtRule())
-  css = css.replace(/@utility(\s+[^{]+){/g, replaceWithStyleRule())
-  css = css.replace(/@theme(\s+[^{]*){/g, replaceWithStyleRule())
+  css = css.replace(/@(utility)(\s+[^{]+){/g, replaceWithStyleRule())
+  css = css.replace(/@(theme)(\s+[^{]*){/g, replaceWithStyleRule())
 
-  css = css.replace(/@custom-variant(\s+[^;{]+);/g, (match: string) => {
-    let spaces = ' '.repeat(match.length - 11)
-    return `@media (${MEDIA_MARKER})${spaces}{}`
+  css = css.replace(/@(custom-variant)(\s+[^;{]+);/g, (match: string, name: string) => {
+    let spaces = ' '.repeat(match.length - name.length + 3)
+    return `@media(${MEDIA_MARKER})${spaces}{}`
   })
 
-  css = css.replace(/@custom-variant(\s+[^{]+){/g, replaceWithStyleRule())
-  css = css.replace(/@variant(\s+[^{]+){/g, replaceWithStyleRule())
+  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')
 

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

@@ -38,7 +38,7 @@ defineTest({
           uri: '{workspace:default}/file-1.css',
           range: {
             start: { line: 1, character: 0 },
-            end: { line: 1, character: 31 },
+            end: { line: 1, character: 30 },
           },
         },
       },