From c2ee08ca7bd885dcc214fab599732ff91481852e Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Fri, 7 Jan 2022 09:47:08 -0500 Subject: [PATCH] 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) { .\