Use prettier to format CSS

Author: thecrypticace

package-lock.json

@@ -66,7 +66,7 @@
     "postcss": "8.4.31",
     "postcss-load-config": "3.0.1",
     "postcss-selector-parser": "6.0.2",
-    "prettier": "2.3.0",
+    "prettier": "^2.8.8",
     "resolve": "1.20.0",
     "rimraf": "3.0.2",
     "stack-trace": "0.0.10",

packages/tailwindcss-language-server/package.json

@@ -2,6 +2,7 @@ import type { DesignSystem } from 'tailwindcss-language-service/src/util/v4'
 
 import postcss from 'postcss'
 import postcssImport from 'postcss-import'
+import { format } from 'prettier'
 
 const resolveImports = postcss([postcssImport()])
 
@@ -23,7 +24,7 @@ export async function isMaybeV4(css: string): Promise<boolean> {
 export async function loadDesignSystem(
   tailwindcss: any,
   filepath: string,
-  css: string
+  css: string,
 ): Promise<DesignSystem | null> {
   // This isn't a v4 project
   if (!tailwindcss.__unstable__loadDesignSystem) return null
@@ -48,11 +49,31 @@ export async function loadDesignSystem(
     },
 
     compile(classes: string[]): postcss.Root {
-      return postcss.parse(design.candidatesToCss(classes))
+      let css = design.candidatesToCss(classes).join('\n')
+
+      // Downlevel syntax
+      // TODO: Either don't downlevel nesting or make `recordClassDetails` more robust
+      // try {
+      //   css = tailwindcss.optimizeCss(css)
+      // } catch {}
+
+      // Reformat with Prettier
+      try {
+        css = format(css, {
+          parser: 'css',
+          singleQuote: true,
+          trailingComma: 'all',
+          filepath: 'input.css',
+        }).trim()
+      } catch {}
+
+      return postcss.parse(css)
     },
 
     toCss(nodes: postcss.Root | postcss.Node[]): string {
-      return Array.isArray(nodes) ? postcss.root({ nodes }).toString() : nodes.toString()
+      return Array.isArray(nodes)
+        ? postcss.root({ nodes }).toString().trim()
+        : nodes.toString().trim()
     },
   })
 

packages/tailwindcss-language-server/src/util/v4/design-system.ts

@@ -439,10 +439,10 @@ withFixture('v4/basic', (c) => {
 
     expect(resolved).toEqual({
       ...item,
-      detail: 'text-transform:uppercase',
+      detail: 'text-transform: uppercase',
       documentation: {
         kind: 'markdown',
-        value: '```css\n.uppercase{text-transform:uppercase;}\n```',
+        value: '```css\n.uppercase {\n  text-transform: uppercase;\n}\n```',
       },
     })
   })

packages/tailwindcss-language-server/tests/completions/completions.test.js

@@ -111,7 +111,7 @@ withFixture('v4/basic', (c) => {
   testHover('hover', {
     text: '<div class="bg-red-500">',
     position: { line: 0, character: 13 },
-    expected: '.bg-red-500{background-color:#ef4444;}',
+    expected: '.bg-red-500 {\n  background-color: #ef4444;\n}',
     expectedRange: {
       start: { line: 0, character: 12 },
       end: { line: 0, character: 22 },
@@ -121,7 +121,7 @@ withFixture('v4/basic', (c) => {
   testHover('arbitrary value', {
     text: '<div class="p-[3px]">',
     position: { line: 0, character: 13 },
-    expected: '.p-\\[3px\\]{padding:3px;}',
+    expected: '.p-\\[3px\\] {\n  padding: 3px;\n}',
     expectedRange: {
       start: { line: 0, character: 12 },
       end: { line: 0, character: 19 },
@@ -142,7 +142,7 @@ withFixture('v4/basic', (c) => {
   testHover('arbitrary property', {
     text: '<div class="[text-wrap:balance]">',
     position: { line: 0, character: 13 },
-    expected: '.\\[text-wrap\\:balance\\]{text-wrap:balance;}',
+    expected: '.\\[text-wrap\\:balance\\] {\n  text-wrap: balance;\n}',
     expectedRange: {
       start: { line: 0, character: 12 },
       end: { line: 0, character: 31 },