Refactor

Author: thecrypticace

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

@@ -18,6 +18,7 @@ import { Utils, URI } from 'vscode-uri'
 import { getLanguageModelCache } from './languageModelCache'
 import { Stylesheet } from 'vscode-css-languageservice'
 import dlv from 'dlv'
+import { rewriteCss } from './rewriting'
 
 export class CssServer {
   private documents: TextDocuments<TextDocument>
@@ -332,61 +333,8 @@ export class CssServer {
       }, validationDelayMs)
     }
 
-    function replace(delta = 0) {
-      return (_match: string, p1: string) => {
-        let lines = p1.split('\n')
-        if (lines.length > 1) {
-          return `@media(${MEDIA_MARKER})${'\n'.repeat(lines.length - 1)}${' '.repeat(
-            lines[lines.length - 1].length,
-          )}{`
-        }
-        return `@media(${MEDIA_MARKER})${' '.repeat(p1.length + delta)}{`
-      }
-    }
-    function replaceWithStyleRule(delta = 0) {
-      return (_match: string, p1: string) => {
-        let spaces = ' '.repeat(p1.length + delta)
-        return `.placeholder${spaces}{`
-      }
-    }
-
     function createVirtualCssDocument(textDocument: TextDocument): TextDocument {
-      let content = textDocument
-        .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(/@utility(\s+[^{]+){/g, replaceWithStyleRule())
-        .replace(/@custom-variant(\s+[^;{]+);/g, (match: string) => {
-          let spaces = ' '.repeat(match.length - 11)
-          return `@media (${MEDIA_MARKER})${spaces}{}`
-        })
-        .replace(/@custom-variant(\s+[^{]+){/g, replaceWithStyleRule())
-        .replace(/@variant(\s+[^{]+){/g, replaceWithStyleRule())
-        .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, 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, '_')
+      let content = rewriteCss(textDocument.getText())
 
       return TextDocument.create(
         textDocument.uri,

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

@@ -0,0 +1,71 @@
+const MEDIA_MARKER = '℘'
+
+function replaceWithAtRule(delta = 0) {
+  return (_match: string, p1: string) => {
+    let lines = p1.split('\n')
+    if (lines.length > 1) {
+      return `@media(${MEDIA_MARKER})${'\n'.repeat(lines.length - 1)}${' '.repeat(
+        lines[lines.length - 1].length,
+      )}{`
+    }
+
+    return `@media(${MEDIA_MARKER})${' '.repeat(p1.length + delta)}{`
+  }
+}
+
+function replaceWithStyleRule(delta = 0) {
+  return (_match: string, p1: string) => {
+    let spaces = ' '.repeat(p1.length + delta)
+    return `.placeholder${spaces}{`
+  }
+}
+
+/**
+ * Rewrites the given CSS to be more compatible with the CSS language service
+ *
+ * The VSCode CSS language service doesn't understand our custom at-rules, nor
+ * our custom functions and minor syntax tweaks. This means it will show syntax
+ * 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())
+  css = css.replace(/@utility(\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, 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(
+    /@media(\s+screen\s*\([^)]+\))/g,
+    (_match, screen) => `@media (${MEDIA_MARKER})${' '.repeat(screen.length - 4)}`,
+  )
+
+  css = css.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}`
+    },
+  )
+
+  css = css.replace(/(?<=\b(?:theme|config)\([^)]*)[.[\]]/g, '_')
+
+  return css
+}