From ce254c77bdc53c1682042632d7658da72b3ed3b7 Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Wed, 4 Feb 2026 17:11:58 +0200
Subject: [PATCH 1/4] feat: sort media queries option

allows opting in to media query sorting and merging, disabled by default
---
 package-lock.json     |  26 +++++++++++
 package.json          |   1 +
 src/posthtml/index.js |   5 ++-
 test/postcss.test.js  | 101 ++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 132 insertions(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index 4f8afe57..56f3216e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "postcss-css-variables": "^0.19.0",
         "postcss-import": "^16.1.0",
         "postcss-safe-parser": "^7.0.0",
+        "postcss-sort-media-queries": "^5.2.0",
         "posthtml": "^0.16.6",
         "posthtml-attrs-parser": "^1.1.1",
         "posthtml-base-url": "^3.1.8",
@@ -346,6 +347,7 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
+      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -4941,6 +4943,21 @@
         "node": ">=4"
       }
     },
+    "node_modules/postcss-sort-media-queries": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-sort-media-queries/-/postcss-sort-media-queries-5.2.0.tgz",
+      "integrity": "sha512-AZ5fDMLD8SldlAYlvi8NIqo0+Z8xnXU2ia0jxmuhxAU+Lqt9K+AlmLNJ/zWEnE9x+Zx3qL3+1K20ATgNOr3fAA==",
+      "license": "MIT",
+      "dependencies": {
+        "sort-css-media-queries": "2.2.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.23"
+      }
+    },
     "node_modules/postcss-value-parser": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
@@ -5973,6 +5990,15 @@
         "node": "*"
       }
     },
+    "node_modules/sort-css-media-queries": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/sort-css-media-queries/-/sort-css-media-queries-2.2.0.tgz",
+      "integrity": "sha512-0xtkGhWCC9MGt/EzgnvbbbKhqWjl1+/rncmhTh5qCpbYguXh6S/qwePfv/JQ8jePXXmqingylxoC49pCkSPIbA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6.3.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
diff --git a/package.json b/package.json
index 5f4450c9..65ebe087 100644
--- a/package.json
+++ b/package.json
@@ -74,6 +74,7 @@
     "postcss-css-variables": "^0.19.0",
     "postcss-import": "^16.1.0",
     "postcss-safe-parser": "^7.0.0",
+    "postcss-sort-media-queries": "^5.2.0",
     "posthtml": "^0.16.6",
     "posthtml-attrs-parser": "^1.1.1",
     "posthtml-base-url": "^3.1.8",
diff --git a/src/posthtml/index.js b/src/posthtml/index.js
index b9a4a0f3..41ac7291 100644
--- a/src/posthtml/index.js
+++ b/src/posthtml/index.js
@@ -17,6 +17,7 @@ import postcssCalc from 'postcss-calc'
 import postcssImport from 'postcss-import'
 import cssVariables from 'postcss-css-variables'
 import postcssSafeParser from 'postcss-safe-parser'
+import postcssSortMediaQueries from 'postcss-sort-media-queries'
 import postcssColorFunctionalNotation from 'postcss-color-functional-notation'
 
 import defaultComponentsConfig from './defaultComponentsConfig.js'
@@ -27,8 +28,9 @@ export async function process(html = '', config = {}) {
    * will apply to all `<style>` tags in the HTML.
    */
   const resolveCSSProps = get(config, 'css.resolveProps')
+  const sortMediaQueries = get(config, 'css.sortMediaQueries')
   const resolveCalc = get(config, 'css.resolveCalc') !== false
-    ? get(config, 'css.resolveCalc', { precision: 2 }) // it's true by default, use default precision 2
+    ? get(config, 'css.resolveCalc', { precision: 2 }) // enabled by default, use default precision 2
     : false
 
   const postcssPlugin = posthtmlPostcss(
@@ -38,6 +40,7 @@ export async function process(html = '', config = {}) {
       resolveCSSProps !== false && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
       postcssColorFunctionalNotation(),
+      sortMediaQueries !== false && postcssSortMediaQueries(sortMediaQueries),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(
diff --git a/test/postcss.test.js b/test/postcss.test.js
index 69d03e7d..aa1f4316 100644
--- a/test/postcss.test.js
+++ b/test/postcss.test.js
@@ -110,4 +110,105 @@ describe.concurrent('PostCSS', () => {
           )
       })
   })
+
+  test('css.sortMediaQueries', async () => {
+    const html = `
+      <style>
+        @tailwind components;
+        @tailwind utilities;
+
+        .custom {
+          @apply sm:w-[100px];
+        }
+      </style>
+    <div class="custom sm:flex hover:invisible"></div>
+    `
+
+    /**
+     * When using `@apply` and the source content has pseudos like `hover:`,
+     * the utilities generated with `@apply` will be separated in their own
+     * media query blocks.
+     *
+     * This does not happen if the source content does not use things like `hover:` 🤷‍♂️
+     */
+    posthtml(html, {
+      css: {
+        tailwind: {
+          content: [{ raw: html }],
+          theme: {
+            screens: {
+              sm: { max: '600px' },
+              xs: { max: '430px' },
+            },
+          },
+        }
+      }
+    })
+      .then(({ html }) => {
+        expect(cleanString(html))
+          .toBe(
+            cleanString(`
+            <style>
+              @media (max-width: 600px) {
+                .custom {
+                  width: 100px
+                }
+              }
+              .hover\\:invisible:hover {
+                visibility: hidden
+              }
+              @media (max-width: 600px) {
+                .sm\\:flex {
+                  display: flex
+                }
+                .sm\\:w-\\[100px\\] {
+                  width: 100px
+                }
+              }
+            </style>
+            <div class="custom sm:flex hover:invisible"></div>`
+            )
+          )
+      })
+
+    // plugin enabled
+    posthtml(html, {
+      css: {
+        sortMediaQueries: true,
+        tailwind: {
+          content: [{ raw: html }],
+          theme: {
+            screens: {
+              sm: { max: '600px' },
+              xs: { max: '430px' },
+            },
+          },
+        }
+      }
+    })
+      .then(({ html }) => {
+        expect(cleanString(html))
+          .toBe(
+            cleanString(`
+            <style>
+            .hover\\:invisible:hover {
+              visibility: hidden
+              }
+              @media (max-width: 600px) {
+                .custom {
+                  width: 100px
+                }
+                .sm\\:flex {
+                  display: flex
+                }
+                .sm\\:w-\\[100px\\] {
+                  width: 100px
+                }
+              }
+            </style>
+            <div class="custom sm:flex hover:invisible"></div>`
+            )
+          )
+      })
+  })
 })

From db27ee603a8ea4652e723526ad030dcbb036c76b Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Wed, 4 Feb 2026 17:29:18 +0200
Subject: [PATCH 2/4] fix: postcss plugin defaults

---
 src/posthtml/index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/posthtml/index.js b/src/posthtml/index.js
index 41ac7291..47e838d9 100644
--- a/src/posthtml/index.js
+++ b/src/posthtml/index.js
@@ -27,7 +27,7 @@ export async function process(html = '', config = {}) {
    * Configure PostCSS pipeline. Plugins defined and added here
    * will apply to all `<style>` tags in the HTML.
    */
-  const resolveCSSProps = get(config, 'css.resolveProps')
+  const resolveCSSProps = get(config, 'css.resolveProps', true)
   const sortMediaQueries = get(config, 'css.sortMediaQueries')
   const resolveCalc = get(config, 'css.resolveCalc') !== false
     ? get(config, 'css.resolveCalc', { precision: 2 }) // enabled by default, use default precision 2
@@ -37,10 +37,10 @@ export async function process(html = '', config = {}) {
     [
       postcssImport(),
       tailwindcss(get(config, 'css.tailwind', {})),
-      resolveCSSProps !== false && cssVariables(resolveCSSProps),
+      resolveCSSProps && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
       postcssColorFunctionalNotation(),
-      sortMediaQueries !== false && postcssSortMediaQueries(sortMediaQueries),
+      sortMediaQueries && postcssSortMediaQueries(sortMediaQueries),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(

From a103f0ebb2acc56b1a825006b95136cbdea30e3e Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Thu, 12 Feb 2026 19:04:30 +0200
Subject: [PATCH 3/4] refactor: rename `sortMediaQueries` option to `media`

---
 package-lock.json     | 11 -----------
 src/posthtml/index.js |  4 ++--
 test/postcss.test.js  |  4 ++--
 3 files changed, 4 insertions(+), 15 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 56f3216e..f1028782 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -347,7 +347,6 @@
     },
     "node_modules/@clack/prompts/node_modules/is-unicode-supported": {
       "version": "1.3.0",
-      "extraneous": true,
       "inBundle": true,
       "license": "MIT",
       "engines": {
@@ -451,7 +450,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -474,7 +472,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18"
       }
@@ -2025,7 +2022,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -3832,7 +3828,6 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -4688,7 +4683,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -4969,7 +4963,6 @@
       "resolved": "https://registry.npmjs.org/posthtml/-/posthtml-0.16.7.tgz",
       "integrity": "sha512-7Hc+IvlQ7hlaIfQFZnxlRl0jnpWq2qwibORBhQYIb0QbNtuicc5ZxvKkVT71HJ4Py1wSZ/3VR1r8LfkCtoCzhw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "posthtml-parser": "^0.11.0",
         "posthtml-render": "^3.0.0"
@@ -6664,7 +6657,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6853,7 +6845,6 @@
       "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -6970,7 +6961,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -6984,7 +6974,6 @@
       "integrity": "sha512-LUCP5ev3GURDysTWiP47wRRUpLKMOfPh+yKTx3kVIEiu5KOMeqzpnYNsKyOoVrULivR8tLcks4+lga33Whn90A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/chai": "^5.2.2",
         "@vitest/expect": "3.2.4",
diff --git a/src/posthtml/index.js b/src/posthtml/index.js
index 47e838d9..37154225 100644
--- a/src/posthtml/index.js
+++ b/src/posthtml/index.js
@@ -28,7 +28,7 @@ export async function process(html = '', config = {}) {
    * will apply to all `<style>` tags in the HTML.
    */
   const resolveCSSProps = get(config, 'css.resolveProps', true)
-  const sortMediaQueries = get(config, 'css.sortMediaQueries')
+  const mediaConfig = get(config, 'css.media')
   const resolveCalc = get(config, 'css.resolveCalc') !== false
     ? get(config, 'css.resolveCalc', { precision: 2 }) // enabled by default, use default precision 2
     : false
@@ -40,7 +40,7 @@ export async function process(html = '', config = {}) {
       resolveCSSProps && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
       postcssColorFunctionalNotation(),
-      sortMediaQueries && postcssSortMediaQueries(sortMediaQueries),
+      mediaConfig && postcssSortMediaQueries(mediaConfig === true ? {} : mediaConfig),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(
diff --git a/test/postcss.test.js b/test/postcss.test.js
index aa1f4316..fabf0027 100644
--- a/test/postcss.test.js
+++ b/test/postcss.test.js
@@ -111,7 +111,7 @@ describe.concurrent('PostCSS', () => {
       })
   })
 
-  test('css.sortMediaQueries', async () => {
+  test('css.media', async () => {
     const html = `
       <style>
         @tailwind components;
@@ -174,7 +174,7 @@ describe.concurrent('PostCSS', () => {
     // plugin enabled
     posthtml(html, {
       css: {
-        sortMediaQueries: true,
+        media: true,
         tailwind: {
           content: [{ raw: html }],
           theme: {

From c760f2d603ecf3f6b4649ad1ae9d2d2aa7d3ea2c Mon Sep 17 00:00:00 2001
From: Cosmin Popovici <hellocosmin@gmail.com>
Date: Thu, 12 Feb 2026 19:05:48 +0200
Subject: [PATCH 4/4] test: update postcss media merge test

---
 test/postcss.test.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/test/postcss.test.js b/test/postcss.test.js
index fabf0027..2ac243ae 100644
--- a/test/postcss.test.js
+++ b/test/postcss.test.js
@@ -174,7 +174,9 @@ describe.concurrent('PostCSS', () => {
     // plugin enabled
     posthtml(html, {
       css: {
-        media: true,
+        media: {
+          merge: true,
+        },
         tailwind: {
           content: [{ raw: html }],
           theme: {