Optimize generated CSS output

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;