mirror of
https://github.com/hanzoai/tailwindcss.git
synced 2026-09-24 17:03:14 +00:00
Change how we handle defaults (optimized or not) (#6926)
Co-authored-by: Adam Wathan <[email protected]>
This commit is contained in:
Jordan Pittman
committed by
GitHub
GitHub
co-authored by
Adam Wathan
Adam Wathan
parent
99929da039
commit
8724eadce8
@@ -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
|
||||
|
||||
|
||||
+119
-153
@@ -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(' '),
|
||||
'--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: 'var(--tw-filter)' },
|
||||
'.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' },
|
||||
})
|
||||
|
||||
@@ -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,
|
||||
|
||||
+1
-5
@@ -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 = {
|
||||
|
||||
@@ -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) {
|
||||
|
||||
@@ -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()
|
||||
|
||||
|
||||
+2
-11
@@ -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);
|
||||
|
||||
+35
-27
@@ -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`<div class="foo"></div>` }],
|
||||
@@ -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: 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));
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
it('apply does not emit defaults in isolated environments without optimizeUniversalDefaults', () => {
|
||||
let config = {
|
||||
experimental: { optimizeUniversalDefaults: false },
|
||||
content: [{ raw: html`<div class="foo"></div>` }],
|
||||
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: 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));
|
||||
}
|
||||
`)
|
||||
})
|
||||
})
|
||||
*/
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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_\\] {
|
||||
|
||||
+68
-151
@@ -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;
|
||||
|
||||
@@ -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');
|
||||
|
||||
@@ -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}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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}
|
||||
`)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
+36
-35
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
+225
-16
@@ -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]) {
|
||||
|
||||
@@ -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%;
|
||||
}
|
||||
|
||||
+33
-44
@@ -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;
|
||||
|
||||
@@ -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`<div class="foo"></div>` }],
|
||||
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`<div class="scale-150"></div>` }],
|
||||
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`<div class="my-card"></div>` }],
|
||||
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));
|
||||
}
|
||||
`)
|
||||
})
|
||||
|
||||
@@ -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()
|
||||
+3
-9
@@ -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
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export let css = String.raw
|
||||
export let html = String.raw
|
||||
export let javascript = String.raw
|
||||
+41
-107
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user