Skip to content

Commit

Permalink
Optimize filter plugins for JIT + add arbitrary value support
Browse files Browse the repository at this point in the history
Except for drop-shadow, will add that once we can think it through a bit.
  • Loading branch information
adamwathan committed Apr 4, 2021
1 parent c750ca0 commit f97a87a
Show file tree
Hide file tree
Showing 20 changed files with 593 additions and 238 deletions.
51 changes: 51 additions & 0 deletions jit/tests/arbitrary-values.test.css
Original file line number Diff line number Diff line change
Expand Up @@ -136,6 +136,57 @@
.text-\[2\.23rem\] {
font-size: 2.23rem;
}
.blur-\[15px\] {
--tw-blur: blur(15px);
}
.brightness-\[300\%\] {
--tw-brightness: brightness(300%);
}
.contrast-\[2\.4\] {
--tw-contrast: contrast(2.4);
}
.grayscale-\[0\.55\] {
--tw-grayscale: grayscale(0.55);
}
.hue-rotate-\[0\.8turn\] {
--tw-hue-rotate: hue-rotate(0.8turn);
}
.invert-\[0\.75\] {
--tw-invert: invert(0.75);
}
.saturate-\[180\%\] {
--tw-saturate: saturate(180%);
}
.sepia-\[0\.2\] {
--tw-sepia: sepia(0.2);
}
.backdrop-blur-\[11px\] {
--tw-backdrop-blur: blur(11px);
}
.backdrop-brightness-\[1\.23\] {
--tw-backdrop-brightness: brightness(1.23);
}
.backdrop-contrast-\[0\.87\] {
--tw-backdrop-contrast: contrast(0.87);
}
.backdrop-grayscale-\[0\.42\] {
--tw-backdrop-grayscale: grayscale(0.42);
}
.backdrop-hue-rotate-\[1\.57rad\] {
--tw-backdrop-hue-rotate: hue-rotate(1.57rad);
}
.backdrop-invert-\[0\.66\] {
--tw-backdrop-invert: invert(0.66);
}
.backdrop-opacity-\[22\%\] {
--tw-backdrop-opacity: opacity(22%);
}
.backdrop-saturate-\[144\%\] {
--tw-backdrop-saturate: saturate(144%);
}
.backdrop-sepia-\[0\.38\] {
--tw-backdrop-sepia: sepia(0.38);
}
.duration-\[2s\] {
transition-duration: 2s;
}
Expand Down
17 changes: 17 additions & 0 deletions jit/tests/arbitrary-values.test.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,5 +43,22 @@
<div class="duration-[var(--app-duration)]"></div>
<div class="p-[var(--app-padding)]"></div>
<div class="inset-[11px]"></div>
<div class="blur-[15px]"></div>
<div class="brightness-[300%]"></div>
<div class="contrast-[2.4]"></div>
<div class="grayscale-[0.55]"></div>
<div class="hue-rotate-[0.8turn]"></div>
<div class="invert-[0.75]"></div>
<div class="saturate-[180%]"></div>
<div class="sepia-[0.2]"></div>
<div class="backdrop-blur-[11px]"></div>
<div class="backdrop-brightness-[1.23]"></div>
<div class="backdrop-contrast-[0.87]"></div>
<div class="backdrop-grayscale-[0.42]"></div>
<div class="backdrop-hue-rotate-[1.57rad]"></div>
<div class="backdrop-invert-[0.66]"></div>
<div class="backdrop-opacity-[22%]"></div>
<div class="backdrop-saturate-[144%]"></div>
<div class="backdrop-sepia-[0.38]"></div>
</body>
</html>
1 change: 1 addition & 0 deletions jit/tests/arbitrary-values.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ function run(input, config = {}) {

test('arbitrary values', () => {
let config = {
mode: 'jit',
purge: [path.resolve(__dirname, './arbitrary-values.test.html')],
corePlugins: { preflight: false },
theme: {},
Expand Down
44 changes: 30 additions & 14 deletions src/plugins/backdropBlur.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,37 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
const { asValue, nameClass } = require('../../jit/pluginUtils')

export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backdropBlur'), (value, modifier) => {
return [
nameClass('backdrop-blur', modifier),
{
'--tw-backdrop-blur': Array.isArray(value)
? value.map((v) => `blur(${v})`).join(' ')
: `blur(${value})`,
},
]
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-blur': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropBlur)

if (value === undefined) {
return []
}

return {
[nameClass('backdrop-blur', modifier)]: { '--tw-backdrop-blur': `blur(${value})` },
}
},
})
)
} else {
const utilities = _.fromPairs(
_.map(theme('backdropBlur'), (value, modifier) => {
return [
nameClass('backdrop-blur', modifier),
{
'--tw-backdrop-blur': Array.isArray(value)
? value.map((v) => `blur(${v})`).join(' ')
: `blur(${value})`,
},
]
})
)

addUtilities(utilities, variants('backdopBlur'))
addUtilities(utilities, variants('backdopBlur'))
}
}
}
46 changes: 32 additions & 14 deletions src/plugins/backdropBrightness.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,39 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
const { asValue, nameClass } = require('../../jit/pluginUtils')

export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backdropBrightness'), (value, modifier) => {
return [
nameClass('backdrop-brightness', modifier),
{
'--tw-backdrop-brightness': Array.isArray(value)
? value.map((v) => `brightness(${v})`).join(' ')
: `brightness(${value})`,
},
]
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-brightness': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropBrightness)

if (value === undefined) {
return []
}

return {
[nameClass('backdrop-brightness', modifier)]: {
'--tw-backdrop-brightness': `brightness(${value})`,
},
}
},
})
)
} else {
const utilities = _.fromPairs(
_.map(theme('backdropBrightness'), (value, modifier) => {
return [
nameClass('backdrop-brightness', modifier),
{
'--tw-backdrop-brightness': Array.isArray(value)
? value.map((v) => `brightness(${v})`).join(' ')
: `brightness(${value})`,
},
]
})
)

addUtilities(utilities, variants('backdropBrightness'))
addUtilities(utilities, variants('backdropBrightness'))
}
}
}
46 changes: 32 additions & 14 deletions src/plugins/backdropContrast.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,39 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
const { asValue, nameClass } = require('../../jit/pluginUtils')

export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backdropContrast'), (value, modifier) => {
return [
nameClass('backdrop-contrast', modifier),
{
'--tw-backdrop-contrast': Array.isArray(value)
? value.map((v) => `contrast(${v})`).join(' ')
: `contrast(${value})`,
},
]
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-contrast': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropContrast)

if (value === undefined) {
return []
}

return {
[nameClass('backdrop-contrast', modifier)]: {
'--tw-backdrop-contrast': `contrast(${value})`,
},
}
},
})
)
} else {
const utilities = _.fromPairs(
_.map(theme('backdropContrast'), (value, modifier) => {
return [
nameClass('backdrop-contrast', modifier),
{
'--tw-backdrop-contrast': Array.isArray(value)
? value.map((v) => `contrast(${v})`).join(' ')
: `contrast(${value})`,
},
]
})
)

addUtilities(utilities, variants('backdropContrast'))
addUtilities(utilities, variants('backdropContrast'))
}
}
}
46 changes: 32 additions & 14 deletions src/plugins/backdropGrayscale.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,39 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
const { asValue, nameClass } = require('../../jit/pluginUtils')

export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backdropGrayscale'), (value, modifier) => {
return [
nameClass('backdrop-grayscale', modifier),
{
'--tw-backdrop-grayscale': Array.isArray(value)
? value.map((v) => `grayscale(${v})`).join(' ')
: `grayscale(${value})`,
},
]
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-grayscale': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropGrayscale)

if (value === undefined) {
return []
}

return {
[nameClass('backdrop-grayscale', modifier)]: {
'--tw-backdrop-grayscale': `grayscale(${value})`,
},
}
},
})
)
} else {
const utilities = _.fromPairs(
_.map(theme('backdropGrayscale'), (value, modifier) => {
return [
nameClass('backdrop-grayscale', modifier),
{
'--tw-backdrop-grayscale': Array.isArray(value)
? value.map((v) => `grayscale(${v})`).join(' ')
: `grayscale(${value})`,
},
]
})
)

addUtilities(utilities, variants('backdropGrayscale'))
addUtilities(utilities, variants('backdropGrayscale'))
}
}
}
46 changes: 32 additions & 14 deletions src/plugins/backdropHueRotate.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,39 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
const { asValue, nameClass } = require('../../jit/pluginUtils')

export default function () {
return function ({ addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('backdropHueRotate'), (value, modifier) => {
return [
nameClass('backdrop-hue-rotate', modifier),
{
'--tw-backdrop-hue-rotate': Array.isArray(value)
? value.map((v) => `hue-rotate(${v})`).join(' ')
: `hue-rotate(${value})`,
},
]
return function ({ config, matchUtilities, addUtilities, theme, variants }) {
if (config('mode') === 'jit') {
matchUtilities({
'backdrop-hue-rotate': (modifier, { theme }) => {
let value = asValue(modifier, theme.backdropHueRotate)

if (value === undefined) {
return []
}

return {
[nameClass('backdrop-hue-rotate', modifier)]: {
'--tw-backdrop-hue-rotate': `hue-rotate(${value})`,
},
}
},
})
)
} else {
const utilities = _.fromPairs(
_.map(theme('backdropHueRotate'), (value, modifier) => {
return [
nameClass('backdrop-hue-rotate', modifier),
{
'--tw-backdrop-hue-rotate': Array.isArray(value)
? value.map((v) => `hue-rotate(${v})`).join(' ')
: `hue-rotate(${value})`,
},
]
})
)

addUtilities(utilities, variants('backdropHueRotate'))
addUtilities(utilities, variants('backdropHueRotate'))
}
}
}
Loading

0 comments on commit f97a87a

Please sign in to comment.