diff --git a/CHANGELOG.md b/CHANGELOG.md index b4e51d0c17bd..5571321d8c18 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Ensure we can apply classes that are grouped with non-class selectors ([#6922](https://github.com/tailwindlabs/tailwindcss/pull/6922)) - Improve standalone CLI compatibility on Linux by switching to the `linuxstatic` build target ([#6914](https://github.com/tailwindlabs/tailwindcss/pull/6914)) - Ensure `@apply` works consistently with or without `@layer` ([#6938](https://github.com/tailwindlabs/tailwindcss/pull/6938)) +- Only emit defaults when using base layer ([#6906](https://github.com/tailwindlabs/tailwindcss/pull/6906)) +- Emit plugin defaults regardless of usage ([#6906](https://github.com/tailwindlabs/tailwindcss/pull/6906)) +- Move default border color back to preflight ([#6906](https://github.com/tailwindlabs/tailwindcss/pull/6906)) +- Change `experimental.optimizeUniversalDefaults` to only work with `@tailwind base` ([#6906](https://github.com/tailwindlabs/tailwindcss/pull/6906)) ## [3.0.11] - 2022-01-05 diff --git a/src/corePlugins.js b/src/corePlugins.js index 56a1f8edefb9..b5e34c32c73e 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -172,6 +172,39 @@ export let variantPlugins = { }, } +let cssTransformValue = [ + 'translate(var(--tw-translate-x), 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(' ') + +let cssFilterValue = [ + '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)', +].join(' ') + +let cssBackdropFilterValue = [ + '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)', +].join(' ') + export let corePlugins = { preflight: ({ addBase }) => { let preflightStyles = postcss.parse( @@ -467,11 +500,11 @@ export let corePlugins = { [ [ 'translate-x', - [['@defaults transform', {}], '--tw-translate-x', ['transform', 'var(--tw-transform)']], + [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValue]], ], [ 'translate-y', - [['@defaults transform', {}], '--tw-translate-y', ['transform', 'var(--tw-transform)']], + [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValue]], ], ], ], @@ -479,26 +512,15 @@ export let corePlugins = { ), rotate: createUtilityPlugin( 'rotate', - [ - [ - 'rotate', - [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']], - ], - ], + [['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', cssTransformValue]]]], { supportsNegativeValues: true } ), skew: createUtilityPlugin( 'skew', [ [ - [ - 'skew-x', - [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']], - ], - [ - 'skew-y', - [['@defaults transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']], - ], + ['skew-x', [['@defaults transform', {}], '--tw-skew-x', ['transform', cssTransformValue]]], + ['skew-y', [['@defaults transform', {}], '--tw-skew-y', ['transform', cssTransformValue]]], ], ], { supportsNegativeValues: true } @@ -512,17 +534,17 @@ export let corePlugins = { ['@defaults transform', {}], '--tw-scale-x', '--tw-scale-y', - ['transform', 'var(--tw-transform)'], + ['transform', cssTransformValue], ], ], [ [ 'scale-x', - [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']], + [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValue]], ], [ 'scale-y', - [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']], + [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValue]], ], ], ], @@ -538,39 +560,18 @@ export let corePlugins = { '--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))', - ].join(' '), }) addUtilities({ - '.transform': { '@defaults transform': {}, transform: 'var(--tw-transform)' }, + '.transform': { '@defaults transform': {}, transform: cssTransformValue }, '.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: cssTransformValue, }, '.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: cssTransformValue.replace( + 'translate(var(--tw-translate-x), var(--tw-translate-y))', + 'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)' + ), }, '.transform-none': { transform: 'none' }, }) @@ -612,49 +613,50 @@ export let corePlugins = { touchAction: ({ addDefaults, addUtilities }) => { addDefaults('touch-action', { - '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', + '--tw-pan-x': ' ', + '--tw-pan-y': ' ', + '--tw-pinch-zoom': ' ', }) + let cssTouchActionValue = 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)' + addUtilities({ '.touch-auto': { 'touch-action': 'auto' }, '.touch-none': { 'touch-action': 'none' }, '.touch-pan-x': { '@defaults touch-action': {}, '--tw-pan-x': 'pan-x', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-left': { '@defaults touch-action': {}, '--tw-pan-x': 'pan-left', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-right': { '@defaults touch-action': {}, '--tw-pan-x': 'pan-right', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-y': { '@defaults touch-action': {}, '--tw-pan-y': 'pan-y', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-up': { '@defaults touch-action': {}, '--tw-pan-y': 'pan-up', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-down': { '@defaults touch-action': {}, '--tw-pan-y': 'pan-down', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pinch-zoom': { '@defaults touch-action': {}, '--tw-pinch-zoom': 'pinch-zoom', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-manipulation': { 'touch-action': 'manipulation' }, }) @@ -1177,23 +1179,7 @@ export let corePlugins = { }) }, - borderColor: ({ addDefaults, matchUtilities, theme, corePlugins }) => { - if (!corePlugins('borderOpacity')) { - let value = theme('borderColor.DEFAULT', 'currentColor') - addDefaults('border-width', { - 'border-color': toColorValue(value), - }) - } else { - addDefaults( - 'border-width', - withAlphaVariable({ - color: theme('borderColor.DEFAULT', 'currentColor'), - property: 'border-color', - variable: '--tw-border-opacity', - }) - ) - } - + borderColor: ({ matchUtilities, theme, corePlugins }) => { matchUtilities( { border: (value) => { @@ -1571,57 +1557,59 @@ export let corePlugins = { }) }, - fontVariantNumeric: ({ addUtilities }) => { + fontVariantNumeric: ({ addDefaults, addUtilities }) => { + let cssFontVariantNumericValue = + 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)' + + addDefaults('font-variant-numeric', { + '--tw-ordinal': ' ', + '--tw-slashed-zero': ' ', + '--tw-numeric-figure': ' ', + '--tw-numeric-spacing': ' ', + '--tw-numeric-fraction': ' ', + }) + addUtilities({ - '@defaults font-variant-numeric': { - '--tw-ordinal': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-slashed-zero': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-numeric-figure': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-numeric-spacing': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-numeric-fraction': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-font-variant-numeric': - 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction)', - }, '.normal-nums': { 'font-variant-numeric': 'normal' }, '.ordinal': { '@defaults font-variant-numeric': {}, '--tw-ordinal': 'ordinal', - 'font-variant-numeric': 'var(--tw-font-variant-numeric)', + 'font-variant-numeric': cssFontVariantNumericValue, }, '.slashed-zero': { '@defaults font-variant-numeric': {}, '--tw-slashed-zero': 'slashed-zero', - 'font-variant-numeric': 'var(--tw-font-variant-numeric)', + 'font-variant-numeric': cssFontVariantNumericValue, }, '.lining-nums': { '@defaults font-variant-numeric': {}, '--tw-numeric-figure': 'lining-nums', - 'font-variant-numeric': 'var(--tw-font-variant-numeric)', + 'font-variant-numeric': cssFontVariantNumericValue, }, '.oldstyle-nums': { '@defaults font-variant-numeric': {}, '--tw-numeric-figure': 'oldstyle-nums', - 'font-variant-numeric': 'var(--tw-font-variant-numeric)', + 'font-variant-numeric': cssFontVariantNumericValue, }, '.proportional-nums': { '@defaults font-variant-numeric': {}, '--tw-numeric-spacing': 'proportional-nums', - 'font-variant-numeric': 'var(--tw-font-variant-numeric)', + 'font-variant-numeric': cssFontVariantNumericValue, }, '.tabular-nums': { '@defaults font-variant-numeric': {}, '--tw-numeric-spacing': 'tabular-nums', - 'font-variant-numeric': 'var(--tw-font-variant-numeric)', + 'font-variant-numeric': cssFontVariantNumericValue, }, '.diagonal-fractions': { '@defaults font-variant-numeric': {}, '--tw-numeric-fraction': 'diagonal-fractions', - 'font-variant-numeric': 'var(--tw-font-variant-numeric)', + 'font-variant-numeric': cssFontVariantNumericValue, }, '.stacked-fractions': { '@defaults font-variant-numeric': {}, '--tw-numeric-fraction': 'stacked-fractions', - 'font-variant-numeric': 'var(--tw-font-variant-numeric)', + 'font-variant-numeric': cssFontVariantNumericValue, }, }) }, @@ -1909,7 +1897,7 @@ export let corePlugins = { ) addDefaults('ring-width', { - '--tw-ring-inset': 'var(--tw-empty,/*!*/ /*!*/)', + '--tw-ring-inset': ' ', '--tw-ring-offset-width': theme('ringOffsetWidth.DEFAULT', '0px'), '--tw-ring-offset-color': theme('ringOffsetColor.DEFAULT', '#fff'), '--tw-ring-color': ringColorDefault, @@ -1993,7 +1981,7 @@ export let corePlugins = { return { '--tw-blur': `blur(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2008,7 +1996,7 @@ export let corePlugins = { return { '--tw-brightness': `brightness(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2023,7 +2011,7 @@ export let corePlugins = { return { '--tw-contrast': `contrast(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2040,7 +2028,7 @@ export let corePlugins = { ? value.map((v) => `drop-shadow(${v})`).join(' ') : `drop-shadow(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2055,7 +2043,7 @@ export let corePlugins = { return { '--tw-grayscale': `grayscale(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2070,7 +2058,7 @@ export let corePlugins = { return { '--tw-hue-rotate': `hue-rotate(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2085,7 +2073,7 @@ export let corePlugins = { return { '--tw-invert': `invert(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2100,7 +2088,7 @@ export let corePlugins = { return { '--tw-saturate': `saturate(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2115,7 +2103,7 @@ export let corePlugins = { return { '--tw-sepia': `sepia(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2125,29 +2113,18 @@ export let corePlugins = { filter: ({ addDefaults, addUtilities }) => { addDefaults('filter', { - '--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)', - ].join(' '), - }) - addUtilities({ - '.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' }, + '--tw-blur': ' ', + '--tw-brightness': ' ', + '--tw-contrast': ' ', + '--tw-grayscale': ' ', + '--tw-hue-rotate': ' ', + '--tw-invert': ' ', + '--tw-saturate': ' ', + '--tw-sepia': ' ', + '--tw-drop-shadow': ' ', + }) + addUtilities({ + '.filter': { '@defaults filter': {}, filter: cssFilterValue }, '.filter-none': { filter: 'none' }, }) }, @@ -2159,7 +2136,7 @@ export let corePlugins = { return { '--tw-backdrop-blur': `blur(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2174,7 +2151,7 @@ export let corePlugins = { return { '--tw-backdrop-brightness': `brightness(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2189,7 +2166,7 @@ export let corePlugins = { return { '--tw-backdrop-contrast': `contrast(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2204,7 +2181,7 @@ export let corePlugins = { return { '--tw-backdrop-grayscale': `grayscale(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2219,7 +2196,7 @@ export let corePlugins = { return { '--tw-backdrop-hue-rotate': `hue-rotate(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2234,7 +2211,7 @@ export let corePlugins = { return { '--tw-backdrop-invert': `invert(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2249,7 +2226,7 @@ export let corePlugins = { return { '--tw-backdrop-opacity': `opacity(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2264,7 +2241,7 @@ export let corePlugins = { return { '--tw-backdrop-saturate': `saturate(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2279,7 +2256,7 @@ export let corePlugins = { return { '--tw-backdrop-sepia': `sepia(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2289,31 +2266,20 @@ export let corePlugins = { backdropFilter: ({ addDefaults, addUtilities }) => { addDefaults('backdrop-filter', { - '--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)', - ].join(' '), + '--tw-backdrop-blur': ' ', + '--tw-backdrop-brightness': ' ', + '--tw-backdrop-contrast': ' ', + '--tw-backdrop-grayscale': ' ', + '--tw-backdrop-hue-rotate': ' ', + '--tw-backdrop-invert': ' ', + '--tw-backdrop-opacity': ' ', + '--tw-backdrop-saturate': ' ', + '--tw-backdrop-sepia': ' ', }) addUtilities({ '.backdrop-filter': { '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, }, '.backdrop-filter-none': { 'backdrop-filter': 'none' }, }) diff --git a/src/css/preflight.css b/src/css/preflight.css index e39110866301..c15a3f2da831 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -9,7 +9,7 @@ box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ - border-color: currentColor; /* 2 */ + border-color: theme('borderColor.DEFAULT', 'currentColor'); /* 2 */ } ::before, diff --git a/src/featureFlags.js b/src/featureFlags.js index b978c2526d61..109186b9065b 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -2,11 +2,7 @@ import chalk from 'chalk' import log from './util/log' let defaults = { - // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being - // the default. - optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false, - - // optimizeUniversalDefaults: true + optimizeUniversalDefaults: false, } let featureFlags = { diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index ef06c2eae4ba..2c9469f3099a 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -129,8 +129,6 @@ function buildStylesheet(rules, context) { return returnValue } -export const DEFAULTS_LAYER = Symbol('defaults-layer') - export default function expandTailwindAtRules(context) { return (root) => { let layerNodes = { @@ -140,8 +138,6 @@ export default function expandTailwindAtRules(context) { variants: null, } - // let hasApply = false - root.walkAtRules((rule) => { // Make sure this file contains Tailwind directives. If not, we can save // a lot of work and bail early. Also we don't have to register our touch @@ -152,13 +148,6 @@ export default function expandTailwindAtRules(context) { layerNodes[rule.params] = rule } } - - // We also want to check for @apply because the user can - // apply classes in an isolated environment like CSS - // modules and we still need to inject defaults - // if (rule.name === 'apply') { - // hasApply = true - // } }) if (Object.values(layerNodes).every((n) => n === null)) { @@ -214,18 +203,7 @@ export default function expandTailwindAtRules(context) { // Replace any Tailwind directives with generated CSS if (layerNodes.base) { - layerNodes.base.before(cloneNodes([...baseNodes], layerNodes.base.source)) - } - - // @defaults rules are unconditionally added first to ensure that - // using any utility that relies on defaults will work even when - // compiled in an isolated environment like CSS modules - if (context.tailwindConfig[DEFAULTS_LAYER] !== false) { - if (layerNodes.base) { - layerNodes.base.after(cloneNodes([...defaultNodes], root.source)) - } else { - root.prepend(cloneNodes([...defaultNodes], root.source)) - } + layerNodes.base.before(cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source)) } if (layerNodes.base) { diff --git a/src/lib/resolveDefaultsAtRules.js b/src/lib/resolveDefaultsAtRules.js index a02df8e907f3..48a8378badb7 100644 --- a/src/lib/resolveDefaultsAtRules.js +++ b/src/lib/resolveDefaultsAtRules.js @@ -113,12 +113,12 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) { } } - if (selectorGroups.size === 0) { - universal.remove() - continue - } - if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) { + if (selectorGroups.size === 0) { + universal.remove() + continue + } + for (let [, selectors] of selectorGroups) { let universalRule = postcss.rule() diff --git a/tests/apply.test.css b/tests/apply.test.css index 4be1b2c78f62..6d2aced36331 100644 --- a/tests/apply.test.css +++ b/tests/apply.test.css @@ -125,7 +125,7 @@ .complex-utilities { --tw-ordinal: ordinal; --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); @@ -141,7 +141,7 @@ } .complex-utilities:focus { --tw-numeric-fraction: diagonal-fractions; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .use-base-only-a { font-weight: 700; @@ -305,15 +305,6 @@ h2 { .important-modifier-variant:hover { border-radius: 0.375rem !important; } -.complex-utilities { - --tw-ordinal: var(--tw-empty, /*!*/ /*!*/); - --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/); - --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} @keyframes spin { to { transform: rotate(360deg); diff --git a/tests/apply.test.js b/tests/apply.test.js index da2cf0ba815c..00a492adc894 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -1,8 +1,7 @@ import fs from 'fs' import path from 'path' -// import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules.js' -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('@apply', () => { let config = { @@ -419,7 +418,9 @@ it('should remove duplicate properties when using apply with similar properties' left: 50%; --tw-translate-x: -50%; --tw-translate-y: -50%; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -633,14 +634,6 @@ it('rules with vendor prefixes are still separate when optimizing defaults rules return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - [type='range']::-moz-range-thumb { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - } - .border { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - } input[type='range']::-moz-range-thumb { border-width: 1px; } @@ -1094,10 +1087,8 @@ describe('multiple instances', () => { }) }) -/* it('apply can emit defaults in isolated environments without @tailwind directives', () => { let config = { - [DEFAULTS_LAYER]: true, experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], @@ -1111,23 +1102,40 @@ it('apply can emit defaults in isolated environments without @tailwind directive return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - .foo { - --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)); + .foo:focus { + --tw-rotate: 90deg; + transform: translate(var(--tw-translate-x), 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)); } + `) + }) +}) + +it('apply does not emit defaults in isolated environments without optimizeUniversalDefaults', () => { + let config = { + experimental: { optimizeUniversalDefaults: false }, + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + + .foo { + @apply focus:rotate-90; + } + ` + + return run(input, config).then((result) => { + return expect(result.css).toMatchFormattedCss(css` + ${defaults} .foo:focus { --tw-rotate: 90deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) }) -*/ diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js index 3b76cbe34c3f..e97ea7c84cfb 100644 --- a/tests/arbitrary-properties.test.js +++ b/tests/arbitrary-properties.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('basic arbitrary properties', () => { let config = { @@ -18,6 +18,8 @@ test('basic arbitrary properties', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + .\[paint-order\:markers\] { paint-order: markers; } @@ -43,6 +45,8 @@ test('arbitrary properties with modifiers', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + @media (prefers-color-scheme: dark) { @media (min-width: 1024px) { .dark\:lg\:hover\:\[paint-order\:markers\]:hover { @@ -72,6 +76,8 @@ test('arbitrary properties are sorted after utilities', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + .content-none { --tw-content: none; content: var(--tw-content); @@ -104,6 +110,8 @@ test('using CSS variables', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + .\[--my-var\:auto\] { --my-var: auto; } @@ -129,6 +137,8 @@ test('using underscores as spaces', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + .\[--my-var\:2px_4px\] { --my-var: 2px 4px; } @@ -154,6 +164,8 @@ test('using the important modifier', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + .\!\[--my-var\:2px_4px\] { --my-var: 2px 4px !important; } @@ -179,6 +191,8 @@ test('colons are allowed in quotes', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + .\[content\:\'foo\:bar\'\] { content: 'foo:bar'; } @@ -204,6 +218,8 @@ test('colons are allowed in braces', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + .\[background-image\:url\(http\:\/\/example\.com\/picture\.jpg\)\] { background-image: url(http://example.com/picture.jpg); } @@ -228,7 +244,9 @@ test('invalid class', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css``) + expect(result.css).toMatchFormattedCss(css` + ${defaults} + `) }) }) @@ -249,7 +267,9 @@ test('invalid arbitrary property', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css``) + expect(result.css).toMatchFormattedCss(css` + ${defaults} + `) }) }) @@ -270,7 +290,9 @@ test('invalid arbitrary property 2', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css``) + expect(result.css).toMatchFormattedCss(css` + ${defaults} + `) }) }) @@ -288,6 +310,8 @@ it('should be possible to read theme values in arbitrary properties (without quo return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} + .\[--a\:theme\(colors\.blue\.500\)\] { --a: #3b82f6; } @@ -312,6 +336,8 @@ it('should be possible to read theme values in arbitrary properties (with quotes return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} + .\[--a\:theme\(\'colors\.blue\.500\'\)\] { --a: #3b82f6; } diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 47a311ef86dd..c7a88df35b34 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -232,77 +232,77 @@ } .translate-x-\[12\%\] { --tw-translate-x: 12%; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-\[var\(--value\)\] { --tw-translate-x: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-y-\[12\%\] { --tw-translate-y: 12%; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-y-\[var\(--value\)\] { --tw-translate-y: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .rotate-\[23deg\] { --tw-rotate: 23deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .rotate-\[2\.3rad\] { --tw-rotate: 2.3rad; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .rotate-\[401grad\] { --tw-rotate: 401grad; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .rotate-\[1\.5turn\] { --tw-rotate: 1.5turn; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .skew-x-\[3px\] { --tw-skew-x: 3px; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .skew-x-\[var\(--value\)\] { --tw-skew-x: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .skew-y-\[3px\] { --tw-skew-y: 3px; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .skew-y-\[var\(--value\)\] { --tw-skew-y: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-\[0\.7\] { --tw-scale-x: 0.7; --tw-scale-y: 0.7; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-\[var\(--value\)\] { --tw-scale-x: var(--value); --tw-scale-y: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-x-\[0\.7\] { --tw-scale-x: 0.7; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-x-\[var\(--value\)\] { --tw-scale-x: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-y-\[0\.7\] { --tw-scale-y: 0.7; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-y-\[var\(--value\)\] { --tw-scale-y: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .animate-\[pong_1s_cubic-bezier\(0\2c 0\2c 0\.2\2c 1\)_infinite\] { animation: pong 1s cubic-bezier(0, 0, 0.2, 1) infinite; @@ -939,75 +939,75 @@ } .blur-\[15px\] { --tw-blur: blur(15px); - filter: var(--tw-filter); + 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-\[300\%\] { --tw-brightness: brightness(300%); - filter: var(--tw-filter); + 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); } .contrast-\[2\.4\] { --tw-contrast: contrast(2.4); - filter: var(--tw-filter); + 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); } .drop-shadow-\[0px_1px_2px_black\] { --tw-drop-shadow: drop-shadow(0px 1px 2px black); - filter: var(--tw-filter); + 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); } .grayscale-\[0\.55\] { --tw-grayscale: grayscale(0.55); - filter: var(--tw-filter); + 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); } .hue-rotate-\[0\.8turn\] { --tw-hue-rotate: hue-rotate(0.8turn); - filter: var(--tw-filter); + 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); } .invert-\[0\.75\] { --tw-invert: invert(0.75); - filter: var(--tw-filter); + 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); } .saturate-\[180\%\] { --tw-saturate: saturate(180%); - filter: var(--tw-filter); + 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); } .sepia-\[0\.2\] { --tw-sepia: sepia(0.2); - filter: var(--tw-filter); + 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); } .backdrop-blur-\[11px\] { --tw-backdrop-blur: blur(11px); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-brightness-\[1\.23\] { --tw-backdrop-brightness: brightness(1.23); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-contrast-\[0\.87\] { --tw-backdrop-contrast: contrast(0.87); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-grayscale-\[0\.42\] { --tw-backdrop-grayscale: grayscale(0.42); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-hue-rotate-\[1\.57rad\] { --tw-backdrop-hue-rotate: hue-rotate(1.57rad); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-invert-\[0\.66\] { --tw-backdrop-invert: invert(0.66); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-opacity-\[22\%\] { --tw-backdrop-opacity: opacity(22%); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-saturate-\[144\%\] { --tw-backdrop-saturate: saturate(144%); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-sepia-\[0\.38\] { --tw-backdrop-sepia: sepia(0.38); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .transition-\[opacity\2c width\] { transition-property: opacity, width; diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 26c51defa76b..f0cfc8a47ed2 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -213,7 +213,9 @@ it('should convert _ to spaces', () => { .drop-shadow-\\[0px_1px_3px_black\\] { --tw-drop-shadow: drop-shadow(0px 1px 3px black); - filter: var(--tw-filter); + 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); } .content-\\[_hello_world_\\] { diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index a8132d56f75d..0059eece2206 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -1,13 +1,6 @@ -.translate-x-5, -.-translate-x-4, -.translate-y-6, -.-translate-x-3, -.rotate-3, -.skew-y-12, -.skew-x-12, -.scale-95, -.-scale-x-100, -.transform { +*, +::before, +::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -15,51 +8,16 @@ --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)); -} - -.touch-pan-x, -.touch-pan-y, -.touch-pan-up, -.touch-pinch-zoom { - --tw-pan-x: var(--tw-empty, /*!*/ /*!*/); - --tw-pan-y: var(--tw-empty, /*!*/ /*!*/); - --tw-pinch-zoom: var(--tw-empty, /*!*/ /*!*/); - --tw-touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); -} - -.snap-x { + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; -} - -.divide-x-2 > *, -.divide-y-4 > *, -.divide-x-0 > *, -.divide-y-0 > *, -.border, -.border-2, -.border-x-4, -.border-y-4, -.border-t, -.border-b-4 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); -} - -.shadow, -.shadow-md, -.shadow-lg { - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; -} - -.ring, -.ring-4 { - --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -67,54 +25,24 @@ --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; -} - -.blur-md, -.brightness-150, -.contrast-50, -.drop-shadow-md, -.grayscale, -.hue-rotate-60, -.invert, -.saturate-200, -.sepia, -.filter { - --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); -} - -.backdrop-blur-lg, -.backdrop-brightness-50, -.backdrop-contrast-0, -.backdrop-grayscale, -.backdrop-hue-rotate-90, -.backdrop-invert, -.backdrop-opacity-75, -.backdrop-saturate-150, -.backdrop-sepia, -.backdrop-filter { - --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); + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .container { width: 100%; @@ -329,46 +257,46 @@ } .translate-x-5 { --tw-translate-x: 1.25rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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); + transform: translate(var(--tw-translate-x),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-y-6 { --tw-translate-y: 1.5rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-3 { --tw-translate-x: -0.75rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .rotate-3 { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .skew-y-12 { --tw-skew-y: 12deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .skew-x-12 { --tw-skew-x: 12deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-x-100 { --tw-scale-x: -1; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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); + transform: translate(var(--tw-translate-x),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-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) + 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)); } @@ -391,19 +319,19 @@ } .touch-pan-x { --tw-pan-x: pan-x; - touch-action: var(--tw-touch-action); + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .touch-pan-y { --tw-pan-y: pan-y; - touch-action: var(--tw-touch-action); + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .touch-pan-up { --tw-pan-y: pan-up; - touch-action: var(--tw-touch-action); + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .touch-pinch-zoom { --tw-pinch-zoom: pinch-zoom; - touch-action: var(--tw-touch-action); + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } .touch-manipulation { touch-action: manipulation; @@ -765,28 +693,17 @@ .not-italic { font-style: normal; } -.ordinal, -.tabular-nums, -.diagonal-fractions { - --tw-ordinal: var(--tw-empty, /*!*/ /*!*/); - --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/); - --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} .ordinal { --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .tabular-nums { --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-relaxed { line-height: 1.625; @@ -936,85 +853,85 @@ } .blur-md { --tw-blur: blur(12px); - filter: var(--tw-filter); + 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); + 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); } .contrast-50 { --tw-contrast: contrast(0.5); - filter: var(--tw-filter); + 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); } .drop-shadow-md { --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); - filter: var(--tw-filter); + 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); } .grayscale { --tw-grayscale: grayscale(100%); - filter: var(--tw-filter); + 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); } .hue-rotate-60 { --tw-hue-rotate: hue-rotate(60deg); - filter: var(--tw-filter); + 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); } .invert { --tw-invert: invert(100%); - filter: var(--tw-filter); + 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); } .saturate-200 { --tw-saturate: saturate(2); - filter: var(--tw-filter); + 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); } .sepia { --tw-sepia: sepia(100%); - filter: var(--tw-filter); + 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); + 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; } .backdrop-blur-lg { --tw-backdrop-blur: blur(16px); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(0.5); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-contrast-0 { --tw-backdrop-contrast: contrast(0); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-hue-rotate-90 { --tw-backdrop-hue-rotate: hue-rotate(90deg); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-invert { --tw-backdrop-invert: invert(100%); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-opacity-75 { --tw-backdrop-opacity: opacity(0.75); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-saturate-150 { --tw-backdrop-saturate: saturate(1.5); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-sepia { --tw-backdrop-sepia: sepia(100%); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-filter { - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-filter-none { backdrop-filter: none; diff --git a/tests/collapse-adjacent-rules.test.css b/tests/collapse-adjacent-rules.test.css index e671284e1bed..2481c3dd7a42 100644 --- a/tests/collapse-adjacent-rules.test.css +++ b/tests/collapse-adjacent-rules.test.css @@ -7,6 +7,52 @@ src: url('/fonts/ProximaNova.woff2') format('woff2'), url('/fonts/ProximaNova.woff') format('woff'); } +*, +::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} @font-face { font-family: 'Inter'; src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff'); diff --git a/tests/combined-selectors.test.js b/tests/combined-selectors.test.js index 8a231ed3a87e..585bea11ee34 100644 --- a/tests/combined-selectors.test.js +++ b/tests/combined-selectors.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' it('should generate the partial selector, if only a partial is used (base layer)', () => { let config = { @@ -35,6 +35,8 @@ it('should generate the partial selector, if only a partial is used (base layer) .a { color: black; } + + ${defaults} `) }) }) diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index 0b1b0860fb07..c3e7a3916cd9 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -1,5 +1,5 @@ import createPlugin from '../src/public/create-plugin' -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('plugins can create utilities with object syntax', () => { let config = { @@ -245,6 +245,8 @@ test('plugins can add base styles with object syntax', () => { button { font-family: inherit; } + + ${defaults} `) }) }) @@ -285,6 +287,7 @@ test('plugins can add base styles with raw PostCSS nodes', () => { button { font-family: inherit; } + ${defaults} `) }) }) diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index 940339152ab9..47a5aaef34bc 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' it('should be possible to use the darkMode "class" mode', () => { let config = { @@ -15,6 +15,7 @@ it('should be possible to use the darkMode "class" mode', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .dark .dark\:font-bold { font-weight: 700; } @@ -37,6 +38,7 @@ it('should be possible to use the darkMode "media" mode', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @media (prefers-color-scheme: dark) { .dark\:font-bold { font-weight: 700; @@ -60,6 +62,8 @@ it('should default to the `media` mode when no mode is provided', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + @media (prefers-color-scheme: dark) { .dark\:font-bold { font-weight: 700; @@ -84,6 +88,8 @@ it('should default to the `media` mode when mode is set to `false`', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + @media (prefers-color-scheme: dark) { .dark\:font-bold { font-weight: 700; diff --git a/tests/experimental.test.js b/tests/experimental.test.js index ec80ee298eba..655bb84f8cd0 100644 --- a/tests/experimental.test.js +++ b/tests/experimental.test.js @@ -122,11 +122,6 @@ test('experimental universal selector improvements (child selectors: divide-y)', return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .divide-y > * { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - } - .resize { resize: both; } @@ -154,11 +149,6 @@ test('experimental universal selector improvements (hover:divide-y)', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .hover\:divide-y > * { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - } - .resize { resize: both; } @@ -187,11 +177,6 @@ test('experimental universal selector improvements (#app important)', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .divide-y > * { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - } - .shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; diff --git a/tests/import-syntax.test.css b/tests/import-syntax.test.css index 66ac9568cf40..7c690fded0d0 100644 --- a/tests/import-syntax.test.css +++ b/tests/import-syntax.test.css @@ -1,6 +1,52 @@ h1 { font-size: 32px; } +*, +::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .container { width: 100%; } diff --git a/tests/important-boolean.test.css b/tests/important-boolean.test.css index 49f6bfb64419..ed4b99df5f71 100644 --- a/tests/important-boolean.test.css +++ b/tests/important-boolean.test.css @@ -1,3 +1,49 @@ +*, +::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .container { width: 100%; } diff --git a/tests/important-modifier-prefix.test.css b/tests/important-modifier-prefix.test.css index 17096025b112..0cb8249fb5a8 100644 --- a/tests/important-modifier-prefix.test.css +++ b/tests/important-modifier-prefix.test.css @@ -1,3 +1,49 @@ +*, +::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .\!tw-container { width: 100% !important; } diff --git a/tests/important-modifier.test.css b/tests/important-modifier.test.css index 11eef31f2f8f..ab770caefd66 100644 --- a/tests/important-modifier.test.css +++ b/tests/important-modifier.test.css @@ -1,3 +1,49 @@ +*, +::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .\!container { width: 100% !important; } diff --git a/tests/important-selector.test.css b/tests/important-selector.test.css index d5ddedb6e97a..7bfef7e66dad 100644 --- a/tests/important-selector.test.css +++ b/tests/important-selector.test.css @@ -1,3 +1,49 @@ +*, +::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .container { width: 100%; } diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index 643264f26ac4..024106246f46 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -136,9 +136,9 @@ h1:first-child { div { background: #654321; } -.scale-50, -.transform, -.hover\:scale-75 { +*, +::before, +::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -146,23 +146,16 @@ div { --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)); -} - -.shadow-sm, -.shadow-md, -.hover\:shadow-lg, -.md\:shadow-sm { - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; -} - -.focus\:ring-2 { - --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -170,6 +163,24 @@ div { --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .container { width: 100%; @@ -202,7 +213,7 @@ div { .test-apply-font-variant { --tw-ordinal: ordinal; --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .custom-component { background: #123456; @@ -221,10 +232,10 @@ div { .scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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); + transform: translate(var(--tw-translate-x),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)); } .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; @@ -256,16 +267,6 @@ div { .font-medium { font-weight: 500; } -.test-apply-font-variant, -.sm\:tabular-nums { - --tw-ordinal: var(--tw-empty, /*!*/ /*!*/); - --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/); - --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); @@ -326,7 +327,7 @@ div { .hover\:scale-75:hover { --tw-scale-x: 0.75; --tw-scale-y: 0.75; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .hover\:font-bold:hover { font-weight: 700; @@ -432,7 +433,7 @@ div { } .sm\:tabular-nums { --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .sm\:custom-util { background: #abcdef; diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index 6a48012062d7..547c81fa06d4 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('custom user-land utilities', () => { let config = { @@ -34,6 +34,8 @@ test('custom user-land utilities', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} + .uppercase { text-transform: uppercase; } @@ -96,6 +98,8 @@ test('comments can be used inside layers without crashing', () => { background-color: #bada55; } + ${defaults} + /* Important component */ .important-component { text-align: banana; @@ -156,6 +160,8 @@ test('comments can be used inside layers (with important) without crashing', () background-color: #bada55; } + ${defaults} + /* Important component */ .important-component { text-align: banana; @@ -267,6 +273,8 @@ test('layers are grouped and inserted at the matching @tailwind rule', () => { font-weight: normal; } + ${defaults} + .input { background: white; } diff --git a/tests/match-components.test.js b/tests/match-components.test.js index 35a932ae7958..04ec0ee63565 100644 --- a/tests/match-components.test.js +++ b/tests/match-components.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' it('should be possible to matchComponents', () => { let config = { @@ -41,12 +41,7 @@ it('should be possible to matchComponents', () => { return run('@tailwind base; @tailwind components; @tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - .shadow { - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - } + ${defaults} .card-\[\#0088cc\] { color: #0088cc; diff --git a/tests/negated-content.test.js b/tests/negated-content.test.js index e949c48a8ae7..6d46e3a8d231 100644 --- a/tests/negated-content.test.js +++ b/tests/negated-content.test.js @@ -1,5 +1,5 @@ import * as path from 'path' -import { run, css } from './util/run' +import { run, css, defaults } from './util/run' it('should be possible to use negated content patterns', () => { let config = { @@ -18,6 +18,7 @@ it('should be possible to use negated content patterns', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .uppercase { text-transform: uppercase; } diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index 00735f8cd95e..08ad34146f52 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -8,9 +8,51 @@ it('should add the divide styles for divide-y and a default border color', () => return run('@tailwind base; @tailwind utilities;', config).then((result) => { expect(result.css).toMatchCss(css` - .divide-y > * { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + *, + ::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .divide-y > :not([hidden]) ~ :not([hidden]) { @@ -30,9 +72,51 @@ it('should add the divide styles for divide-x and a default border color', () => return run('@tailwind base; @tailwind utilities;', config).then((result) => { expect(result.css).toMatchCss(css` - .divide-x > * { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + *, + ::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .divide-x > :not([hidden]) ~ :not([hidden]) { @@ -52,9 +136,51 @@ it('should add the divide styles for divide-y-reverse and a default border color return run('@tailwind base; @tailwind utilities;', config).then((result) => { expect(result.css).toMatchCss(css` - .divide-y-reverse > * { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + *, + ::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .divide-y-reverse > :not([hidden]) ~ :not([hidden]) { @@ -72,9 +198,51 @@ it('should add the divide styles for divide-x-reverse and a default border color return run('@tailwind base; @tailwind utilities;', config).then((result) => { expect(result.css).toMatchCss(css` - .divide-x-reverse > * { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + *, + ::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .divide-x-reverse > :not([hidden]) ~ :not([hidden]) { @@ -92,10 +260,51 @@ it('should only inject the base styles once if we use divide and border at the s return run('@tailwind base; @tailwind utilities;', config).then((result) => { expect(result.css).toMatchCss(css` - .divide-y > *, - .border-r { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + *, + ::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .divide-y > :not([hidden]) ~ :not([hidden]) { diff --git a/tests/prefix.test.css b/tests/prefix.test.css index 2575134af8e1..b2a66f6fe05f 100644 --- a/tests/prefix.test.css +++ b/tests/prefix.test.css @@ -1,3 +1,49 @@ +*, +::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .tw-container { width: 100%; } diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 957893015cac..4ab5326f646f 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -187,42 +187,42 @@ } .translate-x-5 { --tw-translate-x: 1.25rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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); + transform: translate(var(--tw-translate-x),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-y-6 { --tw-translate-y: 1.5rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-3 { --tw-translate-x: -0.75rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .rotate-3 { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .skew-y-12 { --tw-skew-y: 12deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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)); } .skew-x-12 { --tw-skew-x: 12deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),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); + transform: translate(var(--tw-translate-x),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-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) + 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)); } @@ -512,28 +512,17 @@ .not-italic { font-style: normal; } -.ordinal, -.tabular-nums, -.diagonal-fractions { - --tw-ordinal: var(--tw-empty, /*!*/ /*!*/); - --tw-slashed-zero: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-figure: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-spacing: var(--tw-empty, /*!*/ /*!*/); - --tw-numeric-fraction: var(--tw-empty, /*!*/ /*!*/); - --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} .ordinal { --tw-ordinal: ordinal; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .tabular-nums { --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .diagonal-fractions { --tw-numeric-fraction: diagonal-fractions; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-relaxed { line-height: 1.625; @@ -628,85 +617,85 @@ } .blur-md { --tw-blur: blur(12px); - filter: var(--tw-filter); + 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); + 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); } .contrast-50 { --tw-contrast: contrast(0.5); - filter: var(--tw-filter); + 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); } .drop-shadow-md { --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); - filter: var(--tw-filter); + 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); } .grayscale { --tw-grayscale: grayscale(100%); - filter: var(--tw-filter); + 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); } .hue-rotate-60 { --tw-hue-rotate: hue-rotate(60deg); - filter: var(--tw-filter); + 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); } .invert { --tw-invert: invert(100%); - filter: var(--tw-filter); + 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); } .saturate-200 { --tw-saturate: saturate(2); - filter: var(--tw-filter); + 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); } .sepia { --tw-sepia: sepia(100%); - filter: var(--tw-filter); + 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); + 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; } .backdrop-blur-lg { --tw-backdrop-blur: blur(16px); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(0.5); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-contrast-0 { --tw-backdrop-contrast: contrast(0); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-hue-rotate-90 { --tw-backdrop-hue-rotate: hue-rotate(90deg); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-invert { --tw-backdrop-invert: invert(100%); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-opacity-75 { --tw-backdrop-opacity: opacity(0.75); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-saturate-150 { --tw-backdrop-saturate: saturate(1.5); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-sepia { --tw-backdrop-sepia: sepia(100%); - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-filter { - backdrop-filter: var(--tw-backdrop-filter); + 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); } .backdrop-filter-none { backdrop-filter: none; diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index ee8b68d023a8..6adf398059d9 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -1,5 +1,4 @@ import { run, html, css } from './util/run' -import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules' test('basic utilities', async () => { let config = { @@ -15,9 +14,9 @@ test('basic utilities', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .rotate-3, - .skew-y-6, - .scale-x-110 { + *, + ::before, + ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -25,22 +24,26 @@ test('basic utilities', async () => { --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)); } + /* --- */ .rotate-3 { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .skew-y-6 { --tw-skew-y: 6deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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-x-110 { --tw-scale-x: 1.1; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -62,9 +65,9 @@ test('with pseudo-class variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .hover\:scale-x-110, - .focus\:rotate-3, - .hover\:focus\:skew-y-6 { + *, + ::before, + ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -72,22 +75,26 @@ test('with pseudo-class variants', async () => { --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)); } + /* --- */ .hover\:scale-x-110:hover { --tw-scale-x: 1.1; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .focus\:rotate-3:focus { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .hover\:focus\:skew-y-6:focus:hover { --tw-skew-y: 6deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -107,8 +114,9 @@ test('with pseudo-element variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .before\:scale-x-110::before, - .after\:rotate-3::after { + *, + ::before, + ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -116,20 +124,22 @@ test('with pseudo-element variants', async () => { --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\:scale-x-110::before { content: var(--tw-content); --tw-scale-x: 1.1; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .after\:rotate-3::after { content: var(--tw-content); --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -149,8 +159,9 @@ test('with multi-class variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .group-hover\:scale-x-110, - .peer-focus\:rotate-3 { + *, + ::before, + ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -158,18 +169,20 @@ test('with multi-class variants', async () => { --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)); } + /* --- */ .group:hover .group-hover\:scale-x-110 { --tw-scale-x: 1.1; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .peer:focus ~ .peer-focus\:rotate-3 { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -191,8 +204,9 @@ test('with multi-class pseudo-element variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .group-hover\:before\:scale-x-110::before, - .peer-focus\:after\:rotate-3::after { + *, + ::before, + ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -200,20 +214,22 @@ test('with multi-class pseudo-element variants', async () => { --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)); } + /* --- */ .group:hover .group-hover\:before\:scale-x-110::before { content: var(--tw-content); --tw-scale-x: 1.1; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .peer:focus ~ .peer-focus\:after\:rotate-3::after { content: var(--tw-content); --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -239,8 +255,9 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .group-hover\:hover\:before\:scale-x-110::before, - .peer-focus\:focus\:after\:rotate-3::after { + *, + ::before, + ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -248,20 +265,22 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { --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)); } + /* --- */ .group:hover .group-hover\:hover\:before\:scale-x-110:hover::before { content: var(--tw-content); --tw-scale-x: 1.1; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .peer:focus ~ .peer-focus\:focus\:after\:rotate-3:focus::after { content: var(--tw-content); --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -323,17 +342,9 @@ test('with apply', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .foo, - .bar::before, - .baz::before, - span, - .media-queries, - .a, - .b, - .c, - .a::before, - .b::after, - .recursive { + *, + ::before, + ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -341,54 +352,70 @@ test('with apply', async () => { --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)); } + /* --- */ .foo { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .bar::before { content: var(--tw-content); --tw-scale-x: 1.1; --tw-scale-y: 1.1; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .baz::before { --tw-rotate: 45deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .whats ~ .next > span:hover { --tw-skew-x: 6deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } @media (min-width: 768px) { .media-queries { --tw-rotate: 45deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } } .a, .b, .c { --tw-skew-y: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .a, .b { --tw-rotate: 45deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .a::before, .b::after { --tw-rotate: 90deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .recursive { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -436,26 +463,31 @@ test('legacy pseudo-element syntax is supported', async () => { --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)); } /* --- */ .a:before { --tw-rotate: 45deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .b:after { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .c:first-line { --tw-rotate: 1deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } .d:first-letter { --tw-rotate: 6deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -475,11 +507,6 @@ test('with borders', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .border, - .md\:border-2 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); - } /* --- */ .border { border-width: 1px; @@ -511,16 +538,10 @@ test('with shadows', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - .shadow, - .md\:shadow-xl { - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - } - - .ring-1 { - --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + *, + ::before, + ::after { + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -529,6 +550,7 @@ test('with shadows', async () => { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; } + /* --- */ .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); @@ -574,6 +596,18 @@ test('when no utilities that need the defaults are used', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + *, + ::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; + } + /* --- */ `) }) @@ -596,7 +630,9 @@ test('when a utility uses defaults but they do not exist', async () => { /* --- */ .rotate-3 { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) @@ -604,7 +640,7 @@ test('when a utility uses defaults but they do not exist', async () => { test('selectors are reduced to the lowest possible specificity', async () => { let config = { - experimental: 'all', + experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], corePlugins: [], } @@ -697,16 +733,15 @@ test('selectors are reduced to the lowest possible specificity', async () => { }) }) -test('defaults without @tailwind base', () => { +test('No defaults without @tailwind base', () => { let config = { experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], corePlugins: { preflight: false }, - [DEFAULTS_LAYER]: true, } - // No @tailwind base directive means that we need to generate the defaults for each of the utility classes in that context - // These then get merged with the utilities generated by later passes but order is preserved + // Optimize universal defaults doesn't work well with isolated modules + // We require you to use @tailwind base to inject the defaults let input = css` @tailwind components; @tailwind utilities; @@ -715,32 +750,25 @@ test('defaults without @tailwind base', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` .scale-150 { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --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-scale-x: 1.5; --tw-scale-y: 1.5; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) }) -test('defaults and apply without @tailwind base', () => { +test('no defaults and apply without @tailwind base', () => { let config = { experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], corePlugins: { preflight: false }, - [DEFAULTS_LAYER]: true, } - // No @tailwind base directive means that we need to generate the defaults for each of the utility classes in that context - // These then get merged with the utilities generated by later passes but order is preserved + // Optimize universal defaults doesn't work well with isolated modules + // We require you to use @tailwind base to inject the defaults let input = css` @tailwind components; @tailwind utilities; @@ -753,17 +781,11 @@ test('defaults and apply without @tailwind base', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` .my-card { - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --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-scale-x: 1.5; --tw-scale-y: 1.5; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x), 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)); } `) }) diff --git a/tests/util/defaults.js b/tests/util/defaults.js new file mode 100644 index 000000000000..c4f3ccb5cb03 --- /dev/null +++ b/tests/util/defaults.js @@ -0,0 +1,59 @@ +import { css } from './strings' + +/** + * @param {object} param0 + * @param {string} [param0.defaultRingColor] + * @returns {string} + */ +export function defaults({ defaultRingColor = `rgb(59 130 246 / 0.5)` } = {}) { + return css` + *, + ::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: ${defaultRingColor}; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + } + ` +} + +defaults.toString = () => defaults() diff --git a/tests/util/run.js b/tests/util/run.js index 76a67ea1486d..1fedc98bac92 100644 --- a/tests/util/run.js +++ b/tests/util/run.js @@ -1,20 +1,14 @@ import path from 'path' import postcss from 'postcss' import tailwind from '../../src' -import { DEFAULTS_LAYER } from '../../src/lib/expandTailwindAtRules' + +export * from './strings' +export * from './defaults' export function run(input, config, plugin = tailwind) { let { currentTestName } = expect.getState() - if (typeof config === 'object' && Object.keys(config).length > 0) { - config[DEFAULTS_LAYER] = config[DEFAULTS_LAYER] ?? input.includes('@tailwind base') - } - return postcss(plugin(config)).process(input, { from: `${path.resolve(__filename)}?test=${currentTestName}`, }) } - -export let css = String.raw -export let html = String.raw -export let javascript = String.raw diff --git a/tests/util/strings.js b/tests/util/strings.js new file mode 100644 index 000000000000..6967f79e0a23 --- /dev/null +++ b/tests/util/strings.js @@ -0,0 +1,3 @@ +export let css = String.raw +export let html = String.raw +export let javascript = String.raw diff --git a/tests/variants.test.css b/tests/variants.test.css index a45b42104b8e..f0a57328ab75 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -1,114 +1,48 @@ -.first\:shadow-md, -.last\:shadow-md, -.only\:shadow-md, -.odd\:shadow-md:nth-child(odd), -.even\:shadow-md:nth-child(even), -.first-of-type\:shadow-md, -.last-of-type\:shadow-md, -.only-of-type\:shadow-md, -.visited\:shadow-md, -.target\:shadow-md, -.default\:shadow-md, -.checked\:shadow-md, -.indeterminate\:shadow-md, -.placeholder-shown\:shadow-md, -.autofill\:shadow-md, -.required\:shadow-md, -.valid\:shadow-md, -.invalid\:shadow-md, -.in-range\:shadow-md, -.out-of-range\:shadow-md, -.read-only\:shadow-md, -.empty\:shadow-md, -.focus-within\:shadow-md, -.hover\:shadow-md, -.focus\:shadow-md, -.focus\:hover\:shadow-md, -.focus-visible\:shadow-md, -.active\:shadow-md, -.disabled\:shadow-md, -.group-first\:shadow-md, -.group-last\:shadow-md, -.group-only\:shadow-md, -.group-odd\:shadow-md, -.group-even\:shadow-md, -.group-first-of-type\:shadow-md, -.group-last-of-type\:shadow-md, -.group-only-of-type\:shadow-md, -.group-visited\:shadow-md, -.group-target\:shadow-md, -.group-default\:shadow-md, -.group-checked\:shadow-md, -.group-indeterminate\:shadow-md, -.group-placeholder-shown\:shadow-md, -.group-autofill\:shadow-md, -.group-required\:shadow-md, -.group-valid\:shadow-md, -.group-invalid\:shadow-md, -.group-in-range\:shadow-md, -.group-out-of-range\:shadow-md, -.group-read-only\:shadow-md, -.group-empty\:shadow-md, -.group-focus-within\:shadow-md, -.group-hover\:shadow-md, -.group-focus\:shadow-md, -.group-focus\:group-hover\:shadow-md, -.group-focus-visible\:shadow-md, -.group-active\:shadow-md, -.group-disabled\:shadow-md, -.group-disabled\:group-focus\:group-hover\:shadow-md, -.group-disabled\:group-focus\:group-hover\:first\:shadow-md, -.peer-first\:shadow-md, -.peer-last\:shadow-md, -.peer-only\:shadow-md, -.peer-odd\:shadow-md, -.peer-even\:shadow-md, -.peer-first-of-type\:shadow-md, -.peer-last-of-type\:shadow-md, -.peer-only-of-type\:shadow-md, -.peer-visited\:shadow-md, -.peer-target\:shadow-md, -.peer-default\:shadow-md, -.peer-checked\:shadow-md, -.peer-indeterminate\:shadow-md, -.peer-placeholder-shown\:shadow-md, -.peer-autofill\:shadow-md, -.peer-required\:shadow-md, -.peer-valid\:shadow-md, -.peer-invalid\:shadow-md, -.peer-in-range\:shadow-md, -.peer-out-of-range\:shadow-md, -.peer-read-only\:shadow-md, -.peer-empty\:shadow-md, -.peer-focus-within\:shadow-md, -.peer-hover\:shadow-md, -.peer-focus\:shadow-md, -.peer-focus\:peer-hover\:shadow-md, -.peer-focus-visible\:shadow-md, -.peer-active\:shadow-md, -.peer-disabled\:shadow-md, -.peer-disabled\:peer-focus\:peer-hover\:shadow-md, -.peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md, -.ltr\:shadow-md, -.rtl\:shadow-md, -.motion-safe\:shadow-md, -.motion-reduce\:shadow-md, -.dark\:shadow-md, -.dark\:group-disabled\:group-focus\:group-hover\:shadow-md, -.dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md, -.sm\:shadow-md, -.sm\:active\:shadow-md, -.md\:shadow-md, -.md\:group-focus\:shadow-md, -.lg\:shadow-md, -.lg\:dark\:shadow-md, -.xl\:shadow-md, -.\32xl\:shadow-md, -.\32xl\:dark\:motion-safe\:focus-within\:shadow-md { +*, +::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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; } .first-letter\:text-2xl::first-letter { font-size: 1.5rem;