Skip to content

Commit f97a87a

Browse files
adamwathanadamwathan
committed
Optimize filter plugins for JIT + add arbitrary value support
Except for drop-shadow, will add that once we can think it through a bit.
1 parent c750ca0 commit f97a87a

20 files changed

+593
-238
lines changed

‎jit/tests/arbitrary-values.test.css

+51
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,57 @@
136136
.text-\[2\.23rem\] {
137137
font-size: 2.23rem;
138138
}
139+
.blur-\[15px\] {
140+
--tw-blur: blur(15px);
141+
}
142+
.brightness-\[300\%\] {
143+
--tw-brightness: brightness(300%);
144+
}
145+
.contrast-\[2\.4\] {
146+
--tw-contrast: contrast(2.4);
147+
}
148+
.grayscale-\[0\.55\] {
149+
--tw-grayscale: grayscale(0.55);
150+
}
151+
.hue-rotate-\[0\.8turn\] {
152+
--tw-hue-rotate: hue-rotate(0.8turn);
153+
}
154+
.invert-\[0\.75\] {
155+
--tw-invert: invert(0.75);
156+
}
157+
.saturate-\[180\%\] {
158+
--tw-saturate: saturate(180%);
159+
}
160+
.sepia-\[0\.2\] {
161+
--tw-sepia: sepia(0.2);
162+
}
163+
.backdrop-blur-\[11px\] {
164+
--tw-backdrop-blur: blur(11px);
165+
}
166+
.backdrop-brightness-\[1\.23\] {
167+
--tw-backdrop-brightness: brightness(1.23);
168+
}
169+
.backdrop-contrast-\[0\.87\] {
170+
--tw-backdrop-contrast: contrast(0.87);
171+
}
172+
.backdrop-grayscale-\[0\.42\] {
173+
--tw-backdrop-grayscale: grayscale(0.42);
174+
}
175+
.backdrop-hue-rotate-\[1\.57rad\] {
176+
--tw-backdrop-hue-rotate: hue-rotate(1.57rad);
177+
}
178+
.backdrop-invert-\[0\.66\] {
179+
--tw-backdrop-invert: invert(0.66);
180+
}
181+
.backdrop-opacity-\[22\%\] {
182+
--tw-backdrop-opacity: opacity(22%);
183+
}
184+
.backdrop-saturate-\[144\%\] {
185+
--tw-backdrop-saturate: saturate(144%);
186+
}
187+
.backdrop-sepia-\[0\.38\] {
188+
--tw-backdrop-sepia: sepia(0.38);
189+
}
139190
.duration-\[2s\] {
140191
transition-duration: 2s;
141192
}

‎jit/tests/arbitrary-values.test.html

+17
Original file line numberDiff line numberDiff line change
@@ -43,5 +43,22 @@
4343
<div class="duration-[var(--app-duration)]"></div>
4444
<div class="p-[var(--app-padding)]"></div>
4545
<div class="inset-[11px]"></div>
46+
<div class="blur-[15px]"></div>
47+
<div class="brightness-[300%]"></div>
48+
<div class="contrast-[2.4]"></div>
49+
<div class="grayscale-[0.55]"></div>
50+
<div class="hue-rotate-[0.8turn]"></div>
51+
<div class="invert-[0.75]"></div>
52+
<div class="saturate-[180%]"></div>
53+
<div class="sepia-[0.2]"></div>
54+
<div class="backdrop-blur-[11px]"></div>
55+
<div class="backdrop-brightness-[1.23]"></div>
56+
<div class="backdrop-contrast-[0.87]"></div>
57+
<div class="backdrop-grayscale-[0.42]"></div>
58+
<div class="backdrop-hue-rotate-[1.57rad]"></div>
59+
<div class="backdrop-invert-[0.66]"></div>
60+
<div class="backdrop-opacity-[22%]"></div>
61+
<div class="backdrop-saturate-[144%]"></div>
62+
<div class="backdrop-sepia-[0.38]"></div>
4663
</body>
4764
</html>

‎jit/tests/arbitrary-values.test.js

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ function run(input, config = {}) {
99

1010
test('arbitrary values', () => {
1111
let config = {
12+
mode: 'jit',
1213
purge: [path.resolve(__dirname, './arbitrary-values.test.html')],
1314
corePlugins: { preflight: false },
1415
theme: {},

‎src/plugins/backdropBlur.js

+30-14
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,37 @@
11
import _ from 'lodash'
2-
import nameClass from '../util/nameClass'
2+
const { asValue, nameClass } = require('../../jit/pluginUtils')
33

44
export default function () {
5-
return function ({ addUtilities, theme, variants }) {
6-
const utilities = _.fromPairs(
7-
_.map(theme('backdropBlur'), (value, modifier) => {
8-
return [
9-
nameClass('backdrop-blur', modifier),
10-
{
11-
'--tw-backdrop-blur': Array.isArray(value)
12-
? value.map((v) => `blur(${v})`).join(' ')
13-
: `blur(${value})`,
14-
},
15-
]
5+
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
6+
if (config('mode') === 'jit') {
7+
matchUtilities({
8+
'backdrop-blur': (modifier, { theme }) => {
9+
let value = asValue(modifier, theme.backdropBlur)
10+
11+
if (value === undefined) {
12+
return []
13+
}
14+
15+
return {
16+
[nameClass('backdrop-blur', modifier)]: { '--tw-backdrop-blur': `blur(${value})` },
17+
}
18+
},
1619
})
17-
)
20+
} else {
21+
const utilities = _.fromPairs(
22+
_.map(theme('backdropBlur'), (value, modifier) => {
23+
return [
24+
nameClass('backdrop-blur', modifier),
25+
{
26+
'--tw-backdrop-blur': Array.isArray(value)
27+
? value.map((v) => `blur(${v})`).join(' ')
28+
: `blur(${value})`,
29+
},
30+
]
31+
})
32+
)
1833

19-
addUtilities(utilities, variants('backdopBlur'))
34+
addUtilities(utilities, variants('backdopBlur'))
35+
}
2036
}
2137
}

‎src/plugins/backdropBrightness.js

+32-14
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
11
import _ from 'lodash'
2-
import nameClass from '../util/nameClass'
2+
const { asValue, nameClass } = require('../../jit/pluginUtils')
33

44
export default function () {
5-
return function ({ addUtilities, theme, variants }) {
6-
const utilities = _.fromPairs(
7-
_.map(theme('backdropBrightness'), (value, modifier) => {
8-
return [
9-
nameClass('backdrop-brightness', modifier),
10-
{
11-
'--tw-backdrop-brightness': Array.isArray(value)
12-
? value.map((v) => `brightness(${v})`).join(' ')
13-
: `brightness(${value})`,
14-
},
15-
]
5+
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
6+
if (config('mode') === 'jit') {
7+
matchUtilities({
8+
'backdrop-brightness': (modifier, { theme }) => {
9+
let value = asValue(modifier, theme.backdropBrightness)
10+
11+
if (value === undefined) {
12+
return []
13+
}
14+
15+
return {
16+
[nameClass('backdrop-brightness', modifier)]: {
17+
'--tw-backdrop-brightness': `brightness(${value})`,
18+
},
19+
}
20+
},
1621
})
17-
)
22+
} else {
23+
const utilities = _.fromPairs(
24+
_.map(theme('backdropBrightness'), (value, modifier) => {
25+
return [
26+
nameClass('backdrop-brightness', modifier),
27+
{
28+
'--tw-backdrop-brightness': Array.isArray(value)
29+
? value.map((v) => `brightness(${v})`).join(' ')
30+
: `brightness(${value})`,
31+
},
32+
]
33+
})
34+
)
1835

19-
addUtilities(utilities, variants('backdropBrightness'))
36+
addUtilities(utilities, variants('backdropBrightness'))
37+
}
2038
}
2139
}

‎src/plugins/backdropContrast.js

+32-14
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
11
import _ from 'lodash'
2-
import nameClass from '../util/nameClass'
2+
const { asValue, nameClass } = require('../../jit/pluginUtils')
33

44
export default function () {
5-
return function ({ addUtilities, theme, variants }) {
6-
const utilities = _.fromPairs(
7-
_.map(theme('backdropContrast'), (value, modifier) => {
8-
return [
9-
nameClass('backdrop-contrast', modifier),
10-
{
11-
'--tw-backdrop-contrast': Array.isArray(value)
12-
? value.map((v) => `contrast(${v})`).join(' ')
13-
: `contrast(${value})`,
14-
},
15-
]
5+
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
6+
if (config('mode') === 'jit') {
7+
matchUtilities({
8+
'backdrop-contrast': (modifier, { theme }) => {
9+
let value = asValue(modifier, theme.backdropContrast)
10+
11+
if (value === undefined) {
12+
return []
13+
}
14+
15+
return {
16+
[nameClass('backdrop-contrast', modifier)]: {
17+
'--tw-backdrop-contrast': `contrast(${value})`,
18+
},
19+
}
20+
},
1621
})
17-
)
22+
} else {
23+
const utilities = _.fromPairs(
24+
_.map(theme('backdropContrast'), (value, modifier) => {
25+
return [
26+
nameClass('backdrop-contrast', modifier),
27+
{
28+
'--tw-backdrop-contrast': Array.isArray(value)
29+
? value.map((v) => `contrast(${v})`).join(' ')
30+
: `contrast(${value})`,
31+
},
32+
]
33+
})
34+
)
1835

19-
addUtilities(utilities, variants('backdropContrast'))
36+
addUtilities(utilities, variants('backdropContrast'))
37+
}
2038
}
2139
}

‎src/plugins/backdropGrayscale.js

+32-14
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
11
import _ from 'lodash'
2-
import nameClass from '../util/nameClass'
2+
const { asValue, nameClass } = require('../../jit/pluginUtils')
33

44
export default function () {
5-
return function ({ addUtilities, theme, variants }) {
6-
const utilities = _.fromPairs(
7-
_.map(theme('backdropGrayscale'), (value, modifier) => {
8-
return [
9-
nameClass('backdrop-grayscale', modifier),
10-
{
11-
'--tw-backdrop-grayscale': Array.isArray(value)
12-
? value.map((v) => `grayscale(${v})`).join(' ')
13-
: `grayscale(${value})`,
14-
},
15-
]
5+
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
6+
if (config('mode') === 'jit') {
7+
matchUtilities({
8+
'backdrop-grayscale': (modifier, { theme }) => {
9+
let value = asValue(modifier, theme.backdropGrayscale)
10+
11+
if (value === undefined) {
12+
return []
13+
}
14+
15+
return {
16+
[nameClass('backdrop-grayscale', modifier)]: {
17+
'--tw-backdrop-grayscale': `grayscale(${value})`,
18+
},
19+
}
20+
},
1621
})
17-
)
22+
} else {
23+
const utilities = _.fromPairs(
24+
_.map(theme('backdropGrayscale'), (value, modifier) => {
25+
return [
26+
nameClass('backdrop-grayscale', modifier),
27+
{
28+
'--tw-backdrop-grayscale': Array.isArray(value)
29+
? value.map((v) => `grayscale(${v})`).join(' ')
30+
: `grayscale(${value})`,
31+
},
32+
]
33+
})
34+
)
1835

19-
addUtilities(utilities, variants('backdropGrayscale'))
36+
addUtilities(utilities, variants('backdropGrayscale'))
37+
}
2038
}
2139
}

‎src/plugins/backdropHueRotate.js

+32-14
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,39 @@
11
import _ from 'lodash'
2-
import nameClass from '../util/nameClass'
2+
const { asValue, nameClass } = require('../../jit/pluginUtils')
33

44
export default function () {
5-
return function ({ addUtilities, theme, variants }) {
6-
const utilities = _.fromPairs(
7-
_.map(theme('backdropHueRotate'), (value, modifier) => {
8-
return [
9-
nameClass('backdrop-hue-rotate', modifier),
10-
{
11-
'--tw-backdrop-hue-rotate': Array.isArray(value)
12-
? value.map((v) => `hue-rotate(${v})`).join(' ')
13-
: `hue-rotate(${value})`,
14-
},
15-
]
5+
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
6+
if (config('mode') === 'jit') {
7+
matchUtilities({
8+
'backdrop-hue-rotate': (modifier, { theme }) => {
9+
let value = asValue(modifier, theme.backdropHueRotate)
10+
11+
if (value === undefined) {
12+
return []
13+
}
14+
15+
return {
16+
[nameClass('backdrop-hue-rotate', modifier)]: {
17+
'--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
18+
},
19+
}
20+
},
1621
})
17-
)
22+
} else {
23+
const utilities = _.fromPairs(
24+
_.map(theme('backdropHueRotate'), (value, modifier) => {
25+
return [
26+
nameClass('backdrop-hue-rotate', modifier),
27+
{
28+
'--tw-backdrop-hue-rotate': Array.isArray(value)
29+
? value.map((v) => `hue-rotate(${v})`).join(' ')
30+
: `hue-rotate(${value})`,
31+
},
32+
]
33+
})
34+
)
1835

19-
addUtilities(utilities, variants('backdropHueRotate'))
36+
addUtilities(utilities, variants('backdropHueRotate'))
37+
}
2038
}
2139
}

0 commit comments

Comments
 (0)