Optimize AST before printing for IntelliSense (#15347)

We changed how AST printing worked recently but forgot to update this.
Which causes us to print properties with a value of `undefined` in
Tailwind Play, Tailwind CSS IntelliSense, and our Language Server
(oops).

This PR fixes this by optimizing the AST before printing (which is what
toCss did previously)

Author: thecrypticace

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix dependency related warnings when using `@tailwindcss/postcss` on Windows ([#15321](https://github.com/tailwindlabs/tailwindcss/pull/15321))
 - Skip creating a compiler for CSS files that should not be processed ([#15340](https://github.com/tailwindlabs/tailwindcss/pull/15340))
 - Fix missing `shadow-none` suggestion in IntelliSense ([#15342](https://github.com/tailwindlabs/tailwindcss/pull/15342))
+- Optimize AST before printing for IntelliSense ([#15347](https://github.com/tailwindlabs/tailwindcss/pull/15347))
 
 ## [4.0.0-beta.6] - 2024-12-06
 

packages/tailwindcss/src/design-system.ts

@@ -1,4 +1,4 @@
-import { toCss } from './ast'
+import { optimizeAst, toCss } from './ast'
 import { parseCandidate, parseVariant, type Candidate, type Variant } from './candidate'
 import { compileAstNodes, compileCandidates } from './compile'
 import { getClassList, getVariants, type ClassEntry, type VariantEntry } from './intellisense'
@@ -60,11 +60,13 @@ export function buildDesignSystem(theme: Theme): DesignSystem {
         let wasInvalid = false
 
         let { astNodes } = compileCandidates([className], this, {
-          onInvalidCandidate(candidate) {
+          onInvalidCandidate() {
             wasInvalid = true
           },
         })
 
+        astNodes = optimizeAst(astNodes)
+
         if (astNodes.length === 0 || wasInvalid) {
           result.push(null)
         } else {

packages/tailwindcss/src/intellisense.test.ts

@@ -118,21 +118,26 @@ test('Can produce CSS per candidate using `candidatesToCss`', () => {
   let design = loadDesignSystem()
   design.invalidCandidates = new Set(['bg-[#fff]'])
 
-  expect(design.candidatesToCss(['underline', 'i-dont-exist', 'bg-[#fff]', 'bg-[#000]']))
+  expect(design.candidatesToCss(['underline', 'i-dont-exist', 'bg-[#fff]', 'bg-[#000]', 'text-xs']))
     .toMatchInlineSnapshot(`
-    [
-      ".underline {
-      text-decoration-line: underline;
-    }
-    ",
-      null,
-      null,
-      ".bg-\\[\\#000\\] {
-      background-color: #000;
-    }
-    ",
-    ]
-  `)
+      [
+        ".underline {
+        text-decoration-line: underline;
+      }
+      ",
+        null,
+        null,
+        ".bg-\\[\\#000\\] {
+        background-color: #000;
+      }
+      ",
+        ".text-xs {
+        font-size: var(--text-xs);
+        line-height: var(--tw-leading, var(--text-xs--line-height));
+      }
+      ",
+      ]
+    `)
 })
 
 test('Utilities do not show wrapping selector in intellisense', async () => {