Account for dimension prefix in sorting

Author: brandonmcconnell

src/util/buildMediaQuery.js

@@ -1,22 +1,4 @@
-/**
- * @param {string} value
- * @returns {[string, string]}
- */
-export function splitVariantPrefix(value) {
-  if (typeof value !== 'string') return ['', value]
-  let parts = value.split(':')
-  return ['', ...parts].slice(-2)
-}
-
-/**
- * @param {string} value
- * @returns {[string, string]}
- */
-function splitDimensionPrefix(value) {
-  const [prefix, extractedValue] = splitVariantPrefix(value)
-  const dimension = prefix === 'h' ? 'height' : 'width'
-  return [dimension, extractedValue]
-}
+import { splitDimensionPrefix } from './splitDimensionPrefix'
 
 export default function buildMediaQuery(screens) {
   screens = Array.isArray(screens) ? screens : [screens]

src/util/normalizeScreens.js

@@ -1,3 +1,5 @@
+import { splitDimensionPrefix } from './splitDimensionPrefix'
+
 /**
  * @typedef {object} ScreenValue
  * @property {number|undefined} min
@@ -108,10 +110,10 @@ export function compareScreens(type, a, z) {
   if (a.not) [aMin, aMax] = [aMax, aMin]
   if (z.not) [zMin, zMax] = [zMax, zMin]
 
-  aMin = aMin === undefined ? aMin : parseFloat(aMin)
-  aMax = aMax === undefined ? aMax : parseFloat(aMax)
-  zMin = zMin === undefined ? zMin : parseFloat(zMin)
-  zMax = zMax === undefined ? zMax : parseFloat(zMax)
+  aMin = aMin === undefined ? aMin : parseFloat(splitDimensionPrefix(aMin)[1])
+  aMax = aMax === undefined ? aMax : parseFloat(splitDimensionPrefix(aMax)[1])
+  zMin = zMin === undefined ? zMin : parseFloat(splitDimensionPrefix(zMin)[1])
+  zMax = zMax === undefined ? zMax : parseFloat(splitDimensionPrefix(zMax)[1])
 
   let [aValue, zValue] = type === 'min' ? [aMin, zMin] : [zMax, aMax]
 

src/util/splitDimensionPrefix.js

@@ -0,0 +1,11 @@
+import { splitVariantPrefix } from './splitVariantPrefix'
+
+/**
+ * @param {string} value
+ * @returns {[string, string]}
+ */
+export function splitDimensionPrefix(value) {
+  const [prefix, extractedValue] = splitVariantPrefix(value)
+  const dimension = prefix === 'h' ? 'height' : 'width'
+  return [dimension, extractedValue]
+}

src/util/splitVariantPrefix.js

@@ -0,0 +1,9 @@
+/**
+ * @param {string} value
+ * @returns {[string, string]}
+ */
+export function splitVariantPrefix(value) {
+  if (typeof value !== 'string') return ['', value]
+  let parts = value.split(':')
+  return ['', ...parts].slice(-2)
+}

tests/min-max-screen-variants.test.js

@@ -321,7 +321,7 @@ crosscheck(() => {
     })
   })
 
-  it('supports min-* and max-* variants being used together with or without arbitrary dimension prefixes', () => {
+  it('supports min-* and max-* variants being chained together with or without arbitrary dimension prefixes', () => {
     let config = {
       content: [
         {
@@ -363,6 +363,48 @@ crosscheck(() => {
     })
   })
 
+  it('supports proper sorting of min-* and max-* variants with arbitrary dimension prefixes', () => {
+    let config = {
+      content: [
+        {
+          raw: html`
+            <div
+              class="min-[h:50px]:font-bold min-[h:200px]:font-bold min-[h:100px]:font-bold"
+            ></div>
+          `,
+        },
+      ],
+      corePlugins: { preflight: false },
+      theme: {
+        screens: defaultScreens,
+      },
+    }
+
+    let input = css`
+      @tailwind utilities;
+    `
+
+    return run(input, config).then((result) => {
+      expect(result.css).toMatchFormattedCss(css`
+        @media (min-height: 50px) {
+          .min-\[h\:50px\]\:font-bold {
+            font-weight: 700;
+          }
+        }
+        @media (min-height: 100px) {
+          .min-\[h\:100px\]\:font-bold {
+            font-weight: 700;
+          }
+        }
+        @media (min-height: 200px) {
+          .min-\[h\:200px\]\:font-bold {
+            font-weight: 700;
+          }
+        }
+      `)
+    })
+  })
+
   it('warns when using min variants with complex screen configs', async () => {
     let config = {
       content: [