feat: sort media queries option

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",

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'
@@ -26,18 +27,20 @@ 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 mediaConfig = get(config, 'css.media')
   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(
     [
       postcssImport(),
       tailwindcss(get(config, 'css.tailwind', {})),
-      resolveCSSProps !== false && cssVariables(resolveCSSProps),
+      resolveCSSProps && cssVariables(resolveCSSProps),
       resolveCalc !== false && postcssCalc(resolveCalc),
       postcssColorFunctionalNotation(),
+      mediaConfig && postcssSortMediaQueries(mediaConfig === true ? {} : mediaConfig),
       ...get(config, 'postcss.plugins', []),
     ],
     merge(

test/postcss.test.js

@@ -110,4 +110,107 @@ describe.concurrent('PostCSS', () => {
           )
       })
   })
+
+  test('css.media', 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: {
+        media: {
+          merge: 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>`
+            )
+          )
+      })
+  })
 })