Skip to content

Commit 265b484

Browse files
Account for dimension prefix in sorting
1 parent cf32d97 commit 265b484

File tree

5 files changed

+70
-24
lines changed

5 files changed

+70
-24
lines changed

src/util/buildMediaQuery.js

Lines changed: 1 addition & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,4 @@
1-
/**
2-
* @param {string} value
3-
* @returns {[string, string]}
4-
*/
5-
export function splitVariantPrefix(value) {
6-
if (typeof value !== 'string') return ['', value]
7-
let parts = value.split(':')
8-
return ['', ...parts].slice(-2)
9-
}
10-
11-
/**
12-
* @param {string} value
13-
* @returns {[string, string]}
14-
*/
15-
function splitDimensionPrefix(value) {
16-
const [prefix, extractedValue] = splitVariantPrefix(value)
17-
const dimension = prefix === 'h' ? 'height' : 'width'
18-
return [dimension, extractedValue]
19-
}
1+
import { splitDimensionPrefix } from './splitDimensionPrefix'
202

213
export default function buildMediaQuery(screens) {
224
screens = Array.isArray(screens) ? screens : [screens]

src/util/normalizeScreens.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { splitDimensionPrefix } from './splitDimensionPrefix'
2+
13
/**
24
* @typedef {object} ScreenValue
35
* @property {number|undefined} min
@@ -108,10 +110,10 @@ export function compareScreens(type, a, z) {
108110
if (a.not) [aMin, aMax] = [aMax, aMin]
109111
if (z.not) [zMin, zMax] = [zMax, zMin]
110112

111-
aMin = aMin === undefined ? aMin : parseFloat(aMin)
112-
aMax = aMax === undefined ? aMax : parseFloat(aMax)
113-
zMin = zMin === undefined ? zMin : parseFloat(zMin)
114-
zMax = zMax === undefined ? zMax : parseFloat(zMax)
113+
aMin = aMin === undefined ? aMin : parseFloat(splitDimensionPrefix(aMin)[1])
114+
aMax = aMax === undefined ? aMax : parseFloat(splitDimensionPrefix(aMax)[1])
115+
zMin = zMin === undefined ? zMin : parseFloat(splitDimensionPrefix(zMin)[1])
116+
zMax = zMax === undefined ? zMax : parseFloat(splitDimensionPrefix(zMax)[1])
115117

116118
let [aValue, zValue] = type === 'min' ? [aMin, zMin] : [zMax, aMax]
117119

src/util/splitDimensionPrefix.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { splitVariantPrefix } from './splitVariantPrefix'
2+
3+
/**
4+
* @param {string} value
5+
* @returns {[string, string]}
6+
*/
7+
export function splitDimensionPrefix(value) {
8+
const [prefix, extractedValue] = splitVariantPrefix(value)
9+
const dimension = prefix === 'h' ? 'height' : 'width'
10+
return [dimension, extractedValue]
11+
}

src/util/splitVariantPrefix.js

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/**
2+
* @param {string} value
3+
* @returns {[string, string]}
4+
*/
5+
export function splitVariantPrefix(value) {
6+
if (typeof value !== 'string') return ['', value]
7+
let parts = value.split(':')
8+
return ['', ...parts].slice(-2)
9+
}

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

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -321,7 +321,7 @@ crosscheck(() => {
321321
})
322322
})
323323

324-
it('supports min-* and max-* variants being used together with or without arbitrary dimension prefixes', () => {
324+
it('supports min-* and max-* variants being chained together with or without arbitrary dimension prefixes', () => {
325325
let config = {
326326
content: [
327327
{
@@ -363,6 +363,48 @@ crosscheck(() => {
363363
})
364364
})
365365

366+
it('supports proper sorting of min-* and max-* variants with arbitrary dimension prefixes', () => {
367+
let config = {
368+
content: [
369+
{
370+
raw: html`
371+
<div
372+
class="min-[h:50px]:font-bold min-[h:200px]:font-bold min-[h:100px]:font-bold"
373+
></div>
374+
`,
375+
},
376+
],
377+
corePlugins: { preflight: false },
378+
theme: {
379+
screens: defaultScreens,
380+
},
381+
}
382+
383+
let input = css`
384+
@tailwind utilities;
385+
`
386+
387+
return run(input, config).then((result) => {
388+
expect(result.css).toMatchFormattedCss(css`
389+
@media (min-height: 50px) {
390+
.min-\[h\:50px\]\:font-bold {
391+
font-weight: 700;
392+
}
393+
}
394+
@media (min-height: 100px) {
395+
.min-\[h\:100px\]\:font-bold {
396+
font-weight: 700;
397+
}
398+
}
399+
@media (min-height: 200px) {
400+
.min-\[h\:200px\]\:font-bold {
401+
font-weight: 700;
402+
}
403+
}
404+
`)
405+
})
406+
})
407+
366408
it('warns when using min variants with complex screen configs', async () => {
367409
let config = {
368410
content: [

0 commit comments

Comments
 (0)