Optimize generated CSS output (#14873)

This PR improves the generated CSS by running it through Lightning CSS
twice.Right now Lightning CSS merges adjacent at-rules and at the end
flattens the nesting. This means that after the nesting is flattened,
the at-rules that are adjacent and could be merged together will not be
merged.

This PR improves our output by running Lightning CSS twice on the
generated CSS which will make sure to merge adjacent at-rules after the
nesting is flattened.

Note: in the diff output you'll notice that some properties are
duplicated. These need some fixes in Lightning CSS itself but they don't
break anything for us right now.

Related PR in Lightning CSS for the double `-webkit-backdrop-filter` can
be found here: parcel-bundler/lightningcss#850

---------

Co-authored-by: Philipp Spiess <[email protected]>

Author: RobinMalfait

CHANGELOG.md

@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure instances of the same variant with different values are always sorted deterministically (e.g. `data-focus:flex` and `data-active:flex`) ([#14835](https://github.com/tailwindlabs/tailwindcss/pull/14835))
 - Ensure `--inset-ring=*` and `--inset-shadow-*` variables are ignored by `inset-*` utilities ([#14855](https://github.com/tailwindlabs/tailwindcss/pull/14855))
 - Ensure `url(…)` containing special characters such as `;` or `{}` end up in one declaration ([#14879](https://github.com/tailwindlabs/tailwindcss/pull/14879))
+- Ensure adjacent rules are merged together after handling nesting when generating optimized CSS ([#14873](https://github.com/tailwindlabs/tailwindcss/pull/14873))
 - _Upgrade (experimental)_: Install `@tailwindcss/postcss` next to `tailwindcss` ([#14830](https://github.com/tailwindlabs/tailwindcss/pull/14830))
 - _Upgrade (experimental)_: Remove whitespace around `,` separator when print arbitrary values ([#14838](https://github.com/tailwindlabs/tailwindcss/pull/14838))
 

packages/@tailwindcss-cli/src/commands/build/index.ts

@@ -410,22 +410,28 @@ function optimizeCss(
   input: string,
   { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
 ) {
-  return transform({
-    filename: file,
-    code: Buffer.from(input),
-    minify,
-    sourceMap: false,
-    drafts: {
-      customMedia: true,
-    },
-    nonStandard: {
-      deepSelectorCombinator: true,
-    },
-    include: Features.Nesting,
-    exclude: Features.LogicalProperties,
-    targets: {
-      safari: (16 << 16) | (4 << 8),
-    },
-    errorRecovery: true,
-  }).code.toString()
+  function optimize(code: Buffer | Uint8Array) {
+    return transform({
+      filename: file,
+      code,
+      minify,
+      sourceMap: false,
+      drafts: {
+        customMedia: true,
+      },
+      nonStandard: {
+        deepSelectorCombinator: true,
+      },
+      include: Features.Nesting,
+      exclude: Features.LogicalProperties,
+      targets: {
+        safari: (16 << 16) | (4 << 8),
+      },
+      errorRecovery: true,
+    }).code
+  }
+
+  // Running Lightning CSS twice to ensure that adjacent rules are merged after
+  // nesting is applied. This creates a more optimized output.
+  return optimize(optimize(Buffer.from(input))).toString()
 }

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

@@ -421,6 +421,7 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
     color: inherit;
     -webkit-text-decoration: inherit;
     -webkit-text-decoration: inherit;
+    -webkit-text-decoration: inherit;
     text-decoration: inherit;
   }
 

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

@@ -218,24 +218,30 @@ function optimizeCss(
   input: string,
   { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
 ) {
-  return transform({
-    filename: file,
-    code: Buffer.from(input),
-    minify,
-    sourceMap: false,
-    drafts: {
-      customMedia: true,
-    },
-    nonStandard: {
-      deepSelectorCombinator: true,
-    },
-    include: Features.Nesting,
-    exclude: Features.LogicalProperties,
-    targets: {
-      safari: (16 << 16) | (4 << 8),
-    },
-    errorRecovery: true,
-  }).code.toString()
+  function optimize(code: Buffer | Uint8Array) {
+    return transform({
+      filename: file,
+      code,
+      minify,
+      sourceMap: false,
+      drafts: {
+        customMedia: true,
+      },
+      nonStandard: {
+        deepSelectorCombinator: true,
+      },
+      include: Features.Nesting,
+      exclude: Features.LogicalProperties,
+      targets: {
+        safari: (16 << 16) | (4 << 8),
+      },
+      errorRecovery: true,
+    }).code
+  }
+
+  // Running Lightning CSS twice to ensure that adjacent rules are merged after
+  // nesting is applied. This creates a more optimized output.
+  return optimize(optimize(Buffer.from(input))).toString()
 }
 
 export default Object.assign(tailwindcss, { postcss: true }) as PluginCreator<PluginOptions>

packages/@tailwindcss-vite/src/index.ts

@@ -277,24 +277,30 @@ function optimizeCss(
   input: string,
   { file = 'input.css', minify = false }: { file?: string; minify?: boolean } = {},
 ) {
-  return transform({
-    filename: file,
-    code: Buffer.from(input),
-    minify,
-    sourceMap: false,
-    drafts: {
-      customMedia: true,
-    },
-    nonStandard: {
-      deepSelectorCombinator: true,
-    },
-    include: Features.Nesting,
-    exclude: Features.LogicalProperties,
-    targets: {
-      safari: (16 << 16) | (4 << 8),
-    },
-    errorRecovery: true,
-  }).code.toString()
+  function optimize(code: Buffer | Uint8Array) {
+    return transform({
+      filename: file,
+      code,
+      minify,
+      sourceMap: false,
+      drafts: {
+        customMedia: true,
+      },
+      nonStandard: {
+        deepSelectorCombinator: true,
+      },
+      include: Features.Nesting,
+      exclude: Features.LogicalProperties,
+      targets: {
+        safari: (16 << 16) | (4 << 8),
+      },
+      errorRecovery: true,
+    }).code
+  }
+
+  // Running Lightning CSS twice to ensure that adjacent rules are merged after
+  // nesting is applied. This creates a more optimized output.
+  return optimize(optimize(Buffer.from(input))).toString()
 }
 
 function idToPath(id: string) {

packages/tailwindcss/src/compat/plugin-api.test.ts

@@ -1592,11 +1592,7 @@ describe('addVariant', () => {
             .potato\\:flex:large-potato {
               display: flex;
             }
-          }
-        }
 
-        @media (width <= 400px) {
-          @supports (font: bold) {
             .potato\\:underline:large-potato {
               text-decoration-line: underline;
             }
@@ -1840,19 +1836,7 @@ describe('matchVariant', () => {
 
     expect(optimizeCss(compiled).trim()).toMatchInlineSnapshot(`
       "@layer utilities {
-        .alphabet-d\\:underline[data-order="1"] {
-          text-decoration-line: underline;
-        }
-
-        .alphabet-a\\:underline[data-order="2"] {
-          text-decoration-line: underline;
-        }
-
-        .alphabet-c\\:underline[data-order="3"] {
-          text-decoration-line: underline;
-        }
-
-        .alphabet-b\\:underline[data-order="4"] {
+        .alphabet-d\\:underline[data-order="1"], .alphabet-a\\:underline[data-order="2"], .alphabet-c\\:underline[data-order="3"], .alphabet-b\\:underline[data-order="4"] {
           text-decoration-line: underline;
         }
       }"
@@ -2059,9 +2043,7 @@ describe('matchVariant', () => {
               order: 3;
             }
           }
-        }
 
-        @media (width >= 100px) {
           @media (width <= 300px) {
             .testmin-\\[100px\\]\\:testmax-\\[300px\\]\\:order-4 {
               order: 4;
@@ -2116,11 +2098,7 @@ describe('matchVariant', () => {
                 text-decoration-line: underline;
               }
             }
-          }
-        }
 
-        @media (width >= 100px) {
-          @media (width <= 200px) {
             .testmin-\\[100px\\]\\:testmax-\\[200px\\]\\:focus\\:underline:focus {
               text-decoration-line: underline;
             }
@@ -2245,9 +2223,7 @@ describe('matchVariant', () => {
               text-decoration-line: underline;
             }
           }
-        }
 
-        @media (width <= 400px) {
           @media (width >= 200px) {
             .testmax-\\[400px\\]\\:testmin-\\[200px\\]\\:underline {
               text-decoration-line: underline;
@@ -2261,9 +2237,7 @@ describe('matchVariant', () => {
               text-decoration-line: underline;
             }
           }
-        }
 
-        @media (width <= 300px) {
           @media (width >= 200px) {
             .testmax-\\[300px\\]\\:testmin-\\[200px\\]\\:underline {
               text-decoration-line: underline;
@@ -2870,11 +2844,7 @@ describe('addUtilities()', () => {
 
     expect(optimizeCss(compiled.build(['form-input', 'lg:form-textarea'])).trim())
       .toMatchInlineSnapshot(`
-        ".form-input {
-          background-color: red;
-        }
-
-        .form-input::placeholder {
+        ".form-input, .form-input::placeholder {
           background-color: red;
         }
 
@@ -3610,9 +3580,7 @@ describe('matchUtilities()', () => {
             --foo: 12px;
             display: flex;
           }
-        }
 
-        @media (width >= 1024px) {
           .lg\\:foo-bar {
             --foo: bar;
             display: flex;