-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtailwindcss-container-queries.ts
113 lines (97 loc) · 2.7 KB
/
tailwindcss-container-queries.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import plugin from 'tailwindcss/plugin'
export default plugin(
function containerQueries({ matchUtilities, matchVariant, theme }) {
let values: Record<string, string> = theme('containers') ?? {}
function parseValue(value: string) {
let numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
if (numericValue === null) return null
return parseFloat(value)
}
matchUtilities(
{
'@container': (value, { modifier }) => {
return {
'container-type': value,
'container-name': modifier,
}
},
},
{
values: {
DEFAULT: 'inline-size',
normal: 'normal',
},
modifiers: 'any',
}
)
const sort: (
a: { value: string; modifier: string | null },
b: { value: string; modifier: string | null }
) => number = (aVariant, zVariant) => {
let a = parseFloat(aVariant.value)
let z = parseFloat(zVariant.value)
if (a === null || z === null) return 0
// Sort values themselves regardless of unit
if (a - z !== 0) return a - z
let aLabel = aVariant.modifier ?? ''
let zLabel = zVariant.modifier ?? ''
// Explicitly move empty labels to the end
if (aLabel === '' && zLabel !== '') {
return 1
} else if (aLabel !== '' && zLabel === '') {
return -1
}
// Sort labels alphabetically in the English locale
// We are intentionally overriding the locale because we do not want the sort to
// be affected by the machine's locale (be it a developer or CI environment)
return aLabel.localeCompare(zLabel, 'en', { numeric: true })
}
matchVariant(
'@',
(value = '', { modifier }) => {
let parsed = parseValue(value)
return parsed !== null
? `@container ${modifier ?? ''} (min-width: ${value})`
: []
},
{
values,
sort,
}
)
const maxVariantFn: (
value: string,
{ modifier }: { modifier: string | null }
) => string | string[] = (value = '', { modifier }) => {
let parsed = parseValue(value)
return parsed !== null
? `@container ${modifier ?? ''} (max-width: ${value})`
: []
}
matchVariant('@max', maxVariantFn, {
values,
sort,
})
matchVariant('atMax', maxVariantFn, {
values,
sort,
})
},
{
theme: {
containers: {
xs: '20rem',
sm: '24rem',
md: '28rem',
lg: '32rem',
xl: '36rem',
'2xl': '42rem',
'3xl': '48rem',
'4xl': '56rem',
'5xl': '64rem',
'6xl': '72rem',
'7xl': '80rem',
},
},
}
)