WIP
Still gotta do shadows + backdrop filter
This commit is contained in:
Adam Wathan
parent
fdfecf3b9c
commit
04d66b0f47
33 changed files with 1154 additions and 298 deletions
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ test('arbitrary values', () => {
|
|||
}
|
||||
|
||||
let css = `
|
||||
@tailwind base;
|
||||
@tailwind utilities;
|
||||
`
|
||||
|
||||
|
|
|
|||
|
|
@ -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
233
tests/jit/filter-utilities.test.js
Normal 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(``)
|
||||
})
|
||||
})
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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, /*!*/ /*!*/);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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
231
tests/jit/transform-utilities.test.js
Normal 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(``)
|
||||
})
|
||||
})
|
||||
|
|
@ -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, /*!*/ /*!*/);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue