From 25b996c7ba07e5d339e7b722b4f2278342b67f38 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 09:20:32 -0500 Subject: [PATCH 01/20] Re-enable apply isolation --- src/lib/expandTailwindAtRules.js | 10 +++++----- tests/apply.test.js | 4 +--- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index 21bef516d704..9aa91f0e94fb 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -140,7 +140,7 @@ export default function expandTailwindAtRules(context) { variants: null, } - // let hasApply = false + let hasApply = false root.walkAtRules((rule) => { // Make sure this file contains Tailwind directives. If not, we can save @@ -156,12 +156,12 @@ export default function expandTailwindAtRules(context) { // 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 (rule.name === 'apply') { + hasApply = true + } }) - if (Object.values(layerNodes).every((n) => n === null)) { + if (Object.values(layerNodes).every((n) => n === null) && !hasApply) { return root } diff --git a/tests/apply.test.js b/tests/apply.test.js index ebba23526352..37a0acf7310f 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -1,6 +1,6 @@ import fs from 'fs' import path from 'path' -// import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules.js' +import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules.js' import { run, html, css } from './util/run' @@ -812,7 +812,6 @@ it('should be possible to apply user css without tailwind directives', () => { }) }) -/* it('apply can emit defaults in isolated environments without @tailwind directives', () => { let config = { [DEFAULTS_LAYER]: true, @@ -848,4 +847,3 @@ it('apply can emit defaults in isolated environments without @tailwind directive `) }) }) -*/ From fd83b3c23a36229475d1ab4204e963658d995bf9 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 09:20:44 -0500 Subject: [PATCH 02/20] Enable optimize universal defaults --- src/featureFlags.js | 6 +---- src/lib/expandTailwindAtRules.js | 3 ++- tests/apply.test.js | 38 ++++++++++++++++++++++++++++++++ 3 files changed, 41 insertions(+), 6 deletions(-) diff --git a/src/featureFlags.js b/src/featureFlags.js index b978c2526d61..7e521f95bcf3 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -2,11 +2,7 @@ import chalk from 'chalk' import log from './util/log' let defaults = { - // TODO: Drop this once we can safely rely on optimizeUniversalDefaults being - // the default. - optimizeUniversalDefaults: process.env.NODE_ENV === 'test' ? true : false, - - // optimizeUniversalDefaults: true + optimizeUniversalDefaults: true, } let featureFlags = { diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index 9aa91f0e94fb..656f1a5865e3 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -4,6 +4,7 @@ import { generateRules } from './generateRules' import bigSign from '../util/bigSign' import cloneNodes from '../util/cloneNodes' import { defaultExtractor } from './defaultExtractor' +import { flagEnabled } from '../featureFlags' let env = sharedState.env @@ -156,7 +157,7 @@ export default function expandTailwindAtRules(context) { // 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') { + if (rule.name === 'apply' && flagEnabled(context.tailwindConfig, 'optimizeUniversalDefaults')) { hasApply = true } }) diff --git a/tests/apply.test.js b/tests/apply.test.js index 37a0acf7310f..04fad5b1e182 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -847,3 +847,41 @@ it('apply can emit defaults in isolated environments without @tailwind directive `) }) }) + +it('apply does not emit defaults in isolated environments without optimizeUniversalDefaults', () => { + let config = { + [DEFAULTS_LAYER]: true, + experimental: { optimizeUniversalDefaults: false }, + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + } + + let input = css` + @tailwind base; + + .foo { + @apply focus:rotate-90; + } + ` + + return run(input, config).then((result) => { + return expect(result.css).toMatchFormattedCss(css` + *,::before,::after { + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-transform: translateX(var(--tw-translate-x)) translateY(var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .foo:focus { + --tw-rotate: 90deg; + transform: var(--tw-transform); + } + `) + }) +}) From bd3de418cc57c8194371a9e4a5dd8cf0539bb029 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 09:25:44 -0500 Subject: [PATCH 03/20] Fix code style --- src/lib/expandTailwindAtRules.js | 5 ++++- tests/apply.test.js | 4 +++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index 656f1a5865e3..b1d59a1f0f2b 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -157,7 +157,10 @@ export default function expandTailwindAtRules(context) { // 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' && flagEnabled(context.tailwindConfig, 'optimizeUniversalDefaults')) { + if ( + rule.name === 'apply' && + flagEnabled(context.tailwindConfig, 'optimizeUniversalDefaults') + ) { hasApply = true } }) diff --git a/tests/apply.test.js b/tests/apply.test.js index 04fad5b1e182..a80835c8e295 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -866,7 +866,9 @@ it('apply does not emit defaults in isolated environments without optimizeUniver return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - *,::before,::after { + *, + ::before, + ::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; From 0c20fa518f0bb18337811a767e1cdacdad6dbad6 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 09:30:53 -0500 Subject: [PATCH 04/20] Update changelog --- CHANGELOG.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ca0859f1164..880c43a0c394 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Optimize universal selectors by default ([#6906](https://github.com/tailwindlabs/tailwindcss/pull/6906)) ## [3.0.11] - 2022-01-05 From 0d078b0908058ac15d8f795e13c3d3d2fb9358c2 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 5 Jan 2022 12:01:05 -0500 Subject: [PATCH 05/20] WIP --- src/corePlugins.js | 271 +++++++++++++----------------- src/lib/expandTailwindAtRules.js | 14 +- src/lib/resolveDefaultsAtRules.js | 10 +- 3 files changed, 127 insertions(+), 168 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index 56a1f8edefb9..2529ce18b2b9 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -172,6 +172,39 @@ export let variantPlugins = { }, } +let cssTransformValue = [ + 'translate(var(--tw-translate-x), var(--tw-translate-y))', + 'rotate(var(--tw-rotate))', + 'skewX(var(--tw-skew-x))', + 'skewY(var(--tw-skew-y))', + 'scaleX(var(--tw-scale-x))', + 'scaleY(var(--tw-scale-y))', +].join(' ') + +let cssFilterValue = [ + 'var(--tw-blur)', + 'var(--tw-brightness)', + 'var(--tw-contrast)', + 'var(--tw-grayscale)', + 'var(--tw-hue-rotate)', + 'var(--tw-invert)', + 'var(--tw-saturate)', + 'var(--tw-sepia)', + 'var(--tw-drop-shadow)', +].join(' ') + +let cssBackdropFilterValue = [ + 'var(--tw-backdrop-blur)', + 'var(--tw-backdrop-brightness)', + 'var(--tw-backdrop-contrast)', + 'var(--tw-backdrop-grayscale)', + 'var(--tw-backdrop-hue-rotate)', + 'var(--tw-backdrop-invert)', + 'var(--tw-backdrop-opacity)', + 'var(--tw-backdrop-saturate)', + 'var(--tw-backdrop-sepia)', +].join(' ') + export let corePlugins = { preflight: ({ addBase }) => { let preflightStyles = postcss.parse( @@ -467,11 +500,11 @@ export let corePlugins = { [ [ 'translate-x', - [['@defaults transform', {}], '--tw-translate-x', ['transform', 'var(--tw-transform)']], + [['@defaults transform', {}], '--tw-translate-x', ['transform', cssTransformValue]], ], [ 'translate-y', - [['@defaults transform', {}], '--tw-translate-y', ['transform', 'var(--tw-transform)']], + [['@defaults transform', {}], '--tw-translate-y', ['transform', cssTransformValue]], ], ], ], @@ -479,26 +512,15 @@ export let corePlugins = { ), rotate: createUtilityPlugin( 'rotate', - [ - [ - 'rotate', - [['@defaults transform', {}], '--tw-rotate', ['transform', 'var(--tw-transform)']], - ], - ], + [['rotate', [['@defaults transform', {}], '--tw-rotate', ['transform', cssTransformValue]]]], { supportsNegativeValues: true } ), skew: createUtilityPlugin( 'skew', [ [ - [ - 'skew-x', - [['@defaults transform', {}], '--tw-skew-x', ['transform', 'var(--tw-transform)']], - ], - [ - 'skew-y', - [['@defaults transform', {}], '--tw-skew-y', ['transform', 'var(--tw-transform)']], - ], + ['skew-x', [['@defaults transform', {}], '--tw-skew-x', ['transform', cssTransformValue]]], + ['skew-y', [['@defaults transform', {}], '--tw-skew-y', ['transform', cssTransformValue]]], ], ], { supportsNegativeValues: true } @@ -512,17 +534,17 @@ export let corePlugins = { ['@defaults transform', {}], '--tw-scale-x', '--tw-scale-y', - ['transform', 'var(--tw-transform)'], + ['transform', cssTransformValue], ], ], [ [ 'scale-x', - [['@defaults transform', {}], '--tw-scale-x', ['transform', 'var(--tw-transform)']], + [['@defaults transform', {}], '--tw-scale-x', ['transform', cssTransformValue]], ], [ 'scale-y', - [['@defaults transform', {}], '--tw-scale-y', ['transform', 'var(--tw-transform)']], + [['@defaults transform', {}], '--tw-scale-y', ['transform', cssTransformValue]], ], ], ], @@ -538,39 +560,18 @@ export let corePlugins = { '--tw-skew-y': '0', '--tw-scale-x': '1', '--tw-scale-y': '1', - '--tw-transform': [ - 'translateX(var(--tw-translate-x))', - 'translateY(var(--tw-translate-y))', - 'rotate(var(--tw-rotate))', - 'skewX(var(--tw-skew-x))', - 'skewY(var(--tw-skew-y))', - 'scaleX(var(--tw-scale-x))', - 'scaleY(var(--tw-scale-y))', - ].join(' '), }) addUtilities({ - '.transform': { '@defaults transform': {}, transform: 'var(--tw-transform)' }, + '.transform': { '@defaults transform': {}, transform: cssTransformValue }, '.transform-cpu': { - '--tw-transform': [ - 'translateX(var(--tw-translate-x))', - 'translateY(var(--tw-translate-y))', - 'rotate(var(--tw-rotate))', - 'skewX(var(--tw-skew-x))', - 'skewY(var(--tw-skew-y))', - 'scaleX(var(--tw-scale-x))', - 'scaleY(var(--tw-scale-y))', - ].join(' '), + transform: cssTransformValue, }, '.transform-gpu': { - '--tw-transform': [ - 'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)', - 'rotate(var(--tw-rotate))', - 'skewX(var(--tw-skew-x))', - 'skewY(var(--tw-skew-y))', - 'scaleX(var(--tw-scale-x))', - 'scaleY(var(--tw-scale-y))', - ].join(' '), + transform: cssTransformValue.replace( + 'translate(var(--tw-translate-x), var(--tw-translate-y))', + 'translate3d(var(--tw-translate-x), var(--tw-translate-y), 0)' + ), }, '.transform-none': { transform: 'none' }, }) @@ -612,49 +613,50 @@ export let corePlugins = { touchAction: ({ addDefaults, addUtilities }) => { addDefaults('touch-action', { - '--tw-pan-x': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-pan-y': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-pinch-zoom': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-touch-action': 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)', + '--tw-pan-x': ' ', + '--tw-pan-y': ' ', + '--tw-pinch-zoom': ' ', }) + let cssTouchActionValue = 'var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom)' + addUtilities({ '.touch-auto': { 'touch-action': 'auto' }, '.touch-none': { 'touch-action': 'none' }, '.touch-pan-x': { '@defaults touch-action': {}, '--tw-pan-x': 'pan-x', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-left': { '@defaults touch-action': {}, '--tw-pan-x': 'pan-left', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-right': { '@defaults touch-action': {}, '--tw-pan-x': 'pan-right', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-y': { '@defaults touch-action': {}, '--tw-pan-y': 'pan-y', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-up': { '@defaults touch-action': {}, '--tw-pan-y': 'pan-up', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pan-down': { '@defaults touch-action': {}, '--tw-pan-y': 'pan-down', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-pinch-zoom': { '@defaults touch-action': {}, '--tw-pinch-zoom': 'pinch-zoom', - 'touch-action': 'var(--tw-touch-action)', + 'touch-action': cssTouchActionValue, }, '.touch-manipulation': { 'touch-action': 'manipulation' }, }) @@ -1178,21 +1180,11 @@ 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', - }) - ) - } + let value = theme('borderColor.DEFAULT', 'currentColor') + + addDefaults('border-width', { + 'border-color': toColorValue(value), + }) matchUtilities( { @@ -1572,56 +1564,57 @@ export let corePlugins = { }, fontVariantNumeric: ({ addUtilities }) => { + let cssFontVariantNumericValue = + 'var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--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)', + '--tw-ordinal': ' ', + '--tw-slashed-zero': ' ', + '--tw-numeric-figure': ' ', + '--tw-numeric-spacing': ' ', + '--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 +1902,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 +1986,7 @@ export let corePlugins = { return { '--tw-blur': `blur(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2008,7 +2001,7 @@ export let corePlugins = { return { '--tw-brightness': `brightness(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2023,7 +2016,7 @@ export let corePlugins = { return { '--tw-contrast': `contrast(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2040,7 +2033,7 @@ export let corePlugins = { ? value.map((v) => `drop-shadow(${v})`).join(' ') : `drop-shadow(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2055,7 +2048,7 @@ export let corePlugins = { return { '--tw-grayscale': `grayscale(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2070,7 +2063,7 @@ export let corePlugins = { return { '--tw-hue-rotate': `hue-rotate(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2085,7 +2078,7 @@ export let corePlugins = { return { '--tw-invert': `invert(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2100,7 +2093,7 @@ export let corePlugins = { return { '--tw-saturate': `saturate(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2115,7 +2108,7 @@ export let corePlugins = { return { '--tw-sepia': `sepia(${value})`, '@defaults filter': {}, - filter: 'var(--tw-filter)', + filter: cssFilterValue, } }, }, @@ -2125,29 +2118,18 @@ export let corePlugins = { filter: ({ addDefaults, addUtilities }) => { addDefaults('filter', { - '--tw-blur': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-brightness': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-contrast': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-invert': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-saturate': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-sepia': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-drop-shadow': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-filter': [ - 'var(--tw-blur)', - 'var(--tw-brightness)', - 'var(--tw-contrast)', - 'var(--tw-grayscale)', - 'var(--tw-hue-rotate)', - 'var(--tw-invert)', - 'var(--tw-saturate)', - 'var(--tw-sepia)', - 'var(--tw-drop-shadow)', - ].join(' '), - }) - addUtilities({ - '.filter': { '@defaults filter': {}, filter: 'var(--tw-filter)' }, + '--tw-blur': ' ', + '--tw-brightness': ' ', + '--tw-contrast': ' ', + '--tw-grayscale': ' ', + '--tw-hue-rotate': ' ', + '--tw-invert': ' ', + '--tw-saturate': ' ', + '--tw-sepia': ' ', + '--tw-drop-shadow': ' ', + }) + addUtilities({ + '.filter': { '@defaults filter': {}, filter: cssFilterValue }, '.filter-none': { filter: 'none' }, }) }, @@ -2159,7 +2141,7 @@ export let corePlugins = { return { '--tw-backdrop-blur': `blur(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2174,7 +2156,7 @@ export let corePlugins = { return { '--tw-backdrop-brightness': `brightness(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2189,7 +2171,7 @@ export let corePlugins = { return { '--tw-backdrop-contrast': `contrast(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2204,7 +2186,7 @@ export let corePlugins = { return { '--tw-backdrop-grayscale': `grayscale(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2219,7 +2201,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 +2216,7 @@ export let corePlugins = { return { '--tw-backdrop-invert': `invert(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2249,7 +2231,7 @@ export let corePlugins = { return { '--tw-backdrop-opacity': `opacity(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2264,7 +2246,7 @@ export let corePlugins = { return { '--tw-backdrop-saturate': `saturate(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2279,7 +2261,7 @@ export let corePlugins = { return { '--tw-backdrop-sepia': `sepia(${value})`, '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, } }, }, @@ -2289,31 +2271,20 @@ export let corePlugins = { backdropFilter: ({ addDefaults, addUtilities }) => { addDefaults('backdrop-filter', { - '--tw-backdrop-blur': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-brightness': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-contrast': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-grayscale': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-hue-rotate': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-invert': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-opacity': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-saturate': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-sepia': 'var(--tw-empty,/*!*/ /*!*/)', - '--tw-backdrop-filter': [ - 'var(--tw-backdrop-blur)', - 'var(--tw-backdrop-brightness)', - 'var(--tw-backdrop-contrast)', - 'var(--tw-backdrop-grayscale)', - 'var(--tw-backdrop-hue-rotate)', - 'var(--tw-backdrop-invert)', - 'var(--tw-backdrop-opacity)', - 'var(--tw-backdrop-saturate)', - 'var(--tw-backdrop-sepia)', - ].join(' '), + '--tw-backdrop-blur': ' ', + '--tw-backdrop-brightness': ' ', + '--tw-backdrop-contrast': ' ', + '--tw-backdrop-grayscale': ' ', + '--tw-backdrop-hue-rotate': ' ', + '--tw-backdrop-invert': ' ', + '--tw-backdrop-opacity': ' ', + '--tw-backdrop-saturate': ' ', + '--tw-backdrop-sepia': ' ', }) addUtilities({ '.backdrop-filter': { '@defaults backdrop-filter': {}, - 'backdrop-filter': 'var(--tw-backdrop-filter)', + 'backdrop-filter': cssBackdropFilterValue, }, '.backdrop-filter-none': { 'backdrop-filter': 'none' }, }) diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index b1d59a1f0f2b..5b129ea3294e 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -141,8 +141,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 @@ -153,19 +151,9 @@ 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' && - flagEnabled(context.tailwindConfig, 'optimizeUniversalDefaults') - ) { - hasApply = true - } }) - if (Object.values(layerNodes).every((n) => n === null) && !hasApply) { + if (Object.values(layerNodes).every((n) => n === null)) { return root } diff --git a/src/lib/resolveDefaultsAtRules.js b/src/lib/resolveDefaultsAtRules.js index a02df8e907f3..48a8378badb7 100644 --- a/src/lib/resolveDefaultsAtRules.js +++ b/src/lib/resolveDefaultsAtRules.js @@ -113,12 +113,12 @@ export default function resolveDefaultsAtRules({ tailwindConfig }) { } } - if (selectorGroups.size === 0) { - universal.remove() - continue - } - if (flagEnabled(tailwindConfig, 'optimizeUniversalDefaults')) { + if (selectorGroups.size === 0) { + universal.remove() + continue + } + for (let [, selectors] of selectorGroups) { let universalRule = postcss.rule() From 78cb2a49b07dc8b99e65cf034645ac906456263f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 13:00:03 -0500 Subject: [PATCH 06/20] WIP --- src/corePlugins.js | 17 +-- src/featureFlags.js | 2 +- tests/apply.test.css | 10 +- tests/apply.test.js | 22 ++- tests/arbitrary-values.test.css | 54 ++++---- tests/arbitrary-values.test.js | 2 +- tests/basic-usage.test.css | 107 +++++++-------- tests/experimental.test.js | 9 +- tests/kitchen-sink.test.css | 21 ++- tests/match-components.test.js | 43 ++++++ tests/plugins/divide.test.js | 15 +-- tests/raw-content.test.css | 50 +++---- tests/resolve-defaults-at-rules.test.js | 171 ++++++++++-------------- 13 files changed, 260 insertions(+), 263 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index 2529ce18b2b9..b575fdcabb77 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1563,18 +1563,19 @@ 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': ' ', - '--tw-slashed-zero': ' ', - '--tw-numeric-figure': ' ', - '--tw-numeric-spacing': ' ', - '--tw-numeric-fraction': ' ', - }, '.normal-nums': { 'font-variant-numeric': 'normal' }, '.ordinal': { '@defaults font-variant-numeric': {}, diff --git a/src/featureFlags.js b/src/featureFlags.js index 7e521f95bcf3..109186b9065b 100644 --- a/src/featureFlags.js +++ b/src/featureFlags.js @@ -2,7 +2,7 @@ import chalk from 'chalk' import log from './util/log' let defaults = { - optimizeUniversalDefaults: true, + optimizeUniversalDefaults: false, } let featureFlags = { diff --git a/tests/apply.test.css b/tests/apply.test.css index e79f201b3fd9..54a101cd67a0 100644 --- a/tests/apply.test.css +++ b/tests/apply.test.css @@ -315,11 +315,11 @@ h2 { 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-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } diff --git a/tests/apply.test.js b/tests/apply.test.js index a80835c8e295..1a59c32a6e43 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -425,7 +425,7 @@ 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)); } `) }) @@ -640,12 +640,10 @@ 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-color: #e5e7eb; } .border { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + border-color: #e5e7eb; } input[type='range']::-moz-range-thumb { border-width: 1px; @@ -836,13 +834,12 @@ it('apply can emit defaults in isolated environments without @tailwind directive --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)); } `) }) @@ -876,13 +873,12 @@ it('apply does not emit defaults in isolated environments without optimizeUniver --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)); } `) }) diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 47a311ef86dd..f43534c143d0 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -232,77 +232,77 @@ } .translate-x-\[12\%\] { --tw-translate-x: 12%; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-\[var\(--value\)\] { --tw-translate-x: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[12\%\] { --tw-translate-y: 12%; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[var\(--value\)\] { --tw-translate-y: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-\[23deg\] { --tw-rotate: 23deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-\[2\.3rad\] { --tw-rotate: 2.3rad; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-\[401grad\] { --tw-rotate: 401grad; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-\[1\.5turn\] { --tw-rotate: 1.5turn; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .skew-x-\[3px\] { --tw-skew-x: 3px; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .skew-x-\[var\(--value\)\] { --tw-skew-x: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .skew-y-\[3px\] { --tw-skew-y: 3px; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .skew-y-\[var\(--value\)\] { --tw-skew-y: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-\[0\.7\] { --tw-scale-x: 0.7; --tw-scale-y: 0.7; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-\[var\(--value\)\] { --tw-scale-x: var(--value); --tw-scale-y: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-x-\[0\.7\] { --tw-scale-x: 0.7; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-x-\[var\(--value\)\] { --tw-scale-x: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-y-\[0\.7\] { --tw-scale-y: 0.7; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-y-\[var\(--value\)\] { --tw-scale-y: var(--value); - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .animate-\[pong_1s_cubic-bezier\(0\2c 0\2c 0\.2\2c 1\)_infinite\] { animation: pong 1s cubic-bezier(0, 0, 0.2, 1) infinite; @@ -939,39 +939,39 @@ } .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); diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 26c51defa76b..fae77be9044c 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -213,7 +213,7 @@ it('should convert _ to spaces', () => { .drop-shadow-\\[0px_1px_3px_black\\] { --tw-drop-shadow: drop-shadow(0px 1px 3px black); - filter: var(--tw-filter); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .content-\\[_hello_world_\\] { diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index a8132d56f75d..835cc49a2d71 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -15,18 +15,15 @@ --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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; --tw-touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); } @@ -59,7 +56,7 @@ .ring, .ring-4 { - --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -79,15 +76,15 @@ .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-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; --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); } @@ -102,15 +99,15 @@ .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-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-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) @@ -329,46 +326,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 +388,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; @@ -768,11 +765,11 @@ .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-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } @@ -936,43 +933,43 @@ } .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; diff --git a/tests/experimental.test.js b/tests/experimental.test.js index ec80ee298eba..278b18102f20 100644 --- a/tests/experimental.test.js +++ b/tests/experimental.test.js @@ -123,8 +123,7 @@ 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)); + border-color: #e5e7eb; } .resize { @@ -155,8 +154,7 @@ 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)); + border-color: #e5e7eb; } .resize { @@ -188,8 +186,7 @@ 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)); + border-color: #e5e7eb; } .shadow { diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index 643264f26ac4..5b2da912bc6f 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -146,9 +146,6 @@ 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, @@ -162,7 +159,7 @@ div { } .focus\:ring-2 { - --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); + --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); @@ -221,10 +218,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; @@ -258,11 +255,11 @@ div { } .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-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } @@ -326,7 +323,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; diff --git a/tests/match-components.test.js b/tests/match-components.test.js index 35a932ae7958..ab3c22ef4d4e 100644 --- a/tests/match-components.test.js +++ b/tests/match-components.test.js @@ -41,6 +41,49 @@ it('should be possible to matchComponents', () => { return run('@tailwind base; @tailwind components; @tailwind utilities', config).then((result) => { return 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index 00735f8cd95e..9418ac67544a 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -9,8 +9,7 @@ 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)); + border-color: #e5e7eb; } .divide-y > :not([hidden]) ~ :not([hidden]) { @@ -31,8 +30,7 @@ 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)); + border-color: #e5e7eb; } .divide-x > :not([hidden]) ~ :not([hidden]) { @@ -53,8 +51,7 @@ 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)); + border-color: #e5e7eb; } .divide-y-reverse > :not([hidden]) ~ :not([hidden]) { @@ -73,8 +70,7 @@ 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)); + border-color: #e5e7eb; } .divide-x-reverse > :not([hidden]) ~ :not([hidden]) { @@ -94,8 +90,7 @@ it('should only inject the base styles once if we use divide and border at the s expect(result.css).toMatchCss(css` .divide-y > *, .border-r { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); + border-color: #e5e7eb; } .divide-y > :not([hidden]) ~ :not([hidden]) { diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 957893015cac..232e91653633 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -187,42 +187,42 @@ } .translate-x-5 { --tw-translate-x: 1.25rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-4 { --tw-translate-x: -1rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-6 { --tw-translate-y: 1.5rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-3 { --tw-translate-x: -0.75rem; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-3 { --tw-rotate: 3deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .skew-y-12 { --tw-skew-y: 12deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .skew-x-12 { --tw-skew-x: 12deg; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .scale-95 { --tw-scale-x: 0.95; --tw-scale-y: 0.95; - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { - transform: var(--tw-transform); + transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform-gpu { - --tw-transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) + transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @@ -515,11 +515,11 @@ .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-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } @@ -628,43 +628,43 @@ } .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; diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index ee8b68d023a8..2da45e24e306 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -15,9 +15,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 +25,19 @@ 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 +59,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 +69,19 @@ 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 +101,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 +111,17 @@ 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 +141,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 +151,15 @@ 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 +181,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 +191,17 @@ 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 +227,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 +237,17 @@ 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 +309,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 +319,51 @@ 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 +411,23 @@ 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,10 +447,10 @@ 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)); + *, + ::before, + ::after { + border-color: #e5e7eb; } /* --- */ .border { @@ -511,16 +483,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); @@ -574,6 +540,17 @@ 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 +573,7 @@ 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 +581,7 @@ test('when a utility uses defaults but they do not exist', async () => { test('selectors are reduced to the lowest possible specificity', async () => { let config = { - experimental: 'all', + experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], corePlugins: [], } @@ -720,12 +697,9 @@ test('defaults without @tailwind base', () => { --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)); } `) }) @@ -758,12 +732,9 @@ test('defaults and apply without @tailwind base', () => { --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)); } `) }) From 39ecaa8667e4c7113e1a4208b510bbbf559d63f5 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 13:50:08 -0500 Subject: [PATCH 07/20] WIP --- tests/combined-selectors.test.js | 48 +++++++ tests/layer-at-rules.test.js | 192 +++++++++++++++++++++++++ tests/plugins/divide.test.js | 231 ++++++++++++++++++++++++++++++- 3 files changed, 465 insertions(+), 6 deletions(-) diff --git a/tests/combined-selectors.test.js b/tests/combined-selectors.test.js index 8a231ed3a87e..c636ec70e4c6 100644 --- a/tests/combined-selectors.test.js +++ b/tests/combined-selectors.test.js @@ -35,6 +35,54 @@ it('should generate the partial selector, if only a partial is used (base layer) .a { color: black; } + + *, + ::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; + border-color: #e5e7eb; + --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: ; + } `) }) }) diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index 6a48012062d7..76fef2145031 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -34,6 +34,54 @@ test('custom user-land utilities', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .uppercase { text-transform: uppercase; } @@ -96,6 +144,54 @@ test('comments can be used inside layers without crashing', () => { background-color: #bada55; } + *, + ::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; + border-color: #e5e7eb; + --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: ; + } + /* Important component */ .important-component { text-align: banana; @@ -156,6 +252,54 @@ test('comments can be used inside layers (with important) without crashing', () background-color: #bada55; } + *, + ::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; + border-color: #e5e7eb; + --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: ; + } + /* Important component */ .important-component { text-align: banana; @@ -267,6 +411,54 @@ test('layers are grouped and inserted at the matching @tailwind rule', () => { font-weight: normal; } + *, + ::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; + border-color: #e5e7eb; + --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: ; + } + .input { background: white; } diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index 9418ac67544a..1de9a142b243 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -8,8 +8,52 @@ 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 > * { + *, + ::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; border-color: #e5e7eb; + --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]) { @@ -29,8 +73,52 @@ 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 > * { + *, + ::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; border-color: #e5e7eb; + --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]) { @@ -50,8 +138,52 @@ 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 > * { + *, + ::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; border-color: #e5e7eb; + --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]) { @@ -69,8 +201,52 @@ 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 > * { + *, + ::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; border-color: #e5e7eb; + --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]) { @@ -88,9 +264,52 @@ 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 { + *, + ::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; border-color: #e5e7eb; + --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]) { From a39a6dc077a2603951c69c1be5ee054b6460db78 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 13:56:08 -0500 Subject: [PATCH 08/20] WIP --- tests/apply.test.css | 13 ++----------- tests/apply.test.js | 37 +++++++++++++++++++++++++++++++++++++ tests/basic-usage.test.css | 6 +++--- tests/kitchen-sink.test.css | 4 ++-- tests/raw-content.test.css | 6 +++--- 5 files changed, 47 insertions(+), 19 deletions(-) diff --git a/tests/apply.test.css b/tests/apply.test.css index 54a101cd67a0..5c8a47ff67f6 100644 --- a/tests/apply.test.css +++ b/tests/apply.test.css @@ -126,7 +126,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); @@ -142,7 +142,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); } .basic-nesting-parent { .basic-nesting-child { @@ -314,15 +314,6 @@ h2 { .important-modifier-variant:hover { border-radius: 0.375rem !important; } -.complex-utilities { - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} @keyframes spin { to { transform: rotate(360deg); diff --git a/tests/apply.test.js b/tests/apply.test.js index 1a59c32a6e43..0ce5132b4648 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -824,6 +824,7 @@ it('apply can emit defaults in isolated environments without @tailwind directive } ` + // TODO: Do we want this to work? return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` .foo { @@ -873,6 +874,42 @@ it('apply does not emit defaults in isolated environments without optimizeUniver --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; + border-color: #e5e7eb; + --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: ; } .foo:focus { --tw-rotate: 90deg; diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 835cc49a2d71..da6c670e0fa9 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -775,15 +775,15 @@ } .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; diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index 5b2da912bc6f..eb5f6d5858de 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -199,7 +199,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; @@ -429,7 +429,7 @@ div { } .sm\:tabular-nums { --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-font-variant-numeric); + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .sm\:custom-util { background: #abcdef; diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 232e91653633..df1e19965efa 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -525,15 +525,15 @@ } .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; From feec5845ccd1b8f99b1738f5458915f1a289d3b0 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 14:04:31 -0500 Subject: [PATCH 09/20] WIP --- tests/apply.test.js | 16 +- tests/arbitrary-values.test.css | 47 ++++++ tests/arbitrary-values.test.js | 4 +- tests/collapse-adjacent-rules.test.css | 47 ++++++ tests/custom-plugins.test.js | 95 ++++++++++++ tests/dark-mode.test.js | 190 +++++++++++++++++++++++ tests/important-boolean.test.css | 47 ++++++ tests/important-modifier-prefix.test.css | 47 ++++++ tests/important-modifier.test.css | 47 ++++++ tests/important-selector.test.css | 47 ++++++ tests/kitchen-sink.test.css | 47 ++++++ tests/layer-at-rules.test.js | 2 +- tests/match-components.test.js | 12 +- tests/negated-content.test.js | 48 ++++++ tests/plugins/divide.test.js | 6 +- tests/prefix.test.css | 47 ++++++ tests/resolve-defaults-at-rules.test.js | 120 ++++++++++---- tests/variants.test.css | 149 +++++------------- 18 files changed, 862 insertions(+), 156 deletions(-) diff --git a/tests/apply.test.js b/tests/apply.test.js index 0ce5132b4648..28e00c9c8812 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -425,7 +425,9 @@ it('should remove duplicate properties when using apply with similar properties' left: 50%; --tw-translate-x: -50%; --tw-translate-y: -50%; - 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: 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)); } `) }) @@ -838,9 +840,9 @@ it('apply can emit defaults in isolated environments without @tailwind directive } .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)); + 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)); } `) }) @@ -913,9 +915,9 @@ it('apply does not emit defaults in isolated environments without optimizeUniver } .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)); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } `) }) diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index f43534c143d0..d66c4af3efc2 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .inset-\[11px\] { top: 11px; right: 11px; diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index fae77be9044c..f0cfc8a47ed2 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -213,7 +213,9 @@ it('should convert _ to spaces', () => { .drop-shadow-\\[0px_1px_3px_black\\] { --tw-drop-shadow: drop-shadow(0px 1px 3px black); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); } .content-\\[_hello_world_\\] { diff --git a/tests/collapse-adjacent-rules.test.css b/tests/collapse-adjacent-rules.test.css index e671284e1bed..60d9c91abe85 100644 --- a/tests/collapse-adjacent-rules.test.css +++ b/tests/collapse-adjacent-rules.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: 'Poppins'; src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff'); diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index 0b1b0860fb07..3a854c753896 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -245,6 +245,54 @@ test('plugins can add base styles with object syntax', () => { button { font-family: inherit; } + + *, + ::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; + border-color: #e5e7eb; + --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: ; + } `) }) }) @@ -285,6 +333,53 @@ test('plugins can add base styles with raw PostCSS nodes', () => { button { font-family: inherit; } + *, + ::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; + border-color: #e5e7eb; + --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: ; + } `) }) }) diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index 940339152ab9..1371dfd3afda 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -15,6 +15,53 @@ it('should be possible to use the darkMode "class" mode', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } .dark .dark\:font-bold { font-weight: 700; } @@ -37,6 +84,53 @@ it('should be possible to use the darkMode "media" mode', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } @media (prefers-color-scheme: dark) { .dark\:font-bold { font-weight: 700; @@ -60,6 +154,54 @@ it('should default to the `media` mode when no mode is provided', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + @media (prefers-color-scheme: dark) { .dark\:font-bold { font-weight: 700; @@ -84,6 +226,54 @@ it('should default to the `media` mode when mode is set to `false`', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + @media (prefers-color-scheme: dark) { .dark\:font-bold { font-weight: 700; diff --git a/tests/important-boolean.test.css b/tests/important-boolean.test.css index 49f6bfb64419..9ce2b02e16ca 100644 --- a/tests/important-boolean.test.css +++ b/tests/important-boolean.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .container { width: 100%; } diff --git a/tests/important-modifier-prefix.test.css b/tests/important-modifier-prefix.test.css index 17096025b112..dc44184de9ab 100644 --- a/tests/important-modifier-prefix.test.css +++ b/tests/important-modifier-prefix.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .\!tw-container { width: 100% !important; } diff --git a/tests/important-modifier.test.css b/tests/important-modifier.test.css index 11eef31f2f8f..116ec8f293f1 100644 --- a/tests/important-modifier.test.css +++ b/tests/important-modifier.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .\!container { width: 100% !important; } diff --git a/tests/important-selector.test.css b/tests/important-selector.test.css index d5ddedb6e97a..c00ea921246e 100644 --- a/tests/important-selector.test.css +++ b/tests/important-selector.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .container { width: 100%; } diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index eb5f6d5858de..bd9192cbfb76 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .theme-test { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index 76fef2145031..d230196dfdfd 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -34,7 +34,7 @@ test('custom user-land utilities', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - *, + *, ::before, ::after { --tw-translate-x: 0; diff --git a/tests/match-components.test.js b/tests/match-components.test.js index ab3c22ef4d4e..96383e736ce5 100644 --- a/tests/match-components.test.js +++ b/tests/match-components.test.js @@ -56,6 +56,11 @@ it('should be possible to matchComponents', () => { --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; border-color: #e5e7eb; + --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; @@ -84,13 +89,6 @@ it('should be possible to matchComponents', () => { --tw-backdrop-sepia: ; } - .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; - } - .card-\[\#0088cc\] { color: #0088cc; } diff --git a/tests/negated-content.test.js b/tests/negated-content.test.js index e949c48a8ae7..d0cc97012a48 100644 --- a/tests/negated-content.test.js +++ b/tests/negated-content.test.js @@ -18,6 +18,54 @@ it('should be possible to use negated content patterns', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .uppercase { text-transform: uppercase; } diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index 1de9a142b243..785d6ee7d29a 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -138,7 +138,7 @@ 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` - *, + *, ::before, ::after { --tw-translate-x: 0; @@ -201,7 +201,7 @@ 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` - *, + *, ::before, ::after { --tw-translate-x: 0; @@ -264,7 +264,7 @@ 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` - *, + *, ::before, ::after { --tw-translate-x: 0; diff --git a/tests/prefix.test.css b/tests/prefix.test.css index 2575134af8e1..190a565285d3 100644 --- a/tests/prefix.test.css +++ b/tests/prefix.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .tw-container { width: 100%; } diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index 2da45e24e306..1684cfdfdb99 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -29,15 +29,21 @@ test('basic utilities', async () => { /* --- */ .rotate-3 { --tw-rotate: 3deg; - 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: 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: 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: 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: 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: 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)); } `) }) @@ -73,15 +79,21 @@ test('with pseudo-class variants', async () => { /* --- */ .hover\:scale-x-110:hover { --tw-scale-x: 1.1; - 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: 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: 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: 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: 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: 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)); } `) }) @@ -116,12 +128,16 @@ test('with pseudo-element variants', async () => { .before\:scale-x-110::before { content: var(--tw-content); --tw-scale-x: 1.1; - 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: 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: 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: 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)); } `) }) @@ -155,11 +171,15 @@ test('with multi-class variants', async () => { /* --- */ .group:hover .group-hover\:scale-x-110 { --tw-scale-x: 1.1; - 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: 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: 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: 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)); } `) }) @@ -196,12 +216,16 @@ test('with multi-class pseudo-element variants', async () => { .group:hover .group-hover\:before\:scale-x-110::before { content: var(--tw-content); --tw-scale-x: 1.1; - 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: 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: 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: 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)); } `) }) @@ -242,12 +266,16 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { .group:hover .group-hover\:hover\:before\:scale-x-110:hover::before { content: var(--tw-content); --tw-scale-x: 1.1; - 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: 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: 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: 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,47 +351,65 @@ test('with apply', async () => { /* --- */ .foo { --tw-rotate: 3deg; - 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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: 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)); } `) }) @@ -415,19 +461,27 @@ test('legacy pseudo-element syntax is supported', async () => { /* --- */ .a:before { --tw-rotate: 45deg; - 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: 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: 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: 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: 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: 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: 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: 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)); } `) }) @@ -573,7 +627,9 @@ test('when a utility uses defaults but they do not exist', async () => { /* --- */ .rotate-3 { --tw-rotate: 3deg; - 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: 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)); } `) }) @@ -699,7 +755,9 @@ test('defaults without @tailwind base', () => { --tw-skew-y: 0; --tw-scale-x: 1.5; --tw-scale-y: 1.5; - 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: 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)); } `) }) @@ -734,7 +792,9 @@ test('defaults and apply without @tailwind base', () => { --tw-skew-y: 0; --tw-scale-x: 1.5; --tw-scale-y: 1.5; - 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: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); } `) }) diff --git a/tests/variants.test.css b/tests/variants.test.css index a45b42104b8e..e7cf6b04d3ae 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -1,114 +1,49 @@ -.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; + border-color: #e5e7eb; + --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; From 9dd1e01f7dd2993fe2e4e6e64bd248349739ac5c Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 14:17:09 -0500 Subject: [PATCH 10/20] WIP --- src/lib/expandTailwindAtRules.js | 1 - tests/arbitrary-properties.test.js | 630 ++++++++++++++++++++++++- tests/arbitrary-values.test.css | 65 +-- tests/basic-usage.test.css | 117 +---- tests/collapse-adjacent-rules.test.css | 18 +- tests/kitchen-sink.test.css | 104 ++-- tests/raw-content.test.css | 31 +- 7 files changed, 705 insertions(+), 261 deletions(-) diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index 5b129ea3294e..dc32a84887f3 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -4,7 +4,6 @@ import { generateRules } from './generateRules' import bigSign from '../util/bigSign' import cloneNodes from '../util/cloneNodes' import { defaultExtractor } from './defaultExtractor' -import { flagEnabled } from '../featureFlags' let env = sharedState.env diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js index 3b76cbe34c3f..2a339ee6a152 100644 --- a/tests/arbitrary-properties.test.js +++ b/tests/arbitrary-properties.test.js @@ -18,6 +18,54 @@ test('basic arbitrary properties', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .\[paint-order\:markers\] { paint-order: markers; } @@ -43,6 +91,54 @@ test('arbitrary properties with modifiers', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + @media (prefers-color-scheme: dark) { @media (min-width: 1024px) { .dark\:lg\:hover\:\[paint-order\:markers\]:hover { @@ -72,6 +168,54 @@ test('arbitrary properties are sorted after utilities', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .content-none { --tw-content: none; content: var(--tw-content); @@ -104,6 +248,54 @@ test('using CSS variables', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .\[--my-var\:auto\] { --my-var: auto; } @@ -129,6 +321,54 @@ test('using underscores as spaces', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .\[--my-var\:2px_4px\] { --my-var: 2px 4px; } @@ -154,6 +394,54 @@ test('using the important modifier', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .\!\[--my-var\:2px_4px\] { --my-var: 2px 4px !important; } @@ -179,6 +467,54 @@ test('colons are allowed in quotes', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .\[content\:\'foo\:bar\'\] { content: 'foo:bar'; } @@ -204,6 +540,54 @@ test('colons are allowed in braces', () => { 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + .\[background-image\:url\(http\:\/\/example\.com\/picture\.jpg\)\] { background-image: url(http://example.com/picture.jpg); } @@ -228,7 +612,55 @@ test('invalid class', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css``) + 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + `) }) }) @@ -249,7 +681,55 @@ test('invalid arbitrary property', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css``) + 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + `) }) }) @@ -270,7 +750,55 @@ test('invalid arbitrary property 2', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css``) + 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + `) }) }) @@ -288,6 +816,54 @@ 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` + *, + ::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; + border-color: #e5e7eb; + --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: ; + } + .\[--a\:theme\(colors\.blue\.500\)\] { --a: #3b82f6; } @@ -312,6 +888,54 @@ 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` + *, + ::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; + border-color: #e5e7eb; + --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: ; + } + .\[--a\:theme\(\'colors\.blue\.500\'\)\] { --a: #3b82f6; } diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index d66c4af3efc2..c7a88df35b34 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .inset-\[11px\] { top: 11px; right: 11px; @@ -1022,39 +975,39 @@ } .backdrop-blur-\[11px\] { --tw-backdrop-blur: blur(11px); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-brightness-\[1\.23\] { --tw-backdrop-brightness: brightness(1.23); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-contrast-\[0\.87\] { --tw-backdrop-contrast: contrast(0.87); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-grayscale-\[0\.42\] { --tw-backdrop-grayscale: grayscale(0.42); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-hue-rotate-\[1\.57rad\] { --tw-backdrop-hue-rotate: hue-rotate(1.57rad); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-invert-\[0\.66\] { --tw-backdrop-invert: invert(0.66); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-opacity-\[22\%\] { --tw-backdrop-opacity: opacity(22%); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-saturate-\[144\%\] { --tw-backdrop-saturate: saturate(144%); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-sepia-\[0\.38\] { --tw-backdrop-sepia: sepia(0.38); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition-\[opacity\2c width\] { transition-property: opacity, width; diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index da6c670e0fa9..61202aa24a3e 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -1,13 +1,6 @@ -.translate-x-5, -.-translate-x-4, -.translate-y-6, -.-translate-x-3, -.rotate-3, -.skew-y-12, -.skew-x-12, -.scale-95, -.-scale-x-100, -.transform { +*, +::before, +::after { --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; @@ -15,47 +8,16 @@ --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; -} - -.touch-pan-x, -.touch-pan-y, -.touch-pan-up, -.touch-pinch-zoom { --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; - --tw-touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); -} - -.snap-x { --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 { + border-color: #e5e7eb; + --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; @@ -64,18 +26,6 @@ --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: ; --tw-brightness: ; --tw-contrast: ; @@ -85,20 +35,6 @@ --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; - --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: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; @@ -108,10 +44,6 @@ --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; - --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); } .container { width: 100%; @@ -762,17 +694,6 @@ .not-italic { font-style: normal; } -.ordinal, -.tabular-nums, -.diagonal-fractions { - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --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-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); @@ -976,42 +897,42 @@ } .backdrop-blur-lg { --tw-backdrop-blur: blur(16px); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(0.5); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-contrast-0 { --tw-backdrop-contrast: contrast(0); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-hue-rotate-90 { --tw-backdrop-hue-rotate: hue-rotate(90deg); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-invert { --tw-backdrop-invert: invert(100%); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-opacity-75 { --tw-backdrop-opacity: opacity(0.75); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-saturate-150 { --tw-backdrop-saturate: saturate(1.5); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-sepia { --tw-backdrop-sepia: sepia(100%); - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter { - backdrop-filter: var(--tw-backdrop-filter); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter-none { backdrop-filter: none; diff --git a/tests/collapse-adjacent-rules.test.css b/tests/collapse-adjacent-rules.test.css index 60d9c91abe85..fcef56b3bc29 100644 --- a/tests/collapse-adjacent-rules.test.css +++ b/tests/collapse-adjacent-rules.test.css @@ -1,3 +1,12 @@ +@font-face { + font-family: 'Poppins'; + src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff'); +} +@font-face { + font-family: 'Proxima Nova'; + src: url('/fonts/ProximaNova.woff2') format('woff2'), + url('/fonts/ProximaNova.woff') format('woff'); +} *, ::before, ::after { @@ -45,15 +54,6 @@ --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; } -@font-face { - font-family: 'Poppins'; - src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff'); -} -@font-face { - font-family: 'Proxima Nova'; - src: url('/fonts/ProximaNova.woff2') format('woff2'), - url('/fonts/ProximaNova.woff') format('woff'); -} @font-face { font-family: 'Inter'; src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff'); diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index bd9192cbfb76..ca59df30917d 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .theme-test { font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', @@ -183,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; @@ -193,19 +146,16 @@ div { --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; -} - -.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-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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; @@ -214,6 +164,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%; @@ -300,16 +268,6 @@ div { .font-medium { font-weight: 500; } -.test-apply-font-variant, -.sm\:tabular-nums { - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --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); diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index df1e19965efa..4ab5326f646f 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -512,17 +512,6 @@ .not-italic { font-style: normal; } -.ordinal, -.tabular-nums, -.diagonal-fractions { - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --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-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); @@ -671,42 +660,42 @@ } .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; From 2e6f79784dd40f5d7cb4f6f8f4a1c5b5edad0d07 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 14:23:11 -0500 Subject: [PATCH 11/20] WIP --- tests/customConfig.test.js | 240 +++++++++++++++++++++++++++++++++++++ 1 file changed, 240 insertions(+) diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index baea15d76884..c4a717bc7e27 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -70,6 +70,54 @@ test('custom config can be passed under the `config` property', () => { return run('@tailwind utilities', 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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -95,6 +143,54 @@ test('tailwind.config.cjs is picked up by default', () => { return run('@tailwind utilities').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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -121,6 +217,54 @@ test('tailwind.config.js is picked up by default', () => { return run('@tailwind utilities').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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -147,6 +291,54 @@ test('tailwind.config.cjs is picked up by default when passing an empty object', return run('@tailwind utilities', {}).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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -173,6 +365,54 @@ test('tailwind.config.js is picked up by default when passing an empty object', return run('@tailwind utilities', {}).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; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + border-color: #e5e7eb; + --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: ; + } + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; From 7cd61fe2e3306ef8657ad6089195037f980d9573 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 14:30:41 -0500 Subject: [PATCH 12/20] Refactor --- tests/util/defaults.js | 51 ++++++++++++++++++++++++++++++++++++++++++ tests/util/run.js | 5 +---- tests/util/strings.js | 3 +++ 3 files changed, 55 insertions(+), 4 deletions(-) create mode 100644 tests/util/defaults.js create mode 100644 tests/util/strings.js diff --git a/tests/util/defaults.js b/tests/util/defaults.js new file mode 100644 index 000000000000..7c0f94c8150e --- /dev/null +++ b/tests/util/defaults.js @@ -0,0 +1,51 @@ +import { css } from "./strings" + +export const defaults = 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; + border-color: #e5e7eb; + --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: ; + } +` diff --git a/tests/util/run.js b/tests/util/run.js index 76a67ea1486d..51f287f30587 100644 --- a/tests/util/run.js +++ b/tests/util/run.js @@ -2,6 +2,7 @@ import path from 'path' import postcss from 'postcss' import tailwind from '../../src' import { DEFAULTS_LAYER } from '../../src/lib/expandTailwindAtRules' +export * from "./strings" export function run(input, config, plugin = tailwind) { let { currentTestName } = expect.getState() @@ -14,7 +15,3 @@ export function run(input, config, plugin = tailwind) { from: `${path.resolve(__filename)}?test=${currentTestName}`, }) } - -export let css = String.raw -export let html = String.raw -export let javascript = String.raw diff --git a/tests/util/strings.js b/tests/util/strings.js new file mode 100644 index 000000000000..6967f79e0a23 --- /dev/null +++ b/tests/util/strings.js @@ -0,0 +1,3 @@ +export let css = String.raw +export let html = String.raw +export let javascript = String.raw From b146f71fae241fbd3ead22f5f903814eef0682b3 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 14:31:19 -0500 Subject: [PATCH 13/20] WIP --- tests/apply.test.js | 50 +-- tests/arbitrary-properties.test.js | 626 +---------------------------- tests/combined-selectors.test.js | 50 +-- tests/custom-plugins.test.js | 98 +---- tests/customConfig.test.js | 50 +-- tests/dark-mode.test.js | 194 +-------- tests/layer-at-rules.test.js | 194 +-------- tests/match-components.test.js | 50 +-- tests/negated-content.test.js | 50 +-- tests/util/run.js | 2 + 10 files changed, 39 insertions(+), 1325 deletions(-) diff --git a/tests/apply.test.js b/tests/apply.test.js index 28e00c9c8812..a0af2145c3a7 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -2,7 +2,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 = { @@ -866,53 +866,7 @@ it('apply does not emit defaults in isolated environments without optimizeUniver return run(input, config).then((result) => { return 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .foo:focus { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js index 2a339ee6a152..e97ea7c84cfb 100644 --- a/tests/arbitrary-properties.test.js +++ b/tests/arbitrary-properties.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('basic arbitrary properties', () => { let config = { @@ -18,53 +18,7 @@ test('basic arbitrary properties', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .\[paint-order\:markers\] { paint-order: markers; @@ -91,53 +45,7 @@ test('arbitrary properties with modifiers', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} @media (prefers-color-scheme: dark) { @media (min-width: 1024px) { @@ -168,53 +76,7 @@ test('arbitrary properties are sorted after utilities', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .content-none { --tw-content: none; @@ -248,53 +110,7 @@ test('using CSS variables', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .\[--my-var\:auto\] { --my-var: auto; @@ -321,53 +137,7 @@ test('using underscores as spaces', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .\[--my-var\:2px_4px\] { --my-var: 2px 4px; @@ -394,53 +164,7 @@ test('using the important modifier', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .\!\[--my-var\:2px_4px\] { --my-var: 2px 4px !important; @@ -467,53 +191,7 @@ test('colons are allowed in quotes', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .\[content\:\'foo\:bar\'\] { content: 'foo:bar'; @@ -540,53 +218,7 @@ test('colons are allowed in braces', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .\[background-image\:url\(http\:\/\/example\.com\/picture\.jpg\)\] { background-image: url(http://example.com/picture.jpg); @@ -613,53 +245,7 @@ test('invalid class', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} `) }) }) @@ -682,53 +268,7 @@ test('invalid arbitrary property', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} `) }) }) @@ -751,53 +291,7 @@ test('invalid arbitrary property 2', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} `) }) }) @@ -816,53 +310,7 @@ 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` - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .\[--a\:theme\(colors\.blue\.500\)\] { --a: #3b82f6; @@ -888,53 +336,7 @@ 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` - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .\[--a\:theme\(\'colors\.blue\.500\'\)\] { --a: #3b82f6; diff --git a/tests/combined-selectors.test.js b/tests/combined-selectors.test.js index c636ec70e4c6..585bea11ee34 100644 --- a/tests/combined-selectors.test.js +++ b/tests/combined-selectors.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' it('should generate the partial selector, if only a partial is used (base layer)', () => { let config = { @@ -36,53 +36,7 @@ it('should generate the partial selector, if only a partial is used (base layer) color: black; } - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} `) }) }) diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index 3a854c753896..c3e7a3916cd9 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -1,5 +1,5 @@ import createPlugin from '../src/public/create-plugin' -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('plugins can create utilities with object syntax', () => { let config = { @@ -246,53 +246,7 @@ test('plugins can add base styles with object syntax', () => { font-family: inherit; } - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} `) }) }) @@ -333,53 +287,7 @@ test('plugins can add base styles with raw PostCSS nodes', () => { button { font-family: inherit; } - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} `) }) }) diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index c4a717bc7e27..55822f85566e 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -3,7 +3,7 @@ import path from 'path' import { cjsConfigFile, defaultConfigFile } from '../src/constants' import inTempDirectory from '../jest/runInTempDirectory' -import { run, html, css, javascript } from './util/run' +import { run, html, css, javascript, defaults } from './util/run' test('it uses the values from the custom config file', () => { let config = require(path.resolve(`${__dirname}/fixtures/custom-config.js`)) @@ -70,53 +70,7 @@ test('custom config can be passed under the `config` property', () => { return run('@tailwind utilities', 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} @media (min-width: 400px) { .mobile\:font-bold { diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index 1371dfd3afda..47a5aaef34bc 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' it('should be possible to use the darkMode "class" mode', () => { let config = { @@ -15,53 +15,7 @@ it('should be possible to use the darkMode "class" mode', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .dark .dark\:font-bold { font-weight: 700; } @@ -84,53 +38,7 @@ it('should be possible to use the darkMode "media" mode', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} @media (prefers-color-scheme: dark) { .dark\:font-bold { font-weight: 700; @@ -154,53 +62,7 @@ it('should default to the `media` mode when no mode is provided', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} @media (prefers-color-scheme: dark) { .dark\:font-bold { @@ -226,53 +88,7 @@ it('should default to the `media` mode when mode is set to `false`', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} @media (prefers-color-scheme: dark) { .dark\:font-bold { diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index d230196dfdfd..547c81fa06d4 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('custom user-land utilities', () => { let config = { @@ -34,53 +34,7 @@ test('custom user-land utilities', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .uppercase { text-transform: uppercase; @@ -144,53 +98,7 @@ test('comments can be used inside layers without crashing', () => { background-color: #bada55; } - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} /* Important component */ .important-component { @@ -252,53 +160,7 @@ test('comments can be used inside layers (with important) without crashing', () background-color: #bada55; } - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} /* Important component */ .important-component { @@ -411,53 +273,7 @@ test('layers are grouped and inserted at the matching @tailwind rule', () => { font-weight: normal; } - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .input { background: white; diff --git a/tests/match-components.test.js b/tests/match-components.test.js index 96383e736ce5..04ec0ee63565 100644 --- a/tests/match-components.test.js +++ b/tests/match-components.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' it('should be possible to matchComponents', () => { let config = { @@ -41,53 +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` - *, - ::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; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .card-\[\#0088cc\] { color: #0088cc; diff --git a/tests/negated-content.test.js b/tests/negated-content.test.js index d0cc97012a48..cb85ce901d98 100644 --- a/tests/negated-content.test.js +++ b/tests/negated-content.test.js @@ -1,5 +1,5 @@ import * as path from 'path' -import { run, css } from './util/run' +import { run, css, defaults } from './util/run' it('should be possible to use negated content patterns', () => { let config = { @@ -18,53 +18,7 @@ it('should be possible to use negated content patterns', () => { 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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} .uppercase { text-transform: uppercase; diff --git a/tests/util/run.js b/tests/util/run.js index 51f287f30587..7b5548729106 100644 --- a/tests/util/run.js +++ b/tests/util/run.js @@ -2,7 +2,9 @@ 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() From 8c705558ffd3c4650e145c35f2f96969838c9a20 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Wed, 5 Jan 2022 15:23:52 -0500 Subject: [PATCH 14/20] WIP --- src/lib/expandTailwindAtRules.js | 12 +- tests/animations.test.js | 7 +- tests/apply.test.js | 13 +- tests/arbitrary-values.test.css | 47 ++++ tests/arbitrary-values.test.js | 24 ++- tests/basic-usage.test.js | 4 +- tests/collapse-duplicate-declarations.test.js | 8 +- tests/color-opacity-modifiers.test.js | 15 +- tests/combined-selectors.test.js | 1 + tests/containerPlugin.test.js | 11 +- tests/custom-extractors.test.css | 47 ++++ tests/custom-plugins.test.js | 30 +++ tests/custom-separator.test.css | 47 ++++ tests/custom-transformers.test.js | 5 +- tests/customConfig.test.js | 200 +----------------- tests/extractor-edge-cases.test.js | 4 +- tests/import-syntax.test.css | 47 ++++ tests/layer-at-rules.test.js | 2 + tests/modify-selectors.test.css | 47 ++++ tests/mutable.test.css | 47 ++++ tests/negative-prefix.test.js | 24 ++- tests/normalize-config.test.js | 6 +- tests/opacity.test.js | 4 +- tests/parallel-variants.test.js | 3 +- tests/plugins/fontSize.test.js | 5 +- tests/plugins/gradientColorStops.test.js | 3 +- tests/raw-content.test.css | 47 ++++ tests/raw-content.test.js | 3 +- tests/resolve-defaults-at-rules.test.js | 13 +- .../responsive-and-variants-atrules.test.css | 47 ++++ tests/safelist.test.js | 10 +- tests/syntax-lit-html.test.js | 3 +- tests/syntax-svelte.test.js | 4 +- tests/tailwind-screens.test.js | 4 +- tests/util/defaults.js | 2 +- tests/util/run.js | 9 +- tests/variants.test.js | 15 +- 37 files changed, 580 insertions(+), 240 deletions(-) diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index dc32a84887f3..c461485c6243 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -129,8 +129,6 @@ function buildStylesheet(rules, context) { return returnValue } -export const DEFAULTS_LAYER = Symbol('defaults-layer') - export default function expandTailwindAtRules(context) { return (root) => { let layerNodes = { @@ -209,12 +207,10 @@ export default function expandTailwindAtRules(context) { // @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)) - } + if (layerNodes.base) { + layerNodes.base.after(cloneNodes([...defaultNodes], root.source)) + } else { + root.prepend(cloneNodes([...defaultNodes], root.source)) } if (layerNodes.base) { diff --git a/tests/animations.test.js b/tests/animations.test.js index 0a77a4c4e415..475759b9333d 100644 --- a/tests/animations.test.js +++ b/tests/animations.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('basic', () => { let config = { @@ -15,6 +15,7 @@ test('basic', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @keyframes spin { to { transform: rotate(360deg); @@ -68,6 +69,7 @@ test('custom', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @keyframes one { to { transform: rotate(360deg); @@ -98,6 +100,7 @@ test('custom prefixed', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @keyframes tw-one { to { transform: rotate(360deg); @@ -124,6 +127,7 @@ test('multiple', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @keyframes bounce { 0%, 100% { @@ -165,6 +169,7 @@ test('multiple custom', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @keyframes one { to { transform: rotate(360deg); diff --git a/tests/apply.test.js b/tests/apply.test.js index a0af2145c3a7..cf1c8d45d69f 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -1,6 +1,5 @@ import fs from 'fs' import path from 'path' -import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules.js' import { run, html, css, defaults } from './util/run' @@ -284,6 +283,7 @@ test('@apply classes from outside a @layer', async () => { await run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .font-bold { font-weight: 700; } @@ -351,6 +351,7 @@ test('@applying classes from outside a @layer respects the source order', async await run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .baz { text-decoration-line: underline; text-decoration-line: none; @@ -419,6 +420,7 @@ it('should remove duplicate properties when using apply with similar properties' return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .foo { position: absolute; top: 50%; @@ -462,6 +464,7 @@ it('should apply all the definitions of a class', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .foo { position: relative; --tw-aspect-w: 1; @@ -543,6 +546,7 @@ it('should not throw when the selector is different (but contains the base parti return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-gray-500 { --tw-bg-opacity: 1; background-color: rgb(107 114 128 / var(--tw-bg-opacity)); @@ -641,6 +645,7 @@ it('rules with vendor prefixes are still separate when optimizing defaults rules return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} [type='range']::-moz-range-thumb { border-color: #e5e7eb; } @@ -678,6 +683,7 @@ it('should be possible to apply user css', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .foo { color: red; } @@ -749,6 +755,7 @@ it('should not apply unrelated siblings when applying something from within atru return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .foo { font-weight: bold; color: green; @@ -797,6 +804,7 @@ it('should be possible to apply user css without tailwind directives', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .bop { color: red; } @@ -814,7 +822,6 @@ it('should be possible to apply user css without tailwind directives', () => { it('apply can emit defaults in isolated environments without @tailwind directives', () => { let config = { - [DEFAULTS_LAYER]: true, experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], @@ -829,6 +836,7 @@ it('apply can emit defaults in isolated environments without @tailwind directive // TODO: Do we want this to work? return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .foo { --tw-translate-x: 0; --tw-translate-y: 0; @@ -850,7 +858,6 @@ it('apply can emit defaults in isolated environments without @tailwind directive it('apply does not emit defaults in isolated environments without optimizeUniversalDefaults', () => { let config = { - [DEFAULTS_LAYER]: true, experimental: { optimizeUniversalDefaults: false }, content: [{ raw: html`
` }], corePlugins: { preflight: false }, diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index c7a88df35b34..295be0642041 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .inset-\[11px\] { top: 11px; right: 11px; diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index f0cfc8a47ed2..9c310b1a5bbc 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('arbitrary values', () => { let config = { @@ -27,6 +27,7 @@ it('should be possible to differentiate between decoration utilities', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .decoration-\[\#ccc\] { text-decoration-color: #ccc; } @@ -49,6 +50,7 @@ it('should support modifiers for arbitrary values that contain the separator', ( return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .hover\:bg-\[url\(\'https\:\/\/github\.com\/tailwindlabs\.png\'\)\]:hover { background-image: url('https://github.com/tailwindlabs.png'); } @@ -79,6 +81,7 @@ it('should support arbitrary values for various background utilities', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); @@ -118,7 +121,9 @@ it('should not generate any css if an unknown typehint is used', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchFormattedCss(css``) + return expect(result.css).toMatchFormattedCss(css` + ${defaults} + `) }) }) @@ -127,6 +132,7 @@ it('should handle unknown typehints', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .w-\[length\:12px\] { width: 12px; } @@ -139,7 +145,10 @@ it('should convert _ to spaces', () => { // into an issue with `\2c ` escapes. If we use `\2c ` then JS complains // about strict mode. But `\\2c ` is not what it expected. function css(templates) { - return templates.join('') + return ` + ${defaults}\n + ${templates.join('')} + ` } let config = { @@ -244,6 +253,7 @@ it('should not convert escaped underscores with spaces', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .content-\[\'snake\\_case\'\] { --tw-content: 'snake_case'; content: var(--tw-content); @@ -260,7 +270,9 @@ it('should warn and not generate if arbitrary values are ambiguous', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchFormattedCss(css``) + return expect(result.css).toMatchFormattedCss(css` + ${defaults} + `) }) }) @@ -273,6 +285,7 @@ it('should support colons in URLs', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-\[url\(\'https\:\/\/www\.spacejam\.com\/1996\/img\/bg_stars\.gif\'\)\] { background-image: url('https://www.spacejam.com/1996/img/bg_stars.gif'); } @@ -289,6 +302,7 @@ it('should support unescaped underscores in URLs', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(` + ${defaults} .bg-\\[url\\(\\'brown_potato\\.jpg\\'\\)\\2c _url\\(\\'red_tomato\\.png\\'\\)\\] { background-image: url('brown_potato.jpg'), url('red_tomato.png'); } @@ -309,6 +323,7 @@ it('should be possible to read theme values in arbitrary values (without quotes) return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .w-\[theme\(spacing\.1\)\] { width: calc(1 * 0.25rem); } @@ -332,6 +347,7 @@ it('should be possible to read theme values in arbitrary values (with quotes)', return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .w-\[theme\(\'spacing\.1\'\)\] { width: calc(1 * 0.25rem); } diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 2058a92cbe6c..853a1fb6b99e 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { html, run, css } from './util/run' +import { html, run, css, defaults } from './util/run' test('basic usage', () => { let config = { @@ -46,6 +46,7 @@ test('all plugins are executed that match a candidate', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-green-light { --tw-bg-opacity: 1; background-color: rgb(0 128 0 / var(--tw-bg-opacity)); @@ -98,6 +99,7 @@ test('per-plugin colors with the same key can differ when using a custom colors return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-theme { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); diff --git a/tests/collapse-duplicate-declarations.test.js b/tests/collapse-duplicate-declarations.test.js index db165186469b..31d8d28c8873 100644 --- a/tests/collapse-duplicate-declarations.test.js +++ b/tests/collapse-duplicate-declarations.test.js @@ -1,4 +1,4 @@ -import { run, css, html } from './util/run' +import { run, css, html, defaults } from './util/run' it('should collapse duplicate declarations with the same units (px)', () => { let config = { @@ -20,6 +20,7 @@ it('should collapse duplicate declarations with the same units (px)', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .example { height: 200px; } @@ -47,6 +48,7 @@ it('should collapse duplicate declarations with the same units (no unit)', () => return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .example { line-height: 2; } @@ -74,6 +76,7 @@ it('should not collapse duplicate declarations with the different units', () => return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .example { height: 100px; height: 50%; @@ -106,6 +109,7 @@ it('should collapse the duplicate declarations with the same unit, but leave the return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .example { height: 200px; height: 100%; @@ -136,6 +140,7 @@ it('should collapse the duplicate declarations with the exact same value', () => return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .example { color: blue; height: var(--value); @@ -165,6 +170,7 @@ it('should work on a real world example', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .h-available { height: 100%; height: 100vh; diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js index fa881ff9543e..1e463b1db229 100644 --- a/tests/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -1,4 +1,4 @@ -import { run, css, html } from './util/run' +import { run, css, html, defaults } from './util/run' test('basic color opacity modifier', async () => { let config = { @@ -7,6 +7,7 @@ test('basic color opacity modifier', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-red-500\/50 { background-color: rgb(239 68 68 / 0.5); } @@ -28,6 +29,7 @@ test('colors with slashes are matched first', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-red-500\/50 { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); @@ -43,6 +45,7 @@ test('arbitrary color opacity modifier', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-red-500\/\[var\(--opacity\)\] { background-color: rgb(239 68 68 / var(--opacity)); } @@ -56,7 +59,7 @@ test('missing alpha generates nothing', async () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchFormattedCss(``) + expect(result.css).toMatchFormattedCss(`${defaults}`) }) }) @@ -69,6 +72,7 @@ test('arbitrary color with opacity from scale', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-\[wheat\]\/50 { background-color: rgb(245 222 179 / 0.5); } @@ -85,6 +89,7 @@ test('arbitrary color with arbitrary opacity', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-\[\#bada55\]\/\[0\.2\] { background-color: rgb(186 218 85 / 0.2); } @@ -100,7 +105,7 @@ test('undefined theme color with opacity from scale', async () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchFormattedCss(``) + expect(result.css).toMatchFormattedCss(`${defaults}`) }) }) @@ -119,7 +124,7 @@ test('values not in the opacity config are ignored', async () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchFormattedCss(``) + expect(result.css).toMatchFormattedCss(`${defaults}`) }) }) @@ -137,6 +142,7 @@ test('function colors are supported', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .bg-blue\/50 { background-color: rgba(var(--colors-blue), 0.5); } @@ -165,6 +171,7 @@ test('utilities that support any type are supported', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .from-red-500\/50 { --tw-gradient-from: rgb(239 68 68 / 0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0)); diff --git a/tests/combined-selectors.test.js b/tests/combined-selectors.test.js index 585bea11ee34..e42435416d32 100644 --- a/tests/combined-selectors.test.js +++ b/tests/combined-selectors.test.js @@ -66,6 +66,7 @@ it('should generate the partial selector, if only a partial is used (utilities l return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} :root { font-weight: bold; } diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js index 51b7093b9b22..b12659a77acf 100644 --- a/tests/containerPlugin.test.js +++ b/tests/containerPlugin.test.js @@ -1,10 +1,11 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('options are not required', () => { let config = { content: [{ raw: html`
` }] } return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { width: 100%; } @@ -49,6 +50,7 @@ test('screens can be passed explicitly', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { width: 100%; } @@ -78,6 +80,7 @@ test('screens are ordered ascending by min-width', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { width: 100%; } @@ -111,6 +114,7 @@ test('screens are deduplicated by min-width', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { width: 100%; } @@ -140,6 +144,7 @@ test('the container can be centered by default', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { width: 100%; margin-right: auto; @@ -186,6 +191,7 @@ test('horizontal padding can be included by default', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { width: 100%; padding-right: 2rem; @@ -243,6 +249,7 @@ test('responsive horizontal padding can be included by default', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { width: 100%; padding-right: 1rem; @@ -292,6 +299,7 @@ test('setting all options at once', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .container { width: 100%; margin-right: auto; @@ -325,6 +333,7 @@ test('container can use variants', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @media (min-width: 1024px) { .lg\:hover\:container:hover { width: 100%; diff --git a/tests/custom-extractors.test.css b/tests/custom-extractors.test.css index 837a02f653db..291dfdd4b913 100644 --- a/tests/custom-extractors.test.css +++ b/tests/custom-extractors.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index c3e7a3916cd9..debdf2d3cd65 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -27,6 +27,7 @@ test('plugins can create utilities with object syntax', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-object-fill { object-fit: fill; } @@ -68,6 +69,7 @@ test('plugins can create utilities with arrays of objects', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-object-fill { object-fit: fill; } @@ -116,6 +118,7 @@ test('plugins can create utilities with raw PostCSS nodes', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-object-fill { object-fit: fill; } @@ -163,6 +166,7 @@ test('plugins can create utilities with mixed object styles and PostCSS nodes', return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-object-fill { object-fit: fill; } @@ -202,6 +206,7 @@ test('plugins can create components with object syntax', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .btn-blue { background-color: blue; color: white; @@ -333,6 +338,7 @@ test('plugins can create components with raw PostCSS nodes', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .btn-blue { background-color: blue; color: white; @@ -386,6 +392,7 @@ test('plugins can create components with mixed object styles and raw PostCSS nod return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .btn-blue { background-color: blue; color: white; @@ -434,6 +441,7 @@ test('plugins can create components with media queries with object syntax', () = return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-container { width: 100%; } @@ -495,6 +503,7 @@ test('media queries can be defined multiple times using objects-in-array syntax' return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-container { width: 100%; } @@ -549,6 +558,7 @@ test('plugins can create nested rules', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .btn-blue { background-color: blue; color: white; @@ -589,6 +599,7 @@ test('plugins can create rules with escaped selectors', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-top-1\/4 { top: 25%; } @@ -632,6 +643,7 @@ test('plugins can access the current config', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-container { width: 100%; } @@ -677,6 +689,7 @@ test('plugins can check if corePlugins are enabled', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .test { text-color: false; opacity: true; @@ -735,6 +748,7 @@ test('plugins can provide fallbacks to keys missing from the config', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .btn { border-radius: 0.25rem; } @@ -783,6 +797,7 @@ test('plugins can add multiple sets of utilities and components', () => { return run('@tailwind components; @tailwind utilities;', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .card { padding: 1rem; border-radius: 0.25rem; @@ -819,6 +834,7 @@ test('plugins respect prefix and important options by default when adding utilit return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .tw-custom-rotate-90 { transform: rotate(90deg) !important; } @@ -844,6 +860,7 @@ test('when important is a selector it is used to scope utilities instead of addi return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} #app .tw-custom-rotate-90 { transform: rotate(90deg); } @@ -868,6 +885,7 @@ test('when important is a selector it scopes all selectors in a rule, even thoug return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} #app .custom-rotate-90, #app .custom-rotate-1\/4 { transform: rotate(90deg); @@ -893,6 +911,7 @@ test('important utilities are not made double important when important option is return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-rotate-90 { transform: rotate(90deg) !important; } @@ -917,6 +936,7 @@ test("component declarations respect the 'prefix' option by default", () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .tw-btn-blue { background-color: blue; } @@ -951,6 +971,7 @@ test('all selectors in a rule are prefixed', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .tw-btn-blue, .tw-btn-red { padding: 10px; @@ -979,6 +1000,7 @@ test("component declarations can optionally ignore 'prefix' option", () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .btn-blue { background-color: blue; } @@ -1003,6 +1025,7 @@ test("component declarations are not affected by the 'important' option", () => return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .btn-blue { background-color: blue; } @@ -1030,6 +1053,7 @@ test("plugins can apply the user's chosen prefix to components manually", () => return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .tw-btn-blue { background-color: blue; } @@ -1057,6 +1081,7 @@ test('prefix can optionally be ignored for utilities', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-rotate-90 { transform: rotate(90deg); } @@ -1084,6 +1109,7 @@ test('important can optionally be ignored for utilities', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-rotate-90 { transform: rotate(90deg); } @@ -1111,6 +1137,7 @@ test('prefix will prefix all classes in a selector', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .tw-btn-blue .tw-w-1\/4 > h1.tw-text-xl + a .tw-bar { background-color: blue; } @@ -1146,6 +1173,7 @@ test('plugins can be provided as an object with a handler function', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .custom-object-fill { object-fit: fill; } @@ -1194,6 +1222,7 @@ test('plugins can provide a config but no handler', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .tw-custom-object-fill { object-fit: fill; } @@ -1523,6 +1552,7 @@ test('keyframes are not escaped', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @keyframes abc { 25.001% { color: black; diff --git a/tests/custom-separator.test.css b/tests/custom-separator.test.css index 61984cf26801..bcf92109c7da 100644 --- a/tests/custom-separator.test.css +++ b/tests/custom-separator.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .group:hover .group-hover_focus-within_text-left:focus-within { text-align: left; } diff --git a/tests/custom-transformers.test.js b/tests/custom-transformers.test.js index e4bea062c42f..e4e3b7584a8f 100644 --- a/tests/custom-transformers.test.js +++ b/tests/custom-transformers.test.js @@ -1,5 +1,5 @@ import path from 'path' -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' function customTransformer(content) { return content.replace(/uppercase/g, 'lowercase') @@ -15,6 +15,7 @@ test('transform function', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .lowercase { text-transform: lowercase; } @@ -34,6 +35,7 @@ test('transform.DEFAULT', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .lowercase { text-transform: lowercase; } @@ -57,6 +59,7 @@ test('transform.{extension}', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .uppercase { text-transform: uppercase; } diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index 55822f85566e..505c00c59b3a 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -10,6 +10,7 @@ test('it uses the values from the custom config file', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -31,6 +32,7 @@ test('custom config can be passed as an object', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -47,6 +49,7 @@ test('custom config path can be passed using `config` property in an object', () return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -97,54 +100,7 @@ test('tailwind.config.cjs is picked up by default', () => { return run('@tailwind utilities').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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } - + ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -171,54 +127,7 @@ test('tailwind.config.js is picked up by default', () => { return run('@tailwind utilities').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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } - + ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -245,53 +154,7 @@ test('tailwind.config.cjs is picked up by default when passing an empty object', return run('@tailwind utilities', {}).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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} @media (min-width: 400px) { .mobile\:font-bold { @@ -319,53 +182,7 @@ test('tailwind.config.js is picked up by default when passing an empty object', return run('@tailwind utilities', {}).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; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; - --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: ; - } + ${defaults} @media (min-width: 400px) { .mobile\:font-bold { @@ -394,6 +211,7 @@ test('the default config can be overridden using the presets key', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .min-h-0 { min-height: 0px; } @@ -424,6 +242,7 @@ test('presets can be functions', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .min-h-0 { min-height: 0px; } @@ -455,6 +274,7 @@ test('the default config can be removed by using an empty presets key in a prese return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .min-h-primary { min-height: 48px; } diff --git a/tests/extractor-edge-cases.test.js b/tests/extractor-edge-cases.test.js index 95025fa7356f..fd9a9dea9c39 100644 --- a/tests/extractor-edge-cases.test.js +++ b/tests/extractor-edge-cases.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('PHP arrays', async () => { let config = { @@ -9,6 +9,7 @@ test('PHP arrays', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .max-w-\[16rem\] { max-width: 16rem; } @@ -21,6 +22,7 @@ test('arbitrary values with quotes', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .content-\[\'hello\]\'\] { --tw-content: 'hello]'; content: var(--tw-content); diff --git a/tests/import-syntax.test.css b/tests/import-syntax.test.css index 66ac9568cf40..46f508083a2c 100644 --- a/tests/import-syntax.test.css +++ b/tests/import-syntax.test.css @@ -1,6 +1,53 @@ 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; + border-color: #e5e7eb; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .container { width: 100%; } diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index 547c81fa06d4..3874827350a3 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -332,6 +332,8 @@ it('should keep `@supports` rules inside `@layer`s', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} + .test { --tw-test: 1; } diff --git a/tests/modify-selectors.test.css b/tests/modify-selectors.test.css index 4947ee2e9b24..64c23f41255f 100644 --- a/tests/modify-selectors.test.css +++ b/tests/modify-selectors.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .markdown > p { margin-top: 12px; } diff --git a/tests/mutable.test.css b/tests/mutable.test.css index 1b3c524bf222..1ee415e86dac 100644 --- a/tests/mutable.test.css +++ b/tests/mutable.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .bg-foo { background-image: url("./foo.png"); } diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js index 92e9e368fa62..c8cd91589ac2 100644 --- a/tests/negative-prefix.test.js +++ b/tests/negative-prefix.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('using a negative prefix with a negative scale value', () => { let config = { @@ -13,6 +13,7 @@ test('using a negative prefix with a negative scale value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .mt-2 { margin-top: 8px; } @@ -35,6 +36,7 @@ test('using a negative scale value with a plugin that does not support dynamic n return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .-opacity-50 { opacity: 0.5; } @@ -54,6 +56,7 @@ test('using a negative prefix without a negative scale value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .mt-5 { margin-top: 20px; } @@ -76,6 +79,7 @@ test('being an asshole', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .-mt-\[10px\] { margin-top: 55px; } @@ -95,6 +99,7 @@ test('being a real asshole', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .-mt-\[10px\] { margin-top: -55px; } @@ -114,6 +119,7 @@ test('a value that includes a variable', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .mt-5 { margin-top: var(--sizing-5); } @@ -136,6 +142,7 @@ test('a value that includes a calc', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .mt-5 { margin-top: calc(52px * -3); } @@ -158,6 +165,7 @@ test('a keyword value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .mt-auto { margin-top: auto; } @@ -177,6 +185,7 @@ test('a zero value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .mt-0 { margin-top: 0; } @@ -198,7 +207,9 @@ test('a color', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css``) + return expect(result.css).toMatchCss(css` + ${defaults} + `) }) }) @@ -209,6 +220,7 @@ test('arbitrary values', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .-mt-\[10px\] { margin-top: -10px; } @@ -228,6 +240,7 @@ test('negating a negative scale value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .-mt-weird { margin-top: 15px; } @@ -247,6 +260,7 @@ test('negating a default value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .-mt { margin-top: -15px; } @@ -267,6 +281,7 @@ test('using a negative prefix with a negative default scale value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .mt { margin-top: 8px; } @@ -290,6 +305,7 @@ test('negating a default value with a configured prefix', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .tw--mt { margin-top: -15px; } @@ -303,6 +319,8 @@ test('arbitrary value keywords should be ignored', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css``) + return expect(result.css).toMatchCss(css` + ${defaults} + `) }) }) diff --git a/tests/normalize-config.test.js b/tests/normalize-config.test.js index 71f304ea84ba..342b63eefdbe 100644 --- a/tests/normalize-config.test.js +++ b/tests/normalize-config.test.js @@ -1,5 +1,5 @@ import { normalizeConfig } from '../src/util/normalizeConfig' -import { run, css } from './util/run' +import { run, css, defaults } from './util/run' import resolveConfig from '../src/public/resolve-config' it.each` @@ -10,6 +10,7 @@ it.each` `('should normalize content $config', ({ config }) => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .text-center { text-align: center; } @@ -25,6 +26,7 @@ it.each` `('should normalize safelist $config', ({ config }) => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .text-center { text-align: center; } @@ -42,6 +44,7 @@ it.each` `('should normalize extractors $config', ({ config }) => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .font-bold { font-weight: 700; } @@ -82,6 +85,7 @@ it('should still be possible to use the "old" v2 config', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .text-center { text-align: center; } diff --git a/tests/opacity.test.js b/tests/opacity.test.js index 6e270eb177c6..dbe92837f761 100644 --- a/tests/opacity.test.js +++ b/tests/opacity.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('opacity', () => { let config = { @@ -25,6 +25,7 @@ test('opacity', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` + ${defaults} .divide-black > :not([hidden]) ~ :not([hidden]) { border-color: #000; } @@ -77,6 +78,7 @@ test('colors defined as functions work when opacity plugins are disabled', () => return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` + ${defaults} .divide-primary > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--color-primary)); } diff --git a/tests/parallel-variants.test.js b/tests/parallel-variants.test.js index 5d58ea347c74..103a7c6de9b0 100644 --- a/tests/parallel-variants.test.js +++ b/tests/parallel-variants.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('basic parallel variants', async () => { let config = { @@ -18,6 +18,7 @@ test('basic parallel variants', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .font-normal { font-weight: 400; } diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js index d772bd4e156c..554f7f975356 100644 --- a/tests/plugins/fontSize.test.js +++ b/tests/plugins/fontSize.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from '../util/run' +import { run, html, css, defaults } from '../util/run' test('font-size utilities can include a default line-height', () => { let config = { @@ -14,6 +14,7 @@ test('font-size utilities can include a default line-height', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` + ${defaults} .text-sm { font-size: 12px; } @@ -43,6 +44,7 @@ test('font-size utilities can include a default letter-spacing', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` + ${defaults} .text-sm { font-size: 12px; } @@ -72,6 +74,7 @@ test('font-size utilities can include a default line-height and letter-spacing', return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` + ${defaults} .text-sm { font-size: 12px; } diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index 9dd5b71de802..de568579ff91 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from '../util/run' +import { run, html, css, defaults } from '../util/run' test('opacity variables are given to colors defined as closures', () => { let config = { @@ -32,6 +32,7 @@ test('opacity variables are given to colors defined as closures', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .from-primary { --tw-gradient-from: rgb(31, 31, 31); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0)); diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 4ab5326f646f..7ed36f058c48 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} .container { width: 100%; } diff --git a/tests/raw-content.test.js b/tests/raw-content.test.js index 5e4c54de9c67..fcaa06391785 100644 --- a/tests/raw-content.test.js +++ b/tests/raw-content.test.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { run, css } from './util/run' +import { run, css, defaults } from './util/run' it('raw content', () => { let config = { @@ -40,6 +40,7 @@ test('raw content with extension', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .invisible { visibility: hidden; } diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index 1684cfdfdb99..e787afa2ef9c 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -1,5 +1,4 @@ import { run, html, css } from './util/run' -import { DEFAULTS_LAYER } from '../src/lib/expandTailwindAtRules' test('basic utilities', async () => { let config = { @@ -26,6 +25,7 @@ test('basic utilities', async () => { --tw-scale-x: 1; --tw-scale-y: 1; } + /* --- */ .rotate-3 { --tw-rotate: 3deg; @@ -76,6 +76,7 @@ test('with pseudo-class variants', async () => { --tw-scale-x: 1; --tw-scale-y: 1; } + /* --- */ .hover\:scale-x-110:hover { --tw-scale-x: 1.1; @@ -124,6 +125,7 @@ test('with pseudo-element variants', async () => { --tw-scale-x: 1; --tw-scale-y: 1; } + /* --- */ .before\:scale-x-110::before { content: var(--tw-content); @@ -168,6 +170,7 @@ test('with multi-class variants', async () => { --tw-scale-x: 1; --tw-scale-y: 1; } + /* --- */ .group:hover .group-hover\:scale-x-110 { --tw-scale-x: 1.1; @@ -212,6 +215,7 @@ test('with multi-class pseudo-element variants', async () => { --tw-scale-x: 1; --tw-scale-y: 1; } + /* --- */ .group:hover .group-hover\:before\:scale-x-110::before { content: var(--tw-content); @@ -262,6 +266,7 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { --tw-scale-x: 1; --tw-scale-y: 1; } + /* --- */ .group:hover .group-hover\:hover\:before\:scale-x-110:hover::before { content: var(--tw-content); @@ -348,6 +353,7 @@ test('with apply', async () => { --tw-scale-x: 1; --tw-scale-y: 1; } + /* --- */ .foo { --tw-rotate: 3deg; @@ -506,6 +512,7 @@ test('with borders', async () => { ::after { border-color: #e5e7eb; } + /* --- */ .border { border-width: 1px; @@ -549,6 +556,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); @@ -605,6 +613,7 @@ test('when no utilities that need the defaults are used', async () => { --tw-scale-x: 1; --tw-scale-y: 1; } + /* --- */ `) }) @@ -735,7 +744,6 @@ test('defaults without @tailwind base', () => { experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], corePlugins: { preflight: false }, - [DEFAULTS_LAYER]: true, } // No @tailwind base directive means that we need to generate the defaults for each of the utility classes in that context @@ -768,7 +776,6 @@ test('defaults and apply without @tailwind base', () => { experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], corePlugins: { preflight: false }, - [DEFAULTS_LAYER]: true, } // No @tailwind base directive means that we need to generate the defaults for each of the utility classes in that context diff --git a/tests/responsive-and-variants-atrules.test.css b/tests/responsive-and-variants-atrules.test.css index 7bcb5dc60620..52680502e4f2 100644 --- a/tests/responsive-and-variants-atrules.test.css +++ b/tests/responsive-and-variants-atrules.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .responsive-in-components { color: blue; } diff --git a/tests/safelist.test.js b/tests/safelist.test.js index d81a6b796ae4..62124d2ef47c 100644 --- a/tests/safelist.test.js +++ b/tests/safelist.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' it('should not safelist anything', () => { let config = { @@ -7,6 +7,7 @@ it('should not safelist anything', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .uppercase { text-transform: uppercase; } @@ -22,6 +23,7 @@ it('should safelist strings', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .mt-\[20px\] { margin-top: 20px; } @@ -59,6 +61,7 @@ it('should safelist based on a pattern regex', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); @@ -108,6 +111,7 @@ it('should not generate duplicates', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); @@ -148,6 +152,7 @@ it('should safelist when using a custom prefix', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .tw-bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); @@ -173,6 +178,7 @@ it('should not safelist when an empty list is provided', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .uppercase { text-transform: uppercase; } @@ -188,6 +194,7 @@ it('should not safelist when an sparse/holey list is provided', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .uppercase { text-transform: uppercase; } @@ -208,6 +215,7 @@ it('should safelist negatives based on a pattern regex', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` + ${defaults} .-top-1 { top: -0.25rem; } diff --git a/tests/syntax-lit-html.test.js b/tests/syntax-lit-html.test.js index dbc8936d8826..c89cd22c45b5 100644 --- a/tests/syntax-lit-html.test.js +++ b/tests/syntax-lit-html.test.js @@ -1,4 +1,4 @@ -import { run } from './util/run' +import { run, defaults } from './util/run' let css = String.raw @@ -16,6 +16,7 @@ test('it detects classes in lit-html templates', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` + ${defaults} .rounded { border-radius: 0.25rem; } diff --git a/tests/syntax-svelte.test.js b/tests/syntax-svelte.test.js index 83e038d1eb53..f16b82a4e8d1 100644 --- a/tests/syntax-svelte.test.js +++ b/tests/syntax-svelte.test.js @@ -1,6 +1,6 @@ import path from 'path' -import { run } from './util/run' +import { run, defaults } from './util/run' let css = String.raw @@ -19,6 +19,7 @@ test('it detects svelte based on the file extension', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` + ${defaults} .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); @@ -65,6 +66,7 @@ test('using raw with svelte extension', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` + ${defaults} .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); diff --git a/tests/tailwind-screens.test.js b/tests/tailwind-screens.test.js index 784bf40c7af7..83255ecb1d80 100644 --- a/tests/tailwind-screens.test.js +++ b/tests/tailwind-screens.test.js @@ -1,4 +1,4 @@ -import { run, html, css } from './util/run' +import { run, html, css, defaults } from './util/run' test('class variants are inserted at `@tailwind variants`', async () => { let config = { @@ -15,6 +15,7 @@ test('class variants are inserted at `@tailwind variants`', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .font-bold { font-weight: 700; } @@ -48,6 +49,7 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async () return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .font-bold { font-weight: 700; } diff --git a/tests/util/defaults.js b/tests/util/defaults.js index 7c0f94c8150e..464d905bf812 100644 --- a/tests/util/defaults.js +++ b/tests/util/defaults.js @@ -1,4 +1,4 @@ -import { css } from "./strings" +import { css } from './strings' export const defaults = css` *, diff --git a/tests/util/run.js b/tests/util/run.js index 7b5548729106..1fedc98bac92 100644 --- a/tests/util/run.js +++ b/tests/util/run.js @@ -1,18 +1,13 @@ 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 * 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}`, }) diff --git a/tests/variants.test.js b/tests/variants.test.js index 058dd5522b08..0876ef7cc66a 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { run, css, html } from './util/run' +import { run, css, html, defaults } from './util/run' test('variants', () => { let config = { @@ -38,6 +38,7 @@ test('order matters and produces different behaviour', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .hover\:file\:bg-pink-600::file-selector-button:hover { --tw-bg-opacity: 1; background-color: rgb(219 39 119 / var(--tw-bg-opacity)); @@ -68,6 +69,7 @@ describe('custom advanced variants', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} :where(.prose-headings\:text-center) :is(h1, h2, h3, h4) { text-align: center; } @@ -94,6 +96,7 @@ describe('custom advanced variants', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} :where(.hover\:prose-headings\:text-center) :is(h1, h2, h3, h4):hover { text-align: center; } @@ -124,6 +127,7 @@ describe('custom advanced variants', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .group:hover :where(.group-hover\:prose-headings\:text-center) :is(h1, h2, h3, h4) { text-align: center; } @@ -156,6 +160,7 @@ describe('custom advanced variants', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} @media screen { .screen\:parent .child { foo: bar; @@ -195,6 +200,7 @@ describe('custom advanced variants', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .test:where(.one, .two, .three) { font-style: italic; } @@ -246,6 +252,7 @@ it('should properly handle keyframes with multiple variants', async () => { let result = await run(input, config) expect(result.css).toMatchFormattedCss(css` + ${defaults} @keyframes spin { to { transform: rotate(360deg); @@ -326,6 +333,7 @@ test('custom addVariant with more complex media query params', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} @media screen and (max-wdith: 600px) { .magic\:text-center { text-align: center; @@ -351,6 +359,7 @@ test('custom addVariant with nested media & format shorthand', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} @supports (hover: hover) { @media print { .magic\:text-center:disabled { @@ -377,6 +386,7 @@ test('before and after variants are a bit special, and forced to the end', () => return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .before\:hover\:text-center:hover::before { content: var(--tw-content); text-align: center; @@ -409,6 +419,7 @@ test('before and after variants are a bit special, and forced to the end (2)', ( return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} :where(.before\:prose-headings\:text-center) :is(h1, h2, h3, h4)::before { content: var(--tw-content); text-align: center; @@ -439,6 +450,7 @@ it('should not generate variants of user css if it is not inside a layer', () => return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .foo { color: red; } @@ -459,6 +471,7 @@ it('should be possible to use responsive modifiers that are defined with special return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} @media (max-width: 399px) { .\ Date: Thu, 6 Jan 2022 10:32:46 -0500 Subject: [PATCH 15/20] WIP --- tests/apply.test.css | 47 ++++++++++ tests/apply.test.js | 6 +- tests/basic-usage.test.js | 9 +- tests/color-opacity-modifiers.test.js | 4 +- tests/customConfig.test.js | 5 +- tests/negative-prefix.test.js | 4 +- tests/opacity.test.js | 4 +- tests/plugins/gradientColorStops.test.js | 4 +- tests/util/defaults.js | 111 +++++++++++++---------- 9 files changed, 135 insertions(+), 59 deletions(-) diff --git a/tests/apply.test.css b/tests/apply.test.css index 5c8a47ff67f6..e301ff7fb30b 100644 --- a/tests/apply.test.css +++ b/tests/apply.test.css @@ -1,3 +1,50 @@ +*, +::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; + border-color: #e5e7eb; + --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: ; +} .basic-example { border-radius: 0.375rem; --tw-bg-opacity: 1; diff --git a/tests/apply.test.js b/tests/apply.test.js index 4d5192f84acd..14a07a39e9f1 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -645,7 +645,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` - ${defaults} [type='range']::-moz-range-thumb { border-color: #e5e7eb; } @@ -804,7 +803,6 @@ it('should be possible to apply user css without tailwind directives', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .bop { color: red; } @@ -842,6 +840,7 @@ it('should be possible to apply a class from another rule with multiple selector return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} .c { text-decoration-line: underline; } @@ -872,6 +871,7 @@ it('should be possible to apply a class from another rule with multiple selector return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} span, .b { text-decoration-line: underline; @@ -906,6 +906,7 @@ it('should be possible to apply a class from another rule with multiple selector return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` + ${defaults} #a, .b { text-decoration-line: underline; @@ -934,7 +935,6 @@ it('apply can emit defaults in isolated environments without @tailwind directive // TODO: Do we want this to work? return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .foo { --tw-translate-x: 0; --tw-translate-y: 0; diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index b936fb85b704..5ae65482e00d 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -46,7 +46,9 @@ test('all plugins are executed that match a candidate', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} + ${defaults({ + defaultBorderColor: 'currentColor', + })} .bg-green-light { --tw-bg-opacity: 1; background-color: rgb(0 128 0 / var(--tw-bg-opacity)); @@ -99,7 +101,9 @@ test('per-plugin colors with the same key can differ when using a custom colors return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} + ${defaults({ + defaultBorderColor: 'currentColor', + })} .bg-theme { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); @@ -130,6 +134,7 @@ it('fasly config values still work', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` + ${defaults} .inset-0 { top: 0; right: 0; diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js index 1e463b1db229..c47e045255c6 100644 --- a/tests/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -142,7 +142,9 @@ test('function colors are supported', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} + ${defaults({ + defaultBorderColor: 'currentColor', + })} .bg-blue\/50 { background-color: rgba(var(--colors-blue), 0.5); } diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index 505c00c59b3a..5e562c4f90fa 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -274,7 +274,10 @@ test('the default config can be removed by using an empty presets key in a prese return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} + ${defaults({ + defaultBorderColor: 'currentColor', + defaultRingColor: 'rgb(147 197 253 / 0.5)', + })} .min-h-primary { min-height: 48px; } diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js index c8cd91589ac2..d2da85aa061f 100644 --- a/tests/negative-prefix.test.js +++ b/tests/negative-prefix.test.js @@ -208,7 +208,9 @@ test('a color', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} + ${defaults({ + defaultBorderColor: 'currentColor', + })} `) }) }) diff --git a/tests/opacity.test.js b/tests/opacity.test.js index dbe92837f761..9f2d1478022f 100644 --- a/tests/opacity.test.js +++ b/tests/opacity.test.js @@ -78,7 +78,9 @@ test('colors defined as functions work when opacity plugins are disabled', () => return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults} + ${defaults({ + defaultBorderColor: 'currentColor', + })} .divide-primary > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--color-primary)); } diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index de568579ff91..69fc06c7ab7d 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -32,7 +32,9 @@ test('opacity variables are given to colors defined as closures', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} + ${defaults({ + defaultBorderColor: 'currentColor', + })} .from-primary { --tw-gradient-from: rgb(31, 31, 31); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0)); diff --git a/tests/util/defaults.js b/tests/util/defaults.js index 464d905bf812..7a0317e74240 100644 --- a/tests/util/defaults.js +++ b/tests/util/defaults.js @@ -1,51 +1,64 @@ import { css } from './strings' -export const defaults = 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; - border-color: #e5e7eb; - --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: ; - } -` +/** + * @param {object} param0 + * @param {string} [param0.defaultBorderColor] + * @param {string} [param0.defaultRingColor] + * @returns {string} + */ +export function defaults({ + defaultBorderColor = `#e5e7eb`, + 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; + border-color: ${defaultBorderColor}; + --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() From c2ee08ca7bd885dcc214fab599732ff91481852e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Jan 2022 09:47:08 -0500 Subject: [PATCH 16/20] WIP --- src/lib/expandTailwindAtRules.js | 2 - tests/animations.test.js | 7 +-- tests/apply.test.css | 47 ------------------- tests/apply.test.js | 20 -------- tests/arbitrary-values.test.css | 47 ------------------- tests/arbitrary-values.test.js | 24 ++-------- tests/basic-usage.test.js | 9 +--- tests/collapse-duplicate-declarations.test.js | 8 +--- tests/color-opacity-modifiers.test.js | 17 ++----- tests/combined-selectors.test.js | 1 - tests/containerPlugin.test.js | 11 +---- tests/custom-extractors.test.css | 47 ------------------- tests/custom-plugins.test.js | 30 ------------ tests/custom-separator.test.css | 47 ------------------- tests/custom-transformers.test.js | 5 +- tests/customConfig.test.js | 19 +------- tests/extractor-edge-cases.test.js | 4 +- tests/layer-at-rules.test.js | 2 - tests/modify-selectors.test.css | 47 ------------------- tests/mutable.test.css | 47 ------------------- tests/negated-content.test.js | 1 - tests/negative-prefix.test.js | 26 ++-------- tests/normalize-config.test.js | 6 +-- tests/opacity.test.js | 6 +-- tests/parallel-variants.test.js | 3 +- tests/plugins/fontSize.test.js | 5 +- tests/plugins/gradientColorStops.test.js | 5 +- tests/raw-content.test.css | 47 ------------------- tests/raw-content.test.js | 3 +- tests/resolve-defaults-at-rules.test.js | 22 +++------ .../responsive-and-variants-atrules.test.css | 47 ------------------- tests/safelist.test.js | 10 +--- tests/syntax-lit-html.test.js | 3 +- tests/syntax-svelte.test.js | 4 +- tests/tailwind-screens.test.js | 4 +- tests/variants.test.js | 15 +----- 36 files changed, 35 insertions(+), 613 deletions(-) diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index c461485c6243..f9da100acac4 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -209,8 +209,6 @@ export default function expandTailwindAtRules(context) { // compiled in an isolated environment like CSS modules if (layerNodes.base) { layerNodes.base.after(cloneNodes([...defaultNodes], root.source)) - } else { - root.prepend(cloneNodes([...defaultNodes], root.source)) } if (layerNodes.base) { diff --git a/tests/animations.test.js b/tests/animations.test.js index 475759b9333d..0a77a4c4e415 100644 --- a/tests/animations.test.js +++ b/tests/animations.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' test('basic', () => { let config = { @@ -15,7 +15,6 @@ test('basic', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @keyframes spin { to { transform: rotate(360deg); @@ -69,7 +68,6 @@ test('custom', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @keyframes one { to { transform: rotate(360deg); @@ -100,7 +98,6 @@ test('custom prefixed', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @keyframes tw-one { to { transform: rotate(360deg); @@ -127,7 +124,6 @@ test('multiple', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @keyframes bounce { 0%, 100% { @@ -169,7 +165,6 @@ test('multiple custom', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @keyframes one { to { transform: rotate(360deg); diff --git a/tests/apply.test.css b/tests/apply.test.css index e301ff7fb30b..5c8a47ff67f6 100644 --- a/tests/apply.test.css +++ b/tests/apply.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .basic-example { border-radius: 0.375rem; --tw-bg-opacity: 1; diff --git a/tests/apply.test.js b/tests/apply.test.js index 14a07a39e9f1..16b476363358 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -283,7 +283,6 @@ test('@apply classes from outside a @layer', async () => { await run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .font-bold { font-weight: 700; } @@ -351,7 +350,6 @@ test('@applying classes from outside a @layer respects the source order', async await run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .baz { text-decoration-line: underline; text-decoration-line: none; @@ -420,7 +418,6 @@ it('should remove duplicate properties when using apply with similar properties' return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .foo { position: absolute; top: 50%; @@ -464,7 +461,6 @@ it('should apply all the definitions of a class', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .foo { position: relative; --tw-aspect-w: 1; @@ -546,7 +542,6 @@ it('should not throw when the selector is different (but contains the base parti return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .bg-gray-500 { --tw-bg-opacity: 1; background-color: rgb(107 114 128 / var(--tw-bg-opacity)); @@ -682,7 +677,6 @@ it('should be possible to apply user css', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .foo { color: red; } @@ -754,7 +748,6 @@ it('should not apply unrelated siblings when applying something from within atru return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .foo { font-weight: bold; color: green; @@ -840,7 +833,6 @@ it('should be possible to apply a class from another rule with multiple selector return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .c { text-decoration-line: underline; } @@ -871,7 +863,6 @@ it('should be possible to apply a class from another rule with multiple selector return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} span, .b { text-decoration-line: underline; @@ -906,7 +897,6 @@ it('should be possible to apply a class from another rule with multiple selector return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} #a, .b { text-decoration-line: underline; @@ -932,18 +922,8 @@ it('apply can emit defaults in isolated environments without @tailwind directive } ` - // TODO: Do we want this to work? 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; - } .foo:focus { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 295be0642041..c7a88df35b34 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .inset-\[11px\] { top: 11px; right: 11px; diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 9c310b1a5bbc..f0cfc8a47ed2 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' test('arbitrary values', () => { let config = { @@ -27,7 +27,6 @@ it('should be possible to differentiate between decoration utilities', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .decoration-\[\#ccc\] { text-decoration-color: #ccc; } @@ -50,7 +49,6 @@ it('should support modifiers for arbitrary values that contain the separator', ( return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .hover\:bg-\[url\(\'https\:\/\/github\.com\/tailwindlabs\.png\'\)\]:hover { background-image: url('https://github.com/tailwindlabs.png'); } @@ -81,7 +79,6 @@ it('should support arbitrary values for various background utilities', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); @@ -121,9 +118,7 @@ it('should not generate any css if an unknown typehint is used', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchFormattedCss(css` - ${defaults} - `) + return expect(result.css).toMatchFormattedCss(css``) }) }) @@ -132,7 +127,6 @@ it('should handle unknown typehints', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .w-\[length\:12px\] { width: 12px; } @@ -145,10 +139,7 @@ it('should convert _ to spaces', () => { // into an issue with `\2c ` escapes. If we use `\2c ` then JS complains // about strict mode. But `\\2c ` is not what it expected. function css(templates) { - return ` - ${defaults}\n - ${templates.join('')} - ` + return templates.join('') } let config = { @@ -253,7 +244,6 @@ it('should not convert escaped underscores with spaces', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .content-\[\'snake\\_case\'\] { --tw-content: 'snake_case'; content: var(--tw-content); @@ -270,9 +260,7 @@ it('should warn and not generate if arbitrary values are ambiguous', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchFormattedCss(css` - ${defaults} - `) + return expect(result.css).toMatchFormattedCss(css``) }) }) @@ -285,7 +273,6 @@ it('should support colons in URLs', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .bg-\[url\(\'https\:\/\/www\.spacejam\.com\/1996\/img\/bg_stars\.gif\'\)\] { background-image: url('https://www.spacejam.com/1996/img/bg_stars.gif'); } @@ -302,7 +289,6 @@ it('should support unescaped underscores in URLs', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(` - ${defaults} .bg-\\[url\\(\\'brown_potato\\.jpg\\'\\)\\2c _url\\(\\'red_tomato\\.png\\'\\)\\] { background-image: url('brown_potato.jpg'), url('red_tomato.png'); } @@ -323,7 +309,6 @@ it('should be possible to read theme values in arbitrary values (without quotes) return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .w-\[theme\(spacing\.1\)\] { width: calc(1 * 0.25rem); } @@ -347,7 +332,6 @@ it('should be possible to read theme values in arbitrary values (with quotes)', return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .w-\[theme\(\'spacing\.1\'\)\] { width: calc(1 * 0.25rem); } diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 5ae65482e00d..9d7db9bf7eaa 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { html, run, css, defaults } from './util/run' +import { html, run, css } from './util/run' test('basic usage', () => { let config = { @@ -46,9 +46,6 @@ test('all plugins are executed that match a candidate', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults({ - defaultBorderColor: 'currentColor', - })} .bg-green-light { --tw-bg-opacity: 1; background-color: rgb(0 128 0 / var(--tw-bg-opacity)); @@ -101,9 +98,6 @@ test('per-plugin colors with the same key can differ when using a custom colors return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults({ - defaultBorderColor: 'currentColor', - })} .bg-theme { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); @@ -134,7 +128,6 @@ it('fasly config values still work', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .inset-0 { top: 0; right: 0; diff --git a/tests/collapse-duplicate-declarations.test.js b/tests/collapse-duplicate-declarations.test.js index 31d8d28c8873..db165186469b 100644 --- a/tests/collapse-duplicate-declarations.test.js +++ b/tests/collapse-duplicate-declarations.test.js @@ -1,4 +1,4 @@ -import { run, css, html, defaults } from './util/run' +import { run, css, html } from './util/run' it('should collapse duplicate declarations with the same units (px)', () => { let config = { @@ -20,7 +20,6 @@ it('should collapse duplicate declarations with the same units (px)', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .example { height: 200px; } @@ -48,7 +47,6 @@ it('should collapse duplicate declarations with the same units (no unit)', () => return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .example { line-height: 2; } @@ -76,7 +74,6 @@ it('should not collapse duplicate declarations with the different units', () => return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .example { height: 100px; height: 50%; @@ -109,7 +106,6 @@ it('should collapse the duplicate declarations with the same unit, but leave the return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .example { height: 200px; height: 100%; @@ -140,7 +136,6 @@ it('should collapse the duplicate declarations with the exact same value', () => return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .example { color: blue; height: var(--value); @@ -170,7 +165,6 @@ it('should work on a real world example', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .h-available { height: 100%; height: 100vh; diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js index c47e045255c6..fa881ff9543e 100644 --- a/tests/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -1,4 +1,4 @@ -import { run, css, html, defaults } from './util/run' +import { run, css, html } from './util/run' test('basic color opacity modifier', async () => { let config = { @@ -7,7 +7,6 @@ test('basic color opacity modifier', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .bg-red-500\/50 { background-color: rgb(239 68 68 / 0.5); } @@ -29,7 +28,6 @@ test('colors with slashes are matched first', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .bg-red-500\/50 { --tw-bg-opacity: 1; background-color: rgb(255 0 0 / var(--tw-bg-opacity)); @@ -45,7 +43,6 @@ test('arbitrary color opacity modifier', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .bg-red-500\/\[var\(--opacity\)\] { background-color: rgb(239 68 68 / var(--opacity)); } @@ -59,7 +56,7 @@ test('missing alpha generates nothing', async () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchFormattedCss(`${defaults}`) + expect(result.css).toMatchFormattedCss(``) }) }) @@ -72,7 +69,6 @@ test('arbitrary color with opacity from scale', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .bg-\[wheat\]\/50 { background-color: rgb(245 222 179 / 0.5); } @@ -89,7 +85,6 @@ test('arbitrary color with arbitrary opacity', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .bg-\[\#bada55\]\/\[0\.2\] { background-color: rgb(186 218 85 / 0.2); } @@ -105,7 +100,7 @@ test('undefined theme color with opacity from scale', async () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchFormattedCss(`${defaults}`) + expect(result.css).toMatchFormattedCss(``) }) }) @@ -124,7 +119,7 @@ test('values not in the opacity config are ignored', async () => { } return run('@tailwind utilities', config).then((result) => { - expect(result.css).toMatchFormattedCss(`${defaults}`) + expect(result.css).toMatchFormattedCss(``) }) }) @@ -142,9 +137,6 @@ test('function colors are supported', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults({ - defaultBorderColor: 'currentColor', - })} .bg-blue\/50 { background-color: rgba(var(--colors-blue), 0.5); } @@ -173,7 +165,6 @@ test('utilities that support any type are supported', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .from-red-500\/50 { --tw-gradient-from: rgb(239 68 68 / 0.5); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0)); diff --git a/tests/combined-selectors.test.js b/tests/combined-selectors.test.js index e42435416d32..585bea11ee34 100644 --- a/tests/combined-selectors.test.js +++ b/tests/combined-selectors.test.js @@ -66,7 +66,6 @@ it('should generate the partial selector, if only a partial is used (utilities l return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} :root { font-weight: bold; } diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js index b12659a77acf..51b7093b9b22 100644 --- a/tests/containerPlugin.test.js +++ b/tests/containerPlugin.test.js @@ -1,11 +1,10 @@ -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' test('options are not required', () => { let config = { content: [{ raw: html`
` }] } return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .container { width: 100%; } @@ -50,7 +49,6 @@ test('screens can be passed explicitly', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .container { width: 100%; } @@ -80,7 +78,6 @@ test('screens are ordered ascending by min-width', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .container { width: 100%; } @@ -114,7 +111,6 @@ test('screens are deduplicated by min-width', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .container { width: 100%; } @@ -144,7 +140,6 @@ test('the container can be centered by default', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .container { width: 100%; margin-right: auto; @@ -191,7 +186,6 @@ test('horizontal padding can be included by default', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .container { width: 100%; padding-right: 2rem; @@ -249,7 +243,6 @@ test('responsive horizontal padding can be included by default', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .container { width: 100%; padding-right: 1rem; @@ -299,7 +292,6 @@ test('setting all options at once', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .container { width: 100%; margin-right: auto; @@ -333,7 +325,6 @@ test('container can use variants', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @media (min-width: 1024px) { .lg\:hover\:container:hover { width: 100%; diff --git a/tests/custom-extractors.test.css b/tests/custom-extractors.test.css index 291dfdd4b913..837a02f653db 100644 --- a/tests/custom-extractors.test.css +++ b/tests/custom-extractors.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index debdf2d3cd65..c3e7a3916cd9 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -27,7 +27,6 @@ test('plugins can create utilities with object syntax', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-object-fill { object-fit: fill; } @@ -69,7 +68,6 @@ test('plugins can create utilities with arrays of objects', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-object-fill { object-fit: fill; } @@ -118,7 +116,6 @@ test('plugins can create utilities with raw PostCSS nodes', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-object-fill { object-fit: fill; } @@ -166,7 +163,6 @@ test('plugins can create utilities with mixed object styles and PostCSS nodes', return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-object-fill { object-fit: fill; } @@ -206,7 +202,6 @@ test('plugins can create components with object syntax', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .btn-blue { background-color: blue; color: white; @@ -338,7 +333,6 @@ test('plugins can create components with raw PostCSS nodes', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .btn-blue { background-color: blue; color: white; @@ -392,7 +386,6 @@ test('plugins can create components with mixed object styles and raw PostCSS nod return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .btn-blue { background-color: blue; color: white; @@ -441,7 +434,6 @@ test('plugins can create components with media queries with object syntax', () = return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-container { width: 100%; } @@ -503,7 +495,6 @@ test('media queries can be defined multiple times using objects-in-array syntax' return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-container { width: 100%; } @@ -558,7 +549,6 @@ test('plugins can create nested rules', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .btn-blue { background-color: blue; color: white; @@ -599,7 +589,6 @@ test('plugins can create rules with escaped selectors', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-top-1\/4 { top: 25%; } @@ -643,7 +632,6 @@ test('plugins can access the current config', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-container { width: 100%; } @@ -689,7 +677,6 @@ test('plugins can check if corePlugins are enabled', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .test { text-color: false; opacity: true; @@ -748,7 +735,6 @@ test('plugins can provide fallbacks to keys missing from the config', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .btn { border-radius: 0.25rem; } @@ -797,7 +783,6 @@ test('plugins can add multiple sets of utilities and components', () => { return run('@tailwind components; @tailwind utilities;', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .card { padding: 1rem; border-radius: 0.25rem; @@ -834,7 +819,6 @@ test('plugins respect prefix and important options by default when adding utilit return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .tw-custom-rotate-90 { transform: rotate(90deg) !important; } @@ -860,7 +844,6 @@ test('when important is a selector it is used to scope utilities instead of addi return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} #app .tw-custom-rotate-90 { transform: rotate(90deg); } @@ -885,7 +868,6 @@ test('when important is a selector it scopes all selectors in a rule, even thoug return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} #app .custom-rotate-90, #app .custom-rotate-1\/4 { transform: rotate(90deg); @@ -911,7 +893,6 @@ test('important utilities are not made double important when important option is return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-rotate-90 { transform: rotate(90deg) !important; } @@ -936,7 +917,6 @@ test("component declarations respect the 'prefix' option by default", () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .tw-btn-blue { background-color: blue; } @@ -971,7 +951,6 @@ test('all selectors in a rule are prefixed', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .tw-btn-blue, .tw-btn-red { padding: 10px; @@ -1000,7 +979,6 @@ test("component declarations can optionally ignore 'prefix' option", () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .btn-blue { background-color: blue; } @@ -1025,7 +1003,6 @@ test("component declarations are not affected by the 'important' option", () => return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .btn-blue { background-color: blue; } @@ -1053,7 +1030,6 @@ test("plugins can apply the user's chosen prefix to components manually", () => return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .tw-btn-blue { background-color: blue; } @@ -1081,7 +1057,6 @@ test('prefix can optionally be ignored for utilities', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-rotate-90 { transform: rotate(90deg); } @@ -1109,7 +1084,6 @@ test('important can optionally be ignored for utilities', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-rotate-90 { transform: rotate(90deg); } @@ -1137,7 +1111,6 @@ test('prefix will prefix all classes in a selector', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .tw-btn-blue .tw-w-1\/4 > h1.tw-text-xl + a .tw-bar { background-color: blue; } @@ -1173,7 +1146,6 @@ test('plugins can be provided as an object with a handler function', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .custom-object-fill { object-fit: fill; } @@ -1222,7 +1194,6 @@ test('plugins can provide a config but no handler', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .tw-custom-object-fill { object-fit: fill; } @@ -1552,7 +1523,6 @@ test('keyframes are not escaped', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @keyframes abc { 25.001% { color: black; diff --git a/tests/custom-separator.test.css b/tests/custom-separator.test.css index bcf92109c7da..61984cf26801 100644 --- a/tests/custom-separator.test.css +++ b/tests/custom-separator.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .group:hover .group-hover_focus-within_text-left:focus-within { text-align: left; } diff --git a/tests/custom-transformers.test.js b/tests/custom-transformers.test.js index e4e3b7584a8f..e4bea062c42f 100644 --- a/tests/custom-transformers.test.js +++ b/tests/custom-transformers.test.js @@ -1,5 +1,5 @@ import path from 'path' -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' function customTransformer(content) { return content.replace(/uppercase/g, 'lowercase') @@ -15,7 +15,6 @@ test('transform function', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .lowercase { text-transform: lowercase; } @@ -35,7 +34,6 @@ test('transform.DEFAULT', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .lowercase { text-transform: lowercase; } @@ -59,7 +57,6 @@ test('transform.{extension}', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .uppercase { text-transform: uppercase; } diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index 5e562c4f90fa..baea15d76884 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -3,14 +3,13 @@ import path from 'path' import { cjsConfigFile, defaultConfigFile } from '../src/constants' import inTempDirectory from '../jest/runInTempDirectory' -import { run, html, css, javascript, defaults } from './util/run' +import { run, html, css, javascript } from './util/run' test('it uses the values from the custom config file', () => { let config = require(path.resolve(`${__dirname}/fixtures/custom-config.js`)) return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -32,7 +31,6 @@ test('custom config can be passed as an object', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -49,7 +47,6 @@ test('custom config path can be passed using `config` property in an object', () return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -73,8 +70,6 @@ test('custom config can be passed under the `config` property', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} - @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -100,7 +95,6 @@ test('tailwind.config.cjs is picked up by default', () => { return run('@tailwind utilities').then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -127,7 +121,6 @@ test('tailwind.config.js is picked up by default', () => { return run('@tailwind utilities').then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -154,8 +147,6 @@ test('tailwind.config.cjs is picked up by default when passing an empty object', return run('@tailwind utilities', {}).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} - @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -182,8 +173,6 @@ test('tailwind.config.js is picked up by default when passing an empty object', return run('@tailwind utilities', {}).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} - @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; @@ -211,7 +200,6 @@ test('the default config can be overridden using the presets key', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .min-h-0 { min-height: 0px; } @@ -242,7 +230,6 @@ test('presets can be functions', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .min-h-0 { min-height: 0px; } @@ -274,10 +261,6 @@ test('the default config can be removed by using an empty presets key in a prese return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults({ - defaultBorderColor: 'currentColor', - defaultRingColor: 'rgb(147 197 253 / 0.5)', - })} .min-h-primary { min-height: 48px; } diff --git a/tests/extractor-edge-cases.test.js b/tests/extractor-edge-cases.test.js index fd9a9dea9c39..95025fa7356f 100644 --- a/tests/extractor-edge-cases.test.js +++ b/tests/extractor-edge-cases.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' test('PHP arrays', async () => { let config = { @@ -9,7 +9,6 @@ test('PHP arrays', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .max-w-\[16rem\] { max-width: 16rem; } @@ -22,7 +21,6 @@ test('arbitrary values with quotes', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .content-\[\'hello\]\'\] { --tw-content: 'hello]'; content: var(--tw-content); diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index 3874827350a3..547c81fa06d4 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -332,8 +332,6 @@ it('should keep `@supports` rules inside `@layer`s', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} - .test { --tw-test: 1; } diff --git a/tests/modify-selectors.test.css b/tests/modify-selectors.test.css index 64c23f41255f..4947ee2e9b24 100644 --- a/tests/modify-selectors.test.css +++ b/tests/modify-selectors.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .markdown > p { margin-top: 12px; } diff --git a/tests/mutable.test.css b/tests/mutable.test.css index 1ee415e86dac..1b3c524bf222 100644 --- a/tests/mutable.test.css +++ b/tests/mutable.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .bg-foo { background-image: url("./foo.png"); } diff --git a/tests/negated-content.test.js b/tests/negated-content.test.js index cb85ce901d98..6d46e3a8d231 100644 --- a/tests/negated-content.test.js +++ b/tests/negated-content.test.js @@ -19,7 +19,6 @@ it('should be possible to use negated content patterns', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` ${defaults} - .uppercase { text-transform: uppercase; } diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js index d2da85aa061f..92e9e368fa62 100644 --- a/tests/negative-prefix.test.js +++ b/tests/negative-prefix.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' test('using a negative prefix with a negative scale value', () => { let config = { @@ -13,7 +13,6 @@ test('using a negative prefix with a negative scale value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .mt-2 { margin-top: 8px; } @@ -36,7 +35,6 @@ test('using a negative scale value with a plugin that does not support dynamic n return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .-opacity-50 { opacity: 0.5; } @@ -56,7 +54,6 @@ test('using a negative prefix without a negative scale value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .mt-5 { margin-top: 20px; } @@ -79,7 +76,6 @@ test('being an asshole', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .-mt-\[10px\] { margin-top: 55px; } @@ -99,7 +95,6 @@ test('being a real asshole', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .-mt-\[10px\] { margin-top: -55px; } @@ -119,7 +114,6 @@ test('a value that includes a variable', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .mt-5 { margin-top: var(--sizing-5); } @@ -142,7 +136,6 @@ test('a value that includes a calc', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .mt-5 { margin-top: calc(52px * -3); } @@ -165,7 +158,6 @@ test('a keyword value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .mt-auto { margin-top: auto; } @@ -185,7 +177,6 @@ test('a zero value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .mt-0 { margin-top: 0; } @@ -207,11 +198,7 @@ test('a color', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` - ${defaults({ - defaultBorderColor: 'currentColor', - })} - `) + return expect(result.css).toMatchCss(css``) }) }) @@ -222,7 +209,6 @@ test('arbitrary values', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .-mt-\[10px\] { margin-top: -10px; } @@ -242,7 +228,6 @@ test('negating a negative scale value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .-mt-weird { margin-top: 15px; } @@ -262,7 +247,6 @@ test('negating a default value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .-mt { margin-top: -15px; } @@ -283,7 +267,6 @@ test('using a negative prefix with a negative default scale value', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .mt { margin-top: 8px; } @@ -307,7 +290,6 @@ test('negating a default value with a configured prefix', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .tw--mt { margin-top: -15px; } @@ -321,8 +303,6 @@ test('arbitrary value keywords should be ignored', () => { } return run('@tailwind utilities', config).then((result) => { - return expect(result.css).toMatchCss(css` - ${defaults} - `) + return expect(result.css).toMatchCss(css``) }) }) diff --git a/tests/normalize-config.test.js b/tests/normalize-config.test.js index 342b63eefdbe..71f304ea84ba 100644 --- a/tests/normalize-config.test.js +++ b/tests/normalize-config.test.js @@ -1,5 +1,5 @@ import { normalizeConfig } from '../src/util/normalizeConfig' -import { run, css, defaults } from './util/run' +import { run, css } from './util/run' import resolveConfig from '../src/public/resolve-config' it.each` @@ -10,7 +10,6 @@ it.each` `('should normalize content $config', ({ config }) => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .text-center { text-align: center; } @@ -26,7 +25,6 @@ it.each` `('should normalize safelist $config', ({ config }) => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .text-center { text-align: center; } @@ -44,7 +42,6 @@ it.each` `('should normalize extractors $config', ({ config }) => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .font-bold { font-weight: 700; } @@ -85,7 +82,6 @@ it('should still be possible to use the "old" v2 config', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .text-center { text-align: center; } diff --git a/tests/opacity.test.js b/tests/opacity.test.js index 9f2d1478022f..6e270eb177c6 100644 --- a/tests/opacity.test.js +++ b/tests/opacity.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' test('opacity', () => { let config = { @@ -25,7 +25,6 @@ test('opacity', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults} .divide-black > :not([hidden]) ~ :not([hidden]) { border-color: #000; } @@ -78,9 +77,6 @@ test('colors defined as functions work when opacity plugins are disabled', () => return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults({ - defaultBorderColor: 'currentColor', - })} .divide-primary > :not([hidden]) ~ :not([hidden]) { border-color: rgb(var(--color-primary)); } diff --git a/tests/parallel-variants.test.js b/tests/parallel-variants.test.js index 103a7c6de9b0..5d58ea347c74 100644 --- a/tests/parallel-variants.test.js +++ b/tests/parallel-variants.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' test('basic parallel variants', async () => { let config = { @@ -18,7 +18,6 @@ test('basic parallel variants', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .font-normal { font-weight: 400; } diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js index 554f7f975356..d772bd4e156c 100644 --- a/tests/plugins/fontSize.test.js +++ b/tests/plugins/fontSize.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from '../util/run' +import { run, html, css } from '../util/run' test('font-size utilities can include a default line-height', () => { let config = { @@ -14,7 +14,6 @@ test('font-size utilities can include a default line-height', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults} .text-sm { font-size: 12px; } @@ -44,7 +43,6 @@ test('font-size utilities can include a default letter-spacing', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults} .text-sm { font-size: 12px; } @@ -74,7 +72,6 @@ test('font-size utilities can include a default line-height and letter-spacing', return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults} .text-sm { font-size: 12px; } diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index 69fc06c7ab7d..9dd5b71de802 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from '../util/run' +import { run, html, css } from '../util/run' test('opacity variables are given to colors defined as closures', () => { let config = { @@ -32,9 +32,6 @@ test('opacity variables are given to colors defined as closures', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults({ - defaultBorderColor: 'currentColor', - })} .from-primary { --tw-gradient-from: rgb(31, 31, 31); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0)); diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index 7ed36f058c48..4ab5326f646f 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} .container { width: 100%; } diff --git a/tests/raw-content.test.js b/tests/raw-content.test.js index fcaa06391785..5e4c54de9c67 100644 --- a/tests/raw-content.test.js +++ b/tests/raw-content.test.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { run, css, defaults } from './util/run' +import { run, css } from './util/run' it('raw content', () => { let config = { @@ -40,7 +40,6 @@ test('raw content with extension', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .invisible { visibility: hidden; } diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index e787afa2ef9c..4452f6689dbf 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -739,15 +739,15 @@ test('selectors are reduced to the lowest possible specificity', async () => { }) }) -test('defaults without @tailwind base', () => { +test('No defaults without @tailwind base', () => { let config = { experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], corePlugins: { preflight: false }, } - // 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; @@ -756,11 +756,6 @@ 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-scale-x: 1.5; --tw-scale-y: 1.5; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) @@ -771,15 +766,15 @@ test('defaults without @tailwind base', () => { }) }) -test('defaults and apply without @tailwind base', () => { +test('no defaults and apply without @tailwind base', () => { let config = { experimental: { optimizeUniversalDefaults: true }, content: [{ raw: html`
` }], corePlugins: { preflight: false }, } - // 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; @@ -792,11 +787,6 @@ 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-scale-x: 1.5; --tw-scale-y: 1.5; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) diff --git a/tests/responsive-and-variants-atrules.test.css b/tests/responsive-and-variants-atrules.test.css index 52680502e4f2..7bcb5dc60620 100644 --- a/tests/responsive-and-variants-atrules.test.css +++ b/tests/responsive-and-variants-atrules.test.css @@ -1,50 +1,3 @@ -*, -::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; - border-color: #e5e7eb; - --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: ; -} .responsive-in-components { color: blue; } diff --git a/tests/safelist.test.js b/tests/safelist.test.js index 62124d2ef47c..d81a6b796ae4 100644 --- a/tests/safelist.test.js +++ b/tests/safelist.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' it('should not safelist anything', () => { let config = { @@ -7,7 +7,6 @@ it('should not safelist anything', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .uppercase { text-transform: uppercase; } @@ -23,7 +22,6 @@ it('should safelist strings', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .mt-\[20px\] { margin-top: 20px; } @@ -61,7 +59,6 @@ it('should safelist based on a pattern regex', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); @@ -111,7 +108,6 @@ it('should not generate duplicates', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); @@ -152,7 +148,6 @@ it('should safelist when using a custom prefix', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .tw-bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); @@ -178,7 +173,6 @@ it('should not safelist when an empty list is provided', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .uppercase { text-transform: uppercase; } @@ -194,7 +188,6 @@ it('should not safelist when an sparse/holey list is provided', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .uppercase { text-transform: uppercase; } @@ -215,7 +208,6 @@ it('should safelist negatives based on a pattern regex', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchCss(css` - ${defaults} .-top-1 { top: -0.25rem; } diff --git a/tests/syntax-lit-html.test.js b/tests/syntax-lit-html.test.js index c89cd22c45b5..dbc8936d8826 100644 --- a/tests/syntax-lit-html.test.js +++ b/tests/syntax-lit-html.test.js @@ -1,4 +1,4 @@ -import { run, defaults } from './util/run' +import { run } from './util/run' let css = String.raw @@ -16,7 +16,6 @@ test('it detects classes in lit-html templates', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults} .rounded { border-radius: 0.25rem; } diff --git a/tests/syntax-svelte.test.js b/tests/syntax-svelte.test.js index f16b82a4e8d1..83e038d1eb53 100644 --- a/tests/syntax-svelte.test.js +++ b/tests/syntax-svelte.test.js @@ -1,6 +1,6 @@ import path from 'path' -import { run, defaults } from './util/run' +import { run } from './util/run' let css = String.raw @@ -19,7 +19,6 @@ test('it detects svelte based on the file extension', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults} .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); @@ -66,7 +65,6 @@ test('using raw with svelte extension', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - ${defaults} .bg-red-500 { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); diff --git a/tests/tailwind-screens.test.js b/tests/tailwind-screens.test.js index 83255ecb1d80..784bf40c7af7 100644 --- a/tests/tailwind-screens.test.js +++ b/tests/tailwind-screens.test.js @@ -1,4 +1,4 @@ -import { run, html, css, defaults } from './util/run' +import { run, html, css } from './util/run' test('class variants are inserted at `@tailwind variants`', async () => { let config = { @@ -15,7 +15,6 @@ test('class variants are inserted at `@tailwind variants`', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .font-bold { font-weight: 700; } @@ -49,7 +48,6 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async () return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - ${defaults} .font-bold { font-weight: 700; } diff --git a/tests/variants.test.js b/tests/variants.test.js index 0876ef7cc66a..058dd5522b08 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -1,7 +1,7 @@ import fs from 'fs' import path from 'path' -import { run, css, html, defaults } from './util/run' +import { run, css, html } from './util/run' test('variants', () => { let config = { @@ -38,7 +38,6 @@ test('order matters and produces different behaviour', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .hover\:file\:bg-pink-600::file-selector-button:hover { --tw-bg-opacity: 1; background-color: rgb(219 39 119 / var(--tw-bg-opacity)); @@ -69,7 +68,6 @@ describe('custom advanced variants', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} :where(.prose-headings\:text-center) :is(h1, h2, h3, h4) { text-align: center; } @@ -96,7 +94,6 @@ describe('custom advanced variants', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} :where(.hover\:prose-headings\:text-center) :is(h1, h2, h3, h4):hover { text-align: center; } @@ -127,7 +124,6 @@ describe('custom advanced variants', () => { return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .group:hover :where(.group-hover\:prose-headings\:text-center) :is(h1, h2, h3, h4) { text-align: center; } @@ -160,7 +156,6 @@ describe('custom advanced variants', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} @media screen { .screen\:parent .child { foo: bar; @@ -200,7 +195,6 @@ describe('custom advanced variants', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .test:where(.one, .two, .three) { font-style: italic; } @@ -252,7 +246,6 @@ it('should properly handle keyframes with multiple variants', async () => { let result = await run(input, config) expect(result.css).toMatchFormattedCss(css` - ${defaults} @keyframes spin { to { transform: rotate(360deg); @@ -333,7 +326,6 @@ test('custom addVariant with more complex media query params', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} @media screen and (max-wdith: 600px) { .magic\:text-center { text-align: center; @@ -359,7 +351,6 @@ test('custom addVariant with nested media & format shorthand', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} @supports (hover: hover) { @media print { .magic\:text-center:disabled { @@ -386,7 +377,6 @@ test('before and after variants are a bit special, and forced to the end', () => return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .before\:hover\:text-center:hover::before { content: var(--tw-content); text-align: center; @@ -419,7 +409,6 @@ test('before and after variants are a bit special, and forced to the end (2)', ( return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} :where(.before\:prose-headings\:text-center) :is(h1, h2, h3, h4)::before { content: var(--tw-content); text-align: center; @@ -450,7 +439,6 @@ it('should not generate variants of user css if it is not inside a layer', () => return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} .foo { color: red; } @@ -471,7 +459,6 @@ it('should be possible to use responsive modifiers that are defined with special return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - ${defaults} @media (max-width: 399px) { .\ Date: Fri, 7 Jan 2022 10:28:29 -0500 Subject: [PATCH 17/20] Move default border color back to preflight --- src/corePlugins.js | 8 +------- src/css/preflight.css | 2 +- tests/apply.test.js | 6 ------ tests/basic-usage.test.css | 1 - tests/collapse-adjacent-rules.test.css | 1 - tests/experimental.test.js | 12 ------------ tests/import-syntax.test.css | 1 - tests/important-boolean.test.css | 1 - tests/important-modifier-prefix.test.css | 1 - tests/important-modifier.test.css | 1 - tests/important-selector.test.css | 1 - tests/kitchen-sink.test.css | 1 - tests/plugins/divide.test.js | 5 ----- tests/prefix.test.css | 1 - tests/resolve-defaults-at-rules.test.js | 6 ------ tests/util/defaults.js | 3 --- tests/variants.test.css | 1 - 17 files changed, 2 insertions(+), 50 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index b575fdcabb77..b5e34c32c73e 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1179,13 +1179,7 @@ export let corePlugins = { }) }, - borderColor: ({ addDefaults, matchUtilities, theme, corePlugins }) => { - let value = theme('borderColor.DEFAULT', 'currentColor') - - addDefaults('border-width', { - 'border-color': toColorValue(value), - }) - + borderColor: ({ matchUtilities, theme, corePlugins }) => { matchUtilities( { border: (value) => { diff --git a/src/css/preflight.css b/src/css/preflight.css index e39110866301..c15a3f2da831 100644 --- a/src/css/preflight.css +++ b/src/css/preflight.css @@ -9,7 +9,7 @@ box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ - border-color: currentColor; /* 2 */ + border-color: theme('borderColor.DEFAULT', 'currentColor'); /* 2 */ } ::before, diff --git a/tests/apply.test.js b/tests/apply.test.js index 16b476363358..afe5f13d884f 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -640,12 +640,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 { - border-color: #e5e7eb; - } - .border { - border-color: #e5e7eb; - } input[type='range']::-moz-range-thumb { border-width: 1px; } diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 61202aa24a3e..0059eece2206 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -12,7 +12,6 @@ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/collapse-adjacent-rules.test.css b/tests/collapse-adjacent-rules.test.css index fcef56b3bc29..2481c3dd7a42 100644 --- a/tests/collapse-adjacent-rules.test.css +++ b/tests/collapse-adjacent-rules.test.css @@ -21,7 +21,6 @@ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/experimental.test.js b/tests/experimental.test.js index 278b18102f20..655bb84f8cd0 100644 --- a/tests/experimental.test.js +++ b/tests/experimental.test.js @@ -122,10 +122,6 @@ test('experimental universal selector improvements (child selectors: divide-y)', return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .divide-y > * { - border-color: #e5e7eb; - } - .resize { resize: both; } @@ -153,10 +149,6 @@ test('experimental universal selector improvements (hover:divide-y)', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .hover\:divide-y > * { - border-color: #e5e7eb; - } - .resize { resize: both; } @@ -185,10 +177,6 @@ test('experimental universal selector improvements (#app important)', () => { return run(input, config).then((result) => { expect(result.css).toMatchCss(css` - .divide-y > * { - border-color: #e5e7eb; - } - .shadow { --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; diff --git a/tests/import-syntax.test.css b/tests/import-syntax.test.css index 46f508083a2c..7c690fded0d0 100644 --- a/tests/import-syntax.test.css +++ b/tests/import-syntax.test.css @@ -15,7 +15,6 @@ h1 { --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/important-boolean.test.css b/tests/important-boolean.test.css index 9ce2b02e16ca..ed4b99df5f71 100644 --- a/tests/important-boolean.test.css +++ b/tests/important-boolean.test.css @@ -12,7 +12,6 @@ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/important-modifier-prefix.test.css b/tests/important-modifier-prefix.test.css index dc44184de9ab..0cb8249fb5a8 100644 --- a/tests/important-modifier-prefix.test.css +++ b/tests/important-modifier-prefix.test.css @@ -12,7 +12,6 @@ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/important-modifier.test.css b/tests/important-modifier.test.css index 116ec8f293f1..ab770caefd66 100644 --- a/tests/important-modifier.test.css +++ b/tests/important-modifier.test.css @@ -12,7 +12,6 @@ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/important-selector.test.css b/tests/important-selector.test.css index c00ea921246e..7bfef7e66dad 100644 --- a/tests/important-selector.test.css +++ b/tests/important-selector.test.css @@ -12,7 +12,6 @@ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index ca59df30917d..024106246f46 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -150,7 +150,6 @@ div { --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index 785d6ee7d29a..08ad34146f52 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -22,7 +22,6 @@ it('should add the divide styles for divide-y and a default border color', () => --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; @@ -87,7 +86,6 @@ it('should add the divide styles for divide-x and a default border color', () => --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; @@ -152,7 +150,6 @@ it('should add the divide styles for divide-y-reverse and a default border color --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; @@ -215,7 +212,6 @@ it('should add the divide styles for divide-x-reverse and a default border color --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; @@ -278,7 +274,6 @@ it('should only inject the base styles once if we use divide and border at the s --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/prefix.test.css b/tests/prefix.test.css index 190a565285d3..b2a66f6fe05f 100644 --- a/tests/prefix.test.css +++ b/tests/prefix.test.css @@ -12,7 +12,6 @@ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index 4452f6689dbf..6adf398059d9 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -507,12 +507,6 @@ test('with borders', async () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - *, - ::before, - ::after { - border-color: #e5e7eb; - } - /* --- */ .border { border-width: 1px; diff --git a/tests/util/defaults.js b/tests/util/defaults.js index 7a0317e74240..e3a4dac69a92 100644 --- a/tests/util/defaults.js +++ b/tests/util/defaults.js @@ -2,12 +2,10 @@ import { css } from './strings' /** * @param {object} param0 - * @param {string} [param0.defaultBorderColor] * @param {string} [param0.defaultRingColor] * @returns {string} */ export function defaults({ - defaultBorderColor = `#e5e7eb`, defaultRingColor = `rgb(59 130 246 / 0.5)`, } = {}) { return css` @@ -25,7 +23,6 @@ export function defaults({ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: ${defaultBorderColor}; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; diff --git a/tests/variants.test.css b/tests/variants.test.css index e7cf6b04d3ae..f0a57328ab75 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -12,7 +12,6 @@ --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; - border-color: #e5e7eb; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; From b8341a3c9348b66f2e6ebc9036c2cf78028c2660 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Jan 2022 10:38:48 -0500 Subject: [PATCH 18/20] Cleanup defaults code a bit --- src/lib/expandTailwindAtRules.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/src/lib/expandTailwindAtRules.js b/src/lib/expandTailwindAtRules.js index f9da100acac4..8ec17b9fcfad 100644 --- a/src/lib/expandTailwindAtRules.js +++ b/src/lib/expandTailwindAtRules.js @@ -201,14 +201,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 (layerNodes.base) { - layerNodes.base.after(cloneNodes([...defaultNodes], root.source)) + layerNodes.base.before(cloneNodes([...baseNodes, ...defaultNodes], layerNodes.base.source)) } if (layerNodes.base) { From 16fc446c85cc2b057dd8561982bb70b5ffe7723a Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Jan 2022 10:42:38 -0500 Subject: [PATCH 19/20] Fix CS --- tests/util/defaults.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tests/util/defaults.js b/tests/util/defaults.js index e3a4dac69a92..c4f3ccb5cb03 100644 --- a/tests/util/defaults.js +++ b/tests/util/defaults.js @@ -5,9 +5,7 @@ import { css } from './strings' * @param {string} [param0.defaultRingColor] * @returns {string} */ -export function defaults({ - defaultRingColor = `rgb(59 130 246 / 0.5)`, -} = {}) { +export function defaults({ defaultRingColor = `rgb(59 130 246 / 0.5)` } = {}) { return css` *, ::before, From 502b294075d18a8be20fdf402f0c010c57f7c707 Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Jan 2022 11:10:16 -0500 Subject: [PATCH 20/20] Update changelog --- CHANGELOG.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9afcf2dc9274..2a87bf14b3e6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,8 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Allow use of falsy values in theme config ([#6917](https://github.com/tailwindlabs/tailwindcss/pull/6917)) - 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)) -- Optimize universal selector and default handling ([#6906](https://github.com/tailwindlabs/tailwindcss/pull/6906)) - +- 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