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

Remove need for transform toggle (#4604)

Browse source
This commit is contained in:
Adam Wathan 2021-06-10 09:15:41 -04:00 • committed by GitHub
parent 6f1d5f03cb
commit b86aa5c2a9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
30 changed files with 430 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/corePlugins.js
View file

@ -1,8 +1,26 @@
import * as plugins from './plugins/index.js'
import configurePlugins from './util/configurePlugins'
function move(items, item, before) {
if (items.indexOf(item) === -1) {
return items
}
items = [...items]
let fromIndex = items.indexOf(item)
let toIndex = items.indexOf(before)
items.splice(fromIndex, 1)
items.splice(toIndex, 0, item)
return items
}
export default function ({ corePlugins: corePluginConfig }) {
return configurePlugins(corePluginConfig, Object.keys(plugins)).map((pluginName) => {
let pluginOrder = Object.keys(plugins)
pluginOrder = configurePlugins(corePluginConfig, pluginOrder)
pluginOrder = move(pluginOrder, 'transform', 'transformOrigin')
return pluginOrder.map((pluginName) => {
return plugins[pluginName]()
})
}

2
src/plugins/index.js
View file

@ -33,12 +33,12 @@ export { default as flexGrow } from './flexGrow'
export { default as tableLayout } from './tableLayout'
export { default as borderCollapse } from './borderCollapse'
export { default as transform } from './transform'
export { default as transformOrigin } from './transformOrigin'
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'

10
src/plugins/rotate.js
View file

@ -1,5 +1,13 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('rotate', [
['rotate', ['--tw-rotate', ['transform', 'var(--tw-transform)']]],
])({ config, ...rest })
} else {
return createUtilityPlugin('rotate', [['rotate', ['--tw-rotate']]])({ config, ...rest })
}
}
}

26
src/plugins/scale.js
View file

@ -1,11 +1,23 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y']],
[
['scale-x', ['--tw-scale-x']],
['scale-y', ['--tw-scale-y']],
],
])
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('scale', [
['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 })
} else {
return createUtilityPlugin('scale', [
['scale', ['--tw-scale-x', '--tw-scale-y']],
[
['scale-x', ['--tw-scale-x']],
['scale-y', ['--tw-scale-y']],
],
])({ config, ...rest })
}
}
}

23
src/plugins/skew.js
View file

@ -1,10 +1,21 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('skew', [
[
['skew-x', ['--tw-skew-x']],
['skew-y', ['--tw-skew-y']],
],
])
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('skew', [
[
['skew-x', ['--tw-skew-x', ['transform', 'var(--tw-transform)']]],
['skew-y', ['--tw-skew-y', ['transform', 'var(--tw-transform)']]],
],
])({ config, ...rest })
} else {
return createUtilityPlugin('skew', [
[
['skew-x', ['--tw-skew-x']],
['skew-y', ['--tw-skew-y']],
],
])({ config, ...rest })
}
}
}

100
src/plugins/transform.js
View file

@ -1,8 +1,8 @@
export default function () {
return function ({ addUtilities, variants }) {
addUtilities(
{
'.transform': {
return function ({ config, addBase, addUtilities, variants }) {
if (config('mode') === 'jit') {
addBase({
'*': {
'--tw-translate-x': '0',
'--tw-translate-y': '0',
'--tw-rotate': '0',
@ -10,7 +10,7 @@ export default function () {
'--tw-skew-y': '0',
'--tw-scale-x': '1',
'--tw-scale-y': '1',
transform: [
'--tw-transform': [
'translateX(var(--tw-translate-x))',
'translateY(var(--tw-translate-y))',
'rotate(var(--tw-rotate))',
@ -20,26 +20,76 @@ export default function () {
'scaleY(var(--tw-scale-y))',
].join(' '),
},
'.transform-gpu': {
'--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',
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))',
].join(' '),
})
addUtilities(
{
'.transform-cpu': {
'--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))',
].join(' '),
},
'.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))',
].join(' '),
},
'.transform-none': { transform: 'none' },
},
'.transform-none': { transform: 'none' },
},
variants('transform')
)
variants('transform')
)
} else {
addUtilities(
{
'.transform': {
'--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',
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))',
].join(' '),
},
'.transform-gpu': {
'--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',
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))',
].join(' '),
},
'.transform-none': { transform: 'none' },
},
variants('transform')
)
}
}
}

23
src/plugins/translate.js
View file

@ -1,10 +1,21 @@
import createUtilityPlugin from '../util/createUtilityPlugin'
export default function () {
return createUtilityPlugin('translate', [
[
['translate-x', ['--tw-translate-x']],
['translate-y', ['--tw-translate-y']],
],
])
return function ({ config, ...rest }) {
if (config('mode') === 'jit') {
return createUtilityPlugin('translate', [
[
['translate-x', ['--tw-translate-x', ['transform', 'var(--tw-transform)']]],
['translate-y', ['--tw-translate-y', ['transform', 'var(--tw-transform)']]],
],
])({ config, ...rest })
} else {
return createUtilityPlugin('translate', [
[
['translate-x', ['--tw-translate-x']],
['translate-y', ['--tw-translate-y']],
],
])({ config, ...rest })
}
}
}

10
src/util/createUtilityPlugin.js
View file

@ -24,10 +24,12 @@ export default function createUtilityPlugin(
group.reduce((obj, [classPrefix, properties]) => {
return Object.assign(obj, {
[classPrefix]: (value) => {
return properties.reduce(
(obj, name) => Object.assign(obj, { [name]: transformValue(value) }),
{}
)
return properties.reduce((obj, name) => {
if (Array.isArray(name)) {
return Object.assign(obj, { [name[0]]: name[1] })
}
return Object.assign(obj, { [name]: transformValue(value) })
}, {})
},
})
}, {}),

12
tests/jit/apply.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

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

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {
@ -137,21 +149,27 @@
}
.rotate-\[23deg\] {
--tw-rotate: 23deg;
transform: var(--tw-transform);
}
.rotate-\[2\.3rad\] {
--tw-rotate: 2.3rad;
transform: var(--tw-transform);
}
.rotate-\[401grad\] {
--tw-rotate: 401grad;
transform: var(--tw-transform);
}
.rotate-\[1\.5turn\] {
--tw-rotate: 1.5turn;
transform: var(--tw-transform);
}
.skew-x-\[3px\] {
--tw-skew-x: 3px;
transform: var(--tw-transform);
}
.skew-y-\[3px\] {
--tw-skew-y: 3px;
transform: var(--tw-transform);
}
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;

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

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {
@ -197,57 +209,49 @@
.border-collapse {
border-collapse: collapse;
}
.transform {
--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;
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-gpu {
--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;
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));
}
.origin-top-right {
transform-origin: top right;
}
.translate-x-5 {
--tw-translate-x: 1.25rem;
transform: var(--tw-transform);
}
.-translate-x-4 {
--tw-translate-x: -1rem;
transform: var(--tw-transform);
}
.translate-y-6 {
--tw-translate-y: 1.5rem;
transform: var(--tw-transform);
}
.-translate-x-3 {
--tw-translate-x: -0.75rem;
transform: var(--tw-transform);
}
.rotate-3 {
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
.skew-y-12 {
--tw-skew-y: 12deg;
transform: var(--tw-transform);
}
.skew-x-12 {
--tw-skew-x: 12deg;
transform: var(--tw-transform);
}
.scale-95 {
--tw-scale-x: 0.95;
--tw-scale-y: 0.95;
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;

2
tests/jit/basic-usage.test.html
View file

@ -130,7 +130,7 @@
<div class="text-opacity-10"></div>
<div class="overflow-ellipsis truncate"></div>
<div class="uppercase"></div>
<div class="transform transform-gpu"></div>
<div class="transform transform-gpu transform-none"></div>
<div class="origin-top-right"></div>
<div class="delay-300"></div>
<div class="duration-200"></div>

12
tests/jit/collapse-adjacent-rules.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

12
tests/jit/custom-extractors.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

5
tests/jit/custom-transformers.test.js
View file

@ -14,8 +14,6 @@ function customTransformer(content) {
}
const css = `
@tailwind base;
@tailwind components;
@tailwind utilities;
`
@ -26,7 +24,6 @@ test('transform function', () => {
content: [{ raw: '<div class="uppercase"></div>' }],
transform: customTransformer,
},
corePlugins: { preflight: false, borderColor: false, ringWidth: false, boxShadow: false },
theme: {},
plugins: [],
}
@ -49,7 +46,6 @@ test('transform.DEFAULT', () => {
DEFAULT: customTransformer,
},
},
corePlugins: { preflight: false, borderColor: false, ringWidth: false, boxShadow: false },
theme: {},
plugins: [],
}
@ -75,7 +71,6 @@ test('transform.{extension}', () => {
html: customTransformer,
},
},
corePlugins: { preflight: false, borderColor: false, ringWidth: false, boxShadow: false },
theme: {},
plugins: [],
}

12
tests/jit/import-syntax.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

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

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

12
tests/jit/important-modifier-prefix.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

12
tests/jit/important-modifier.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

12
tests/jit/important-selector.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

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

@ -126,6 +126,18 @@
}
}
}
* {
--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));
}
*,
::before,
::after {
@ -264,21 +276,10 @@ div {
.mt-6 {
margin-top: 1.5rem;
}
.transform {
--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;
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));
}
.scale-50 {
--tw-scale-x: 0.5;
--tw-scale-y: 0.5;
transform: var(--tw-transform);
}
.grid-cols-\[200px\2c repeat\(auto-fill\2c minmax\(15\%\2c 100px\)\)\2c 300px\] {
grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px;
@ -366,6 +367,7 @@ div {
.hover\:scale-75:hover {
--tw-scale-x: 0.75;
--tw-scale-y: 0.75;
transform: var(--tw-transform);
}
.hover\:font-bold:hover {
font-weight: 700;

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

@ -1,17 +1,3 @@
*,
::before,
::after {
border-color: #e5e7eb;
}
* {
--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;
}
.divide-black > :not([hidden]) ~ :not([hidden]) {
border-color: #000;
}

3
tests/jit/opacity.test.js
View file

@ -13,7 +13,6 @@ test('opacity', () => {
darkMode: 'class',
purge: [path.resolve(__dirname, './opacity.test.html')],
corePlugins: {
preflight: false,
backgroundOpacity: false,
borderOpacity: false,
divideOpacity: false,
@ -25,8 +24,6 @@ test('opacity', () => {
}
let css = `
@tailwind base;
@tailwind components;
@tailwind utilities;
`

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

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

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

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {
@ -197,57 +209,46 @@
.border-collapse {
border-collapse: collapse;
}
.transform {
--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;
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-gpu {
--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;
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));
}
.origin-top-right {
transform-origin: top right;
}
.translate-x-5 {
--tw-translate-x: 1.25rem;
transform: var(--tw-transform);
}
.-translate-x-4 {
--tw-translate-x: -1rem;
transform: var(--tw-transform);
}
.translate-y-6 {
--tw-translate-y: 1.5rem;
transform: var(--tw-transform);
}
.-translate-x-3 {
--tw-translate-x: -0.75rem;
transform: var(--tw-transform);
}
.rotate-3 {
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
.skew-y-12 {
--tw-skew-y: 12deg;
transform: var(--tw-transform);
}
.skew-x-12 {
--tw-skew-x: 12deg;
transform: var(--tw-transform);
}
.scale-95 {
--tw-scale-x: 0.95;
--tw-scale-y: 0.95;
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));
}
.animate-none {
animation: none;

12
tests/jit/raw-content.test.js
View file

@ -71,6 +71,18 @@ test('raw content with extension', () => {
return run(tailwind, css, config).then((result) => {
expect(result.css).toMatchFormattedCss(`
* {
--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));
}
*,
::before,
::after {

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

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {
@ -197,57 +209,46 @@
.border-collapse {
border-collapse: collapse;
}
.transform {
--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;
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-gpu {
--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;
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));
}
.origin-top-right {
transform-origin: top right;
}
.translate-x-5 {
--tw-translate-x: 1.25rem;
transform: var(--tw-transform);
}
.-translate-x-4 {
--tw-translate-x: -1rem;
transform: var(--tw-transform);
}
.translate-y-6 {
--tw-translate-y: 1.5rem;
transform: var(--tw-transform);
}
.-translate-x-3 {
--tw-translate-x: -0.75rem;
transform: var(--tw-transform);
}
.rotate-3 {
--tw-rotate: 3deg;
transform: var(--tw-transform);
}
.skew-y-12 {
--tw-skew-y: 12deg;
transform: var(--tw-transform);
}
.skew-x-12 {
--tw-skew-x: 12deg;
transform: var(--tw-transform);
}
.scale-95 {
--tw-scale-x: 0.95;
--tw-scale-y: 0.95;
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));
}
.animate-none {
animation: none;

12
tests/jit/responsive-and-variants-atrules.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

12
tests/jit/svelte-syntax.test.css
View file

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {

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

@ -1,3 +1,15 @@
* {
--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));
}
*,
::before,
::after {