Improve snapshot tests (#20013)

This PR improves the snapshot tests. At first, this looks like a very
silly PR, but I swear I have legit reasons for these changes:

First, there are a few places where we use `.toMatchInlineSnapshot()`
for tests where we expect that nothing is being generated. This is fine,
but the issue is that this means that if you're not careful, and if we
have a bug, then these snapshots could start producing something.
Updating these snapshots is _too_ easy. So instead, we convert them to
an explicit `.toEqual('')`

Next, I introduced a `pretty` helper function which is used behind the
scenes in the `compileCss(…)`, `run(…)`, and `optimizeCss(…)` test
helpers. It's very silly and simple, it either returns `''` when the
trimmed input is empty, or it will wrap the result in `\n…\n`. The
reason for this is because of how (inline) snapshots works in Vitest. A
snapshot result will be in double quotes, and inside backticks:
```ts
expect(result.css.trim()).toMatchInlineSnapshot(`
  "@layer utilities {
    .foo {
      color: #000;
    }

    .bar {
      color: red;
    }
  }"
`)
```
This CSS now starts with `"` and ends with `"`. While that is fine, it
starts to get annoying when we have merge conflicts when CSS changes
(this is what triggered me to make this PR because I ran into this a
dozen times already). Because the first and last CSS line also contain a
`"` that you have to keep into account.

Instead we now use `\n` around the output, which makes the tests look
like this:
```ts
expect(pretty(result.css)).toMatchInlineSnapshot(`
  "
  @layer utilities {
    .foo {
      color: #000;
    }

    .bar {
      color: red;
    }
  }
  "
`)
```

In a perfect world, I wish we could use something like:
```css
expect(pretty(result.css)).toMatchInlineSnapshot(css`
  @layer utilities {
    .foo {
      color: #000;
    }

    .bar {
      color: red;
    }
  }
`)
```

That way you are only dealing with CSS, nothing else. Most editors will
show syntax highlighting, and even prettier will do formatting on the
CSS to keep everything consistent.

Unfortunately this also causes issues because when prettier formats
this, then the input/output will not always match. We can solve that by
parsing both sides and compare the ASTs but that would make things
slower.

The biggest issue is that Vitest doesn't support this. You can use
custom serializers
https://vitest.dev/guide/snapshot.html#custom-snapshot-matchers and
domains https://vitest.dev/guide/snapshot.html#custom-snapshot-domain
but this has an annoying issue around escaping values.

When you use `css` it's typically implemented as `const css =
String.raw`, which means that you can write actual CSS instead of JS:
```ts
let input = css`
  .\[color:red\] {
    color: red;
  }
`
```

But vitest would double scape the `\`, which would make the snapshot
test fail:
```ts
let input = css`
  .\\[color:red\\] {
    color: red;
  }
`
```

**Edit**: It is possible with a custom snapshot environment! But this
still introduces some levels of indirection. We are also not really
testing the same thing anymore. Prettier will be formatting the CSS, we
rely on our own CSS parser / printer, which is fine but subtle bugs
could maybe be invisible or maybe it unlocks some hidden bugs, who
knows. Funnily enough, running tests with this new matcher also goes
from `23.60s` to `22.88s` (just 1 run comparison).
<img width="1227" height="897" alt="image"
src="https://github.com/user-attachments/assets/698a0c67-a1fc-46e3-ba5a-60e5873b32df"
/>

Long story short, simple `\n` and `\n` boundaries it is!

## Test plan

- Everything still works as expected.
- There are visual changes in tests, but no actual source code was
updated either so there can not be an accidental diff

Author: RobinMalfait

packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap

@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-font-weight: initial;
@@ -304,5 +305,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
 @property --tw-font-weight {
   syntax: "*";
   inherits: false
-}"
+}
+"
 `;

packages/@tailwindcss-postcss/src/index.test.ts

@@ -4,6 +4,7 @@ import { tmpdir } from 'node:os'
 import path from 'path'
 import postcss from 'postcss'
 import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'
+import { pretty } from '../../tailwindcss/src/test-utils/run'
 import tailwindcss from './index'
 
 // We give this file path to PostCSS for processing.
@@ -26,7 +27,7 @@ test("`@import 'tailwindcss'` is replaced with the generated CSS", async () => {
 
   let result = await processor.process(`@import 'tailwindcss'`, { from: inputCssFilePath() })
 
-  expect(result.css.trim()).toMatchSnapshot()
+  expect(pretty(result.css)).toMatchSnapshot()
 
   // Check for dependency messages
   expect(result.messages).toContainEqual({
@@ -72,16 +73,18 @@ test('output is optimized by Lightning CSS', async () => {
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    "@layer utilities {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    @layer utilities {
       .foo {
         color: #000;
       }
 
       .bar {
         color: red;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -100,10 +103,12 @@ test('@apply can be used without emitting the theme in the CSS file', async () =
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".foo {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .foo {
       color: var(--color-red-500, oklch(63.7% .237 25.331));
-    }"
+    }
+    "
   `)
 })
 
@@ -164,8 +169,9 @@ describe('plugins', () => {
       { from: inputCssFilePath() },
     )
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      ".underline {
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      .underline {
         text-decoration-line: underline;
       }
 
@@ -177,7 +183,8 @@ describe('plugins', () => {
 
       .hocus\\:underline:focus, .hocus\\:underline:hover {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
@@ -194,8 +201,9 @@ describe('plugins', () => {
       { from: `${__dirname}/fixtures/another-project/input.css` },
     )
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      ".underline {
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      .underline {
         text-decoration-line: underline;
       }
 
@@ -207,7 +215,8 @@ describe('plugins', () => {
 
       .hocus\\:underline:focus, .hocus\\:underline:hover {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 
@@ -224,8 +233,9 @@ describe('plugins', () => {
       { from: inputCssFilePath() },
     )
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      ".underline {
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      .underline {
         text-decoration-line: underline;
       }
 
@@ -237,7 +247,8 @@ describe('plugins', () => {
 
       .hocus\\:underline:focus, .hocus\\:underline:hover {
         text-decoration-line: underline;
-      }"
+      }
+      "
     `)
   })
 })
@@ -260,10 +271,12 @@ test('bail early when Tailwind is not used', async () => {
   // didn't use `@tailwind utilities` we didn't scan for utilities.
   expect(result.css).not.toContain('.underline {')
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".custom-css {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .custom-css {
       color: red;
-    }"
+    }
+    "
   `)
 })
 
@@ -285,12 +298,14 @@ test('handle CSS when only using a `@reference` (we should not bail early)', asy
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    "@media (min-width: 48rem) {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    @media (min-width: 48rem) {
       .foo {
         bar: baz;
       }
-    }"
+    }
+    "
   `)
 })
 
@@ -310,10 +325,12 @@ test('handle CSS when using a `@variant` using variants that do not rely on the
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".foo[data-is-hoverable] {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .foo[data-is-hoverable] {
       bar: baz;
-    }"
+    }
+    "
   `)
 })
 
@@ -348,23 +365,29 @@ test('runs `Once` plugins in the right order', async () => {
     { from: inputCssFilePath() },
   )
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".custom-css {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .custom-css {
       color: red;
-    }"
+    }
+    "
   `)
-  expect(before).toMatchInlineSnapshot(`
-    "@theme {
+  expect(pretty(before)).toMatchInlineSnapshot(`
+    "
+    @theme {
       --color-red-500: red;
     }
     .custom-css {
       color: theme(--color-red-500);
-    }"
+    }
+    "
   `)
-  expect(after).toMatchInlineSnapshot(`
-    ".custom-css {
+  expect(pretty(after)).toMatchInlineSnapshot(`
+    "
+    .custom-css {
       color: red;
-    }"
+    }
+    "
   `)
 })
 
@@ -438,10 +461,12 @@ test('does not register the input file as a dependency, even if it is passed in
 
   let result = await processor.process(`@tailwind utilities`, { from: './input.css' })
 
-  expect(result.css.trim()).toMatchInlineSnapshot(`
-    ".underline {
+  expect(pretty(result.css)).toMatchInlineSnapshot(`
+    "
+    .underline {
       text-decoration-line: underline;
-    }"
+    }
+    "
   `)
 
   // Check for dependency messages

packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.test.ts

@@ -4,6 +4,7 @@ import postcss from 'postcss'
 import atImport from 'postcss-import'
 import { describe, expect, test } from 'vitest'
 import fixRelativePathsPlugin from '.'
+import { pretty } from '../../../tailwindcss/src/test-utils/run'
 
 describe('fixRelativePathsPlugin', () => {
   test('rewrites @source and @plugin to be relative to the initial css file', async () => {
@@ -14,11 +15,13 @@ describe('fixRelativePathsPlugin', () => {
 
     let result = await processor.process(css, { from: cssPath })
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      "@source "../../example-project/src/**/*.ts";
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      @source "../../example-project/src/**/*.ts";
       @source "!../../example-project/src/**/*.ts";
       @plugin "../../example-project/src/plugin.js";
-      @plugin "../../example-project/src/what\\"s-this.js";"
+      @plugin "../../example-project/src/what\\"s-this.js";
+      "
     `)
   })
 
@@ -30,11 +33,13 @@ describe('fixRelativePathsPlugin', () => {
 
     let result = await processor.process(css, { from: cssPath })
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      "@plugin "/absolute/paths";
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      @plugin "/absolute/paths";
       @plugin "C:\\Program Files\\HAL 9000";
       @plugin "\\\\Media\\Pictures\\Worth\\1000 words";
-      @plugin "some-node-dep";"
+      @plugin "some-node-dep";
+      "
     `)
   })
 
@@ -46,13 +51,15 @@ describe('fixRelativePathsPlugin', () => {
 
     let result = await processor.process(css, { from: cssPath })
 
-    expect(result.css.trim()).toMatchInlineSnapshot(`
-      "@plugin './plugin-in-sibling.ts';
+    expect(pretty(result.css)).toMatchInlineSnapshot(`
+      "
+      @plugin './plugin-in-sibling.ts';
       @plugin '../plugin-in-sibling.ts';
       @plugin 'plugin-in-sibling';
       @plugin './plugin-in-root.ts';
       @plugin '../plugin-in-root.ts';
-      @plugin 'plugin-in-root';"
+      @plugin 'plugin-in-root';
+      "
     `)
   })
 })

packages/tailwindcss/src/__snapshots__/index.test.ts.snap

@@ -1,7 +1,8 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using the default theme 1`] = `
-"@layer properties {
+"
+@layer properties {
   @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
     *, :before, :after, ::backdrop {
       --tw-shadow: 0 0 #0000;
@@ -123,11 +124,13 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
   syntax: "*";
   inherits: false;
   initial-value: 0 0 #0000;
-}"
+}
+"
 `;
 
 exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
-"@layer theme {
+"
+@layer theme {
   :root, :host {
     --tw-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
     "Noto Color Emoji";
@@ -385,5 +388,6 @@ exports[`compiling CSS > prefix all CSS variables inside preflight 1`] = `
   }
 }
 
-@layer components, utilities;"
+@layer components, utilities;
+"
 `;