wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

WIP

Browse source 
Still gotta do shadows + backdrop filter
This commit is contained in:
Adam Wathan 2021-06-24 17:01:36 -04:00
parent fdfecf3b9c
commit 04d66b0f47
33 changed files with 1154 additions and 298 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/jit/lib/collapseAdjacentRules.js
View file

@ -8,6 +8,10 @@ export default function collapseAdjacentRules() {
return (root) => {
let currentRule = null
root.each((node) => {
if (node.nodes && node.nodes.length === 0) {
node.remove()
return
}
if (!types.has(node.type)) {
currentRule = null
return

2
src/jit/lib/generateRules.js
View file

@ -226,7 +226,7 @@ function* resolveMatches(candidate, context) {
for (let [sort, plugin] of plugins) {
if (typeof plugin === 'function') {
for (let ruleSet of [].concat(plugin(modifier))) {
for (let ruleSet of [].concat(plugin(modifier, { candidate }))) {
let [rules, options] = parseRules(ruleSet, context.postCssNodeCache)
for (let rule of rules) {
matches.push([{ ...sort, options: { ...sort.options, ...options } }, rule])

5
src/jit/lib/setupContextUtils.js
View file

@ -151,6 +151,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
}
return {
memory: context.memory,
addVariant(variantName, variantFunctions, options = {}) {
variantFunctions = [].concat(variantFunctions)
@ -264,7 +265,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
let prefixedIdentifier = prefixIdentifier(identifier, options)
let rule = utilities[identifier]
function wrapped(modifier) {
function wrapped(modifier, { candidate }) {
let { type = 'any' } = options
type = [].concat(type)
let [value, coercedType] = coerceValue(type, modifier, options.values, tailwindConfig)
@ -277,6 +278,7 @@ function buildPluginApi(tailwindConfig, context, { variantList, variantMap, offs
let ruleSets = []
.concat(
rule(value, {
selector: `.${escapeClassName(candidate)}`,
includeRules(rules) {
includedRules.push(...rules)
},
@ -497,6 +499,7 @@ export function createContext(
changedContent: changedContent,
variantMap: new Map(),
stylesheetCache: null,
memory: new Map(),
}
let resolvedPlugins = resolvePlugins(context, tailwindDirectives, root)

52
src/plugins/blur.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
blur: (value) => {
return {
'--tw-blur': `blur(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
blur: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-blur': `blur(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('blur'),
variants: variants('blur'),
type: 'any',
}
)
{
values: theme('blur'),
variants: variants('blur'),
type: 'any',
}
)
} else {
matchUtilities(
{
blur: (value) => {
return {
'--tw-blur': `blur(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('blur'),
variants: variants('blur'),
type: 'any',
}
)
}
}
}

52
src/plugins/brightness.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
brightness: (value) => {
return {
'--tw-brightness': `brightness(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
brightness: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-brightness': `brightness(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('brightness'),
variants: variants('brightness'),
type: 'any',
}
)
{
values: theme('brightness'),
variants: variants('brightness'),
type: 'any',
}
)
} else {
matchUtilities(
{
brightness: (value) => {
return {
'--tw-brightness': `brightness(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('brightness'),
variants: variants('brightness'),
type: 'any',
}
)
}
}
}

48
src/plugins/contrast.js
View file

@ -1,15 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
contrast: (value) => {
return {
'--tw-contrast': `contrast(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
contrast: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-contrast': `contrast(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{ values: theme('contrast'), variants: variants('contrast'), type: 'any' }
)
{
values: theme('contrast'),
variants: variants('contrast'),
type: 'any',
}
)
} else {
matchUtilities(
{
contrast: (value) => {
return {
'--tw-contrast': `contrast(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('contrast'),
variants: variants('contrast'),
type: 'any',
}
)
}
}
}

53
src/plugins/dropShadow.js
View file

@ -1,22 +1,45 @@
import _ from 'lodash'
import nameClass from '../util/nameClass'
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, addUtilities, theme, variants }) {
const utilities = _.fromPairs(
_.map(theme('dropShadow'), (value, modifier) => {
return [
nameClass('drop-shadow', modifier),
{
'--tw-drop-shadow': Array.isArray(value)
? value.map((v) => `drop-shadow(${v})`).join(' ')
: `drop-shadow(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
},
]
})
)
return function ({ config, matchUtilities, addUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
'drop-shadow': (value, { selector }) => {
addBaseSelector(memory, selector)
addUtilities(utilities, variants('dropShadow'))
return {
'--tw-drop-shadow': Array.isArray(value)
? value.map((v) => `drop-shadow(${v})`).join(' ')
: `drop-shadow(${value})`,
filter: 'var(--tw-filter)',
}
},
},
{
values: theme('dropShadow'),
variants: variants('dropShadow'),
type: 'lookup',
}
)
} else {
const utilities = _.fromPairs(
_.map(theme('dropShadow'), (value, modifier) => {
return [
nameClass('drop-shadow', modifier),
{
'--tw-drop-shadow': Array.isArray(value)
? value.map((v) => `drop-shadow(${v})`).join(' ')
: `drop-shadow(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
},
]
})
)
addUtilities(utilities, variants('dropShadow'))
}
}
}

49
src/plugins/filter.js
View file

@ -1,8 +1,15 @@
export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*, ::before, ::after': {
import postcss from 'postcss'
import parseObjectStyles from '../util/parseObjectStyles'
let baseRulesKey = Symbol()
export function addBaseSelector(memory, selector) {
let baseRoot = memory.get(baseRulesKey)
if (baseRoot.nodes.length === 0) {
baseRoot.append(
parseObjectStyles({
[selector]: {
'--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)',
'--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)',
@ -25,12 +32,36 @@ export default function () {
].join(' '),
},
})
addUtilities(
)
} else {
baseRoot.nodes[0].selectors = [...baseRoot.nodes[0].selectors, selector]
}
}
export default function () {
return function ({ config, matchUtilities, addBase, addUtilities, variants, memory }) {
if (config('mode') === 'jit') {
let baseRoot = postcss.root()
memory.set(baseRulesKey, baseRoot)
addBase(baseRoot)
matchUtilities(
{
'.filter': { filter: 'var(--tw-filter)' },
'.filter-none': { filter: 'none' },
filter: (value, { selector }) => {
if (value !== 'none') {
addBaseSelector(memory, selector)
}
return {
filter: value,
}
},
},
variants('filter')
{
values: { DEFAULT: 'var(--tw-filter)', none: 'none' },
variants: variants('filter'),
type: 'any',
}
)
} else {
addUtilities(

52
src/plugins/grayscale.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
grayscale: (value) => {
return {
'--tw-grayscale': `grayscale(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
grayscale: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-grayscale': `grayscale(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('grayscale'),
variants: variants('grayscale'),
type: 'any',
}
)
{
values: theme('grayscale'),
variants: variants('grayscale'),
type: 'any',
}
)
} else {
matchUtilities(
{
grayscale: (value) => {
return {
'--tw-grayscale': `grayscale(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('grayscale'),
variants: variants('grayscale'),
type: 'any',
}
)
}
}
}

52
src/plugins/hueRotate.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
'hue-rotate': (value) => {
return {
'--tw-hue-rotate': `hue-rotate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
'hue-rotate': (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-hue-rotate': `hue-rotate(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('hueRotate'),
variants: variants('hueRotate'),
type: 'any',
}
)
{
values: theme('hueRotate'),
variants: variants('hueRotate'),
type: 'any',
}
)
} else {
matchUtilities(
{
'hue-rotate': (value) => {
return {
'--tw-hue-rotate': `hue-rotate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('hueRotate'),
variants: variants('hueRotate'),
type: 'any',
}
)
}
}
}

4
src/plugins/index.js
View file

@ -34,11 +34,11 @@ export { default as tableLayout } from './tableLayout'
export { default as borderCollapse } from './borderCollapse'
export { default as transformOrigin } from './transformOrigin'
export { default as transform } from './transform'
export { default as translate } from './translate'
export { default as rotate } from './rotate'
export { default as skew } from './skew'
export { default as scale } from './scale'
export { default as transform } from './transform'
export { default as animation } from './animation'
@ -136,6 +136,7 @@ export { default as ringOpacity } from './ringOpacity'
export { default as ringOffsetWidth } from './ringOffsetWidth'
export { default as ringOffsetColor } from './ringOffsetColor'
export { default as filter } from './filter'
export { default as blur } from './blur'
export { default as brightness } from './brightness'
export { default as contrast } from './contrast'
@ -145,7 +146,6 @@ export { default as hueRotate } from './hueRotate'
export { default as invert } from './invert'
export { default as saturate } from './saturate'
export { default as sepia } from './sepia'
export { default as filter } from './filter'
export { default as backdropBlur } from './backdropBlur'
export { default as backdropBrightness } from './backdropBrightness'

52
src/plugins/invert.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
invert: (value) => {
return {
'--tw-invert': `invert(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
invert: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-invert': `invert(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('invert'),
variants: variants('invert'),
type: 'any',
}
)
{
values: theme('invert'),
variants: variants('invert'),
type: 'any',
}
)
} else {
matchUtilities(
{
invert: (value) => {
return {
'--tw-invert': `invert(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('invert'),
variants: variants('invert'),
type: 'any',
}
)
}
}
}

13
src/plugins/rotate.js
View file

@ -1,11 +1,18 @@
import { addBaseSelector } from './transform'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('rotate', [
['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
])({ config, ...rest })
return createUtilityPlugin(
'rotate',
[['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]]],
{
lolback(_value, { selector }) {
addBaseSelector(rest.memory, selector)
},
}
)({ config, ...rest })
} else {
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })
}

52
src/plugins/saturate.js
View file

@ -1,19 +1,41 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
saturate: (value) => {
return {
'--tw-saturate': `saturate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
saturate: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-saturate': `saturate(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{
values: theme('saturate'),
variants: variants('saturate'),
type: 'any',
}
)
{
values: theme('saturate'),
variants: variants('saturate'),
type: 'any',
}
)
} else {
matchUtilities(
{
saturate: (value) => {
return {
'--tw-saturate': `saturate(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{
values: theme('saturate'),
variants: variants('saturate'),
type: 'any',
}
)
}
}
}

19
src/plugins/scale.js
View file

@ -1,15 +1,24 @@
import { addBaseSelector } from './transform'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', 'var(--tw-transform)']]],
return createUtilityPlugin(
'scale',
[
['scale-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
['scale', ['--tw-scale-x', '--tw-scale-y', ['transform', 'var(--tw-transform)']]],
[
['scale-x', ['--tw-scale-x', ['transform', 'var(--tw-transform)']]],
['scale-y', ['--tw-scale-y', ['transform', 'var(--tw-transform)']]],
],
],
])({ config, ...rest })
{
lolback(_value, { selector }) {
addBaseSelector(rest.memory, selector)
},
}
)({ config, ...rest })
} else {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y']],

44
src/plugins/sepia.js
View file

@ -1,15 +1,37 @@
import { addBaseSelector } from './filter'
export default function () {
return function ({ config, matchUtilities, theme, variants }) {
matchUtilities(
{
sepia: (value) => {
return {
'--tw-sepia': `sepia(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
return function ({ config, matchUtilities, theme, variants, memory }) {
if (config('mode') === 'jit') {
matchUtilities(
{
sepia: (value, { selector }) => {
addBaseSelector(memory, selector)
return {
'--tw-sepia': `sepia(${value})`,
filter: 'var(--tw-filter)',
}
},
},
},
{ values: theme('sepia'), variants: variants('sepia'), type: 'any' }
)
{
values: theme('sepia'),
variants: variants('sepia'),
type: 'any',
}
)
} else {
matchUtilities(
{
sepia: (value) => {
return {
'--tw-sepia': `sepia(${value})`,
...(config('mode') === 'jit' ? { filter: 'var(--tw-filter)' } : {}),
}
},
},
{ values: theme('sepia'), variants: variants('sepia'), type: 'any' }
)
}
}
}

17
src/plugins/skew.js
View file

@ -1,14 +1,23 @@
import { addBaseSelector } from './transform'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('skew', [
return createUtilityPlugin(
'skew',
[
['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
[
['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
],
],
])({ config, ...rest })
{
lolback(_value, { selector }) {
addBaseSelector(rest.memory, selector)
},
}
)({ config, ...rest })
} else {
return createUtilityPlugin('skew', [
[

60
src/plugins/transform.js
View file

@ -1,8 +1,15 @@
export default function () {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*, ::before, ::after': {
import postcss from 'postcss'
import parseObjectStyles from '../util/parseObjectStyles'
let baseRulesKey = Symbol()
export function addBaseSelector(memory, selector) {
let baseRoot = memory.get(baseRulesKey)
if (baseRoot.nodes.length === 0) {
baseRoot.append(
parseObjectStyles({
[selector]: {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
@ -21,13 +28,35 @@ export default function () {
].join(' '),
},
})
addUtilities(
)
} else {
baseRoot.nodes[0].selectors = [...baseRoot.nodes[0].selectors, selector]
}
}
export default function () {
return function ({ config, matchUtilities, addBase, addUtilities, variants, memory }) {
if (config('mode') === 'jit') {
let baseRoot = postcss.root()
memory.set(baseRulesKey, baseRoot)
addBase(baseRoot)
matchUtilities(
{
'.transform': {
transform: 'var(--tw-transform)',
transform: (value, { selector }) => {
if (value !== 'none') {
addBaseSelector(memory, selector)
}
return {
transform: value,
}
},
'.transform-cpu': {
'--tw-transform': [
},
{
values: {
DEFAULT: 'var(--tw-transform)',
cpu: [
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
@ -36,9 +65,7 @@ export default function () {
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-gpu': {
'--tw-transform': [
gpu: [
'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)',
'rotate(var(--tw-rotate))',
'skewX(var(--tw-skew-x))',
@ -46,10 +73,11 @@ export default function () {
'scaleX(var(--tw-scale-x))',
'scaleY(var(--tw-scale-y))',
].join(' '),
none: 'none',
},
'.transform-none': { transform: 'none' },
},
variants('transform')
variants: variants('transform'),
type: 'any',
}
)
} else {
addUtilities(

17
src/plugins/translate.js
View file

@ -1,14 +1,23 @@
import { addBaseSelector } from './transform'
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('translate', [
return createUtilityPlugin(
'translate',
[
['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
[
['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
],
],
])({ config, ...rest })
{
lolback(_value, { selector }) {
addBaseSelector(rest.memory, selector)
},
}
)({ config, ...rest })
} else {
return createUtilityPlugin('translate', [
[

7
src/util/createUtilityPlugin.js
View file

@ -13,7 +13,7 @@ let asMap = new Map([
export default function createUtilityPlugin(
themeKey,
utilityVariations = [[themeKey, [themeKey]]],
{ filterDefault = false, resolveArbitraryValue = asValue } = {}
{ filterDefault = false, resolveArbitraryValue = asValue, lolback = () => {} } = {}
) {
let transformValue = transformThemeValue(themeKey)
return function ({ matchUtilities, variants, theme }) {
@ -23,7 +23,10 @@ export default function createUtilityPlugin(
matchUtilities(
group.reduce((obj, [classPrefix, properties]) => {
return Object.assign(obj, {
[classPrefix]: (value) => {
[classPrefix]: (value, helpers) => {
// Holy shit I can't believe this is real
lolback(value, helpers)
return properties.reduce((obj, name) => {
if (Array.isArray(name)) {
return Object.assign(obj, { [name[0]]: name[1] })

69
tests/jit/arbitrary-values.test.css
View file

@ -1,3 +1,64 @@
*,
::before,
::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
--tw-shadow: 0 0 #0000;
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
.blur-\[15px\],
.brightness-\[300\%\],
.contrast-\[2\.4\],
.grayscale-\[0\.55\],
.hue-rotate-\[0\.8turn\],
.invert-\[0\.75\],
.saturate-\[180\%\],
.sepia-\[0\.2\] {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-filter);
}
*,
::before,
::after {
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-grayscale: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-invert: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-opacity: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-saturate: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-sepia: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate)
var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
var(--tw-backdrop-sepia);
}
.inset-\[11px\] {
top: 11px;
right: 11px;
@ -319,35 +380,27 @@
}
.blur-\[15px\] {
--tw-blur: blur(15px);
filter: var(--tw-filter);
}
.brightness-\[300\%\] {
--tw-brightness: brightness(300%);
filter: var(--tw-filter);
}
.contrast-\[2\.4\] {
--tw-contrast: contrast(2.4);
filter: var(--tw-filter);
}
.grayscale-\[0\.55\] {
--tw-grayscale: grayscale(0.55);
filter: var(--tw-filter);
}
.hue-rotate-\[0\.8turn\] {
--tw-hue-rotate: hue-rotate(0.8turn);
filter: var(--tw-filter);
}
.invert-\[0\.75\] {
--tw-invert: invert(0.75);
filter: var(--tw-filter);
}
.saturate-\[180\%\] {
--tw-saturate: saturate(180%);
filter: var(--tw-filter);
}
.sepia-\[0\.2\] {
--tw-sepia: sepia(0.2);
filter: var(--tw-filter);
}
.backdrop-blur-\[11px\] {
--tw-backdrop-blur: blur(11px);

1
tests/jit/arbitrary-values.test.js
View file

@ -17,6 +17,7 @@ test('arbitrary values', () => {
}
let css = `
@tailwind base;
@tailwind utilities;
`

66
tests/jit/basic-usage.test.css
View file

@ -1,6 +1,13 @@
*,
::before,
::after {
.rotate-3,
.scale-95,
.skew-y-12,
.skew-x-12,
.transform,
.transform-gpu,
.translate-x-5,
.-translate-x-4,
.translate-y-6,
.-translate-x-3 {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
@ -11,6 +18,10 @@
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
*,
::before,
::after {
--tw-border-opacity: 1;
border-color: rgba(229, 231, 235, var(--tw-border-opacity));
--tw-shadow: 0 0 #0000;
@ -20,6 +31,17 @@
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
.filter,
.blur-md,
.brightness-150,
.contrast-50,
.drop-shadow-md,
.grayscale,
.hue-rotate-60,
.invert,
.saturate-200,
.sepia {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
@ -31,6 +53,10 @@
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
*,
::before,
::after {
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
@ -232,6 +258,17 @@
.origin-top-right {
transform-origin: top right;
}
.transform {
transform: var(--tw-transform);
}
.transform-gpu {
transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate))
skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x))
scaleY(var(--tw-scale-y));
}
.transform-none {
transform: none;
}
.translate-x-5 {
--tw-translate-x: 1.25rem;
transform: var(--tw-transform);
@ -265,17 +302,6 @@
--tw-scale-y: 0.95;
transform: var(--tw-transform);
}
.transform {
transform: var(--tw-transform);
}
.transform-gpu {
--tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-none {
transform: none;
}
.animate-none {
animation: none;
}
@ -699,6 +725,12 @@
.ring-offset-blue-300 {
--tw-ring-offset-color: #93c5fd;
}
.filter {
filter: var(--tw-filter);
}
.filter-none {
filter: none;
}
.blur-md {
--tw-blur: blur(12px);
filter: var(--tw-filter);
@ -736,12 +768,6 @@
--tw-sepia: sepia(100%);
filter: var(--tw-filter);
}
.filter {
filter: var(--tw-filter);
}
.filter-none {
filter: none;
}
.backdrop-blur-lg {
--tw-backdrop-blur: blur(16px);
backdrop-filter: var(--tw-backdrop-filter);

233
tests/jit/filter-utilities.test.js Normal file
View file

@ -0,0 +1,233 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
return postcss(tailwind(config)).process(input, {
from: `${path.resolve(__filename)}?test=${currentTestName}`,
})
}
test('without filter class', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="brightness-150 contrast-50"></div>',
},
],
corePlugins: ['filter', 'brightness', 'contrast'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.brightness-150, .contrast-50 {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-150 {
--tw-brightness: brightness(1.5);
filter: var(--tw-filter);
}
.contrast-50 {
--tw-contrast: contrast(0.5);
filter: var(--tw-filter);
}
`)
})
})
test('with filter class', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="filter brightness-150 contrast-50"></div>',
},
],
corePlugins: ['filter', 'brightness', 'contrast'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.filter, .brightness-150, .contrast-50 {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-filter)
}
.brightness-150 {
--tw-brightness: brightness(1.5);
filter: var(--tw-filter);
}
.contrast-50 {
--tw-contrast: contrast(0.5);
filter: var(--tw-filter);
}
`)
})
})
test('with filter-none class', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="filter-none brightness-150 contrast-50"></div>',
},
],
corePlugins: ['filter', 'brightness', 'contrast'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.brightness-150, .contrast-50 {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter-none {
filter: none
}
.brightness-150 {
--tw-brightness: brightness(1.5);
filter: var(--tw-filter);
}
.contrast-50 {
--tw-contrast: contrast(0.5);
filter: var(--tw-filter);
}
`)
})
})
test('with variants', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="brightness-100 hover:brightness-150 contrast-50 lg:contrast-100"></div>',
},
],
corePlugins: ['filter', 'brightness', 'contrast'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.brightness-100,
.hover\\:brightness-150,
.contrast-50,
.lg\\:contrast-100 {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.brightness-100 {
--tw-brightness: brightness(1);
filter: var(--tw-filter);
}
.contrast-50 {
--tw-contrast: contrast(0.5);
filter: var(--tw-filter);
}
.hover\\:brightness-150:hover {
--tw-brightness: brightness(1.5);
filter: var(--tw-filter);
}
@media (min-width: 1024px) {
.lg\\:contrast-100 {
--tw-contrast: contrast(1);
filter: var(--tw-filter);
}
}
`)
})
})
test('without any filter classes', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class=""></div>',
},
],
corePlugins: ['filter', 'brightness', 'contrast'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(``)
})
})

14
tests/jit/important-boolean.test.css
View file

@ -20,6 +20,9 @@
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
.brightness-150,
.contrast-50 {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
@ -31,6 +34,11 @@
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-filter);
}
*,
::before,
::after {
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
@ -99,6 +107,12 @@
.font-bold {
font-weight: 700 !important;
}
.brightness-150 {
--tw-brightness: brightness(1.5) !important;
}
.contrast-50 {
--tw-contrast: contrast(0.5) !important;
}
.custom-util {
button: no;
}

1
tests/jit/important-boolean.test.html
View file

@ -5,6 +5,7 @@
<div class="custom-component"></div>
<div class="custom-important-component"></div>
<div class="font-bold"></div>
<div class="brightness-150 contrast-50"></div>
<div class="md:hover:text-right"></div>
<div class="motion-safe:hover:text-center"></div>
<div class="dark:focus:text-left"></div>

11
tests/jit/kitchen-sink.test.css
View file

@ -148,17 +148,6 @@
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);

14
tests/jit/prefix.test.css
View file

@ -20,6 +20,9 @@
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
.tw-brightness-150,
.tw-contrast-50 {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
@ -31,6 +34,11 @@
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-filter);
}
*,
::before,
::after {
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
@ -102,6 +110,12 @@
.tw-font-bold {
font-weight: 700;
}
.tw-brightness-150 {
--tw-brightness: brightness(1.5);
}
.tw-contrast-50 {
--tw-contrast: contrast(0.5);
}
.tw-custom-util-prefix {
button: no;
}

1
tests/jit/prefix.test.html
View file

@ -10,6 +10,7 @@
<div class="tw-custom-component-prefix"></div>
<div class="custom-component-no-prefix"></div>
<div class="tw-font-bold"></div>
<div class="tw-brightness-150 tw-contrast-50"></div>
<div class="md:hover:tw-text-right"></div>
<div class="motion-safe:hover:tw-text-center"></div>
<div class="dark:focus:tw-text-left"></div>

65
tests/jit/raw-content.test.css
View file

@ -630,49 +630,40 @@
.ring-offset-blue-300 {
--tw-ring-offset-color: #93c5fd;
}
.blur-md {
--tw-blur: blur(12px);
filter: var(--tw-filter);
}
.brightness-150 {
--tw-brightness: brightness(1.5);
filter: var(--tw-filter);
}
.contrast-50 {
--tw-contrast: contrast(0.5);
filter: var(--tw-filter);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
filter: var(--tw-filter);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-filter);
}
.hue-rotate-60 {
--tw-hue-rotate: hue-rotate(60deg);
filter: var(--tw-filter);
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-filter);
}
.saturate-200 {
--tw-saturate: saturate(2);
filter: var(--tw-filter);
}
.sepia {
--tw-sepia: sepia(100%);
filter: var(--tw-filter);
}
.filter {
filter: var(--tw-filter);
}
.filter-none {
filter: none;
}
.blur-md {
--tw-blur: blur(12px);
}
.brightness-150 {
--tw-brightness: brightness(1.5);
}
.contrast-50 {
--tw-contrast: contrast(0.5);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
}
.grayscale {
--tw-grayscale: grayscale(100%);
}
.hue-rotate-60 {
--tw-hue-rotate: hue-rotate(60deg);
}
.invert {
--tw-invert: invert(100%);
}
.saturate-200 {
--tw-saturate: saturate(2);
}
.sepia {
--tw-sepia: sepia(100%);
}
.backdrop-blur-lg {
--tw-backdrop-blur: blur(16px);
backdrop-filter: var(--tw-backdrop-filter);

81
tests/jit/relative-purge-paths.test.css
View file

@ -20,6 +20,17 @@
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
}
.filter,
.blur-md,
.brightness-150,
.contrast-50,
.drop-shadow-md,
.grayscale,
.hue-rotate-60,
.invert,
.saturate-200,
.sepia {
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
@ -31,6 +42,11 @@
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
filter: var(--tw-filter);
}
*,
::before,
::after {
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);
@ -677,49 +693,40 @@
.ring-offset-blue-300 {
--tw-ring-offset-color: #93c5fd;
}
.blur-md {
--tw-blur: blur(12px);
filter: var(--tw-filter);
}
.brightness-150 {
--tw-brightness: brightness(1.5);
filter: var(--tw-filter);
}
.contrast-50 {
--tw-contrast: contrast(0.5);
filter: var(--tw-filter);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
filter: var(--tw-filter);
}
.grayscale {
--tw-grayscale: grayscale(100%);
filter: var(--tw-filter);
}
.hue-rotate-60 {
--tw-hue-rotate: hue-rotate(60deg);
filter: var(--tw-filter);
}
.invert {
--tw-invert: invert(100%);
filter: var(--tw-filter);
}
.saturate-200 {
--tw-saturate: saturate(2);
filter: var(--tw-filter);
}
.sepia {
--tw-sepia: sepia(100%);
filter: var(--tw-filter);
}
.filter {
filter: var(--tw-filter);
}
.filter-none {
filter: none;
}
.blur-md {
--tw-blur: blur(12px);
}
.brightness-150 {
--tw-brightness: brightness(1.5);
}
.contrast-50 {
--tw-contrast: contrast(0.5);
}
.drop-shadow-md {
--tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07))
drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
}
.grayscale {
--tw-grayscale: grayscale(100%);
}
.hue-rotate-60 {
--tw-hue-rotate: hue-rotate(60deg);
}
.invert {
--tw-invert: invert(100%);
}
.saturate-200 {
--tw-saturate: saturate(2);
}
.sepia {
--tw-sepia: sepia(100%);
}
.backdrop-blur-lg {
--tw-backdrop-blur: blur(16px);
backdrop-filter: var(--tw-backdrop-filter);

231
tests/jit/transform-utilities.test.js Normal file
View file

@ -0,0 +1,231 @@
import postcss from 'postcss'
import path from 'path'
import tailwind from '../../src/jit/index.js'
function run(input, config = {}) {
const { currentTestName } = expect.getState()
return postcss(tailwind(config)).process(input, {
from: `${path.resolve(__filename)}?test=${currentTestName}`,
})
}
test('without transform class', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="scale-50 translate-x-4"></div>',
},
],
corePlugins: ['transform', 'scale', 'translate'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.scale-50, .translate-x-4 {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4 {
--tw-translate-x: 1rem;
transform: var(--tw-transform);
}
.scale-50 {
--tw-scale-x: 0.5;
--tw-scale-y: 0.5;
transform: var(--tw-transform);
}
`)
})
})
test('with transform class', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="transform scale-50 translate-x-4"></div>',
},
],
corePlugins: ['transform', 'scale', 'translate'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.transform, .scale-50, .translate-x-4 {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
transform: var(--tw-transform);
}
.translate-x-4 {
--tw-translate-x: 1rem;
transform: var(--tw-transform);
}
.scale-50 {
--tw-scale-x: 0.5;
--tw-scale-y: 0.5;
transform: var(--tw-transform);
}
`)
})
})
test('with transform-none class', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="transform-none scale-50 translate-x-4"></div>',
},
],
corePlugins: ['transform', 'scale', 'translate'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.scale-50, .translate-x-4 {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform-none {
transform: none;
}
.translate-x-4 {
--tw-translate-x: 1rem;
transform: var(--tw-transform);
}
.scale-50 {
--tw-scale-x: 0.5;
--tw-scale-y: 0.5;
transform: var(--tw-transform);
}
`)
})
})
test('with variants', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class="scale-50 hover:scale-100 translate-x-4 lg:translate-x-6"></div>',
},
],
corePlugins: ['transform', 'scale', 'translate'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
.scale-50, .hover\\:scale-100, .translate-x-4, .lg\\:translate-x-6 {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-4 {
--tw-translate-x: 1rem;
transform: var(--tw-transform);
}
.scale-50 {
--tw-scale-x: 0.5;
--tw-scale-y: 0.5;
transform: var(--tw-transform);
}
.hover\\:scale-100:hover {
--tw-scale-x: 1;
--tw-scale-y: 1;
transform: var(--tw-transform);
}
@media (min-width: 1024px) {
.lg\\:translate-x-6 {
--tw-translate-x: 1.5rem;
transform: var(--tw-transform);
}
}
`)
})
})
test('without any transform classes', async () => {
let config = {
mode: 'jit',
purge: [
{
raw: '<div class=""></div>',
},
],
corePlugins: ['transform', 'scale', 'translate'],
theme: {},
plugins: [],
}
let css = `
@tailwind base;
@tailwind utilities
`
return run(css, config).then((result) => {
expect(result.css).toMatchFormattedCss(``)
})
})

11
tests/jit/variants.test.css
View file

@ -20,17 +20,6 @@
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-contrast: var(--tw-empty, /*!*/ /*!*/);
--tw-grayscale: var(--tw-empty, /*!*/ /*!*/);
--tw-hue-rotate: var(--tw-empty, /*!*/ /*!*/);
--tw-invert: var(--tw-empty, /*!*/ /*!*/);
--tw-saturate: var(--tw-empty, /*!*/ /*!*/);
--tw-sepia: var(--tw-empty, /*!*/ /*!*/);
--tw-drop-shadow: var(--tw-empty, /*!*/ /*!*/);
--tw-filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale)
var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
--tw-backdrop-blur: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-brightness: var(--tw-empty, /*!*/ /*!*/);
--tw-backdrop-contrast: var(--tw-empty, /*!*/ /*!*/);