From d093dce0fb015d8255e2fe56ac227510370dd12f Mon Sep 17 00:00:00 2001 From: Jordan Pittman Date: Thu, 14 Nov 2024 13:33:27 -0500 Subject: [PATCH] Add variable fallback to fix Chrome issue (#15003) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This works around an issue in Chrome where `::selection` does not read from variables defined on `::selection` thus breaking all uses of color utilities with the selection variant. e.g. `selection::bg-red-200`. We now add a fallback value of `1` to all uses of `var(--tw-bg-opacity)`, `var(--tw-text-opacity)`, `var(--tw-border-opacity)`, etc… since Chrome treats the variable as if it did not exist because it's not defined on the parent. In Chrome 131 (until the change is rolled back) existing utilities like these will not work: - `selection:text-opacity-50` - `selection:[--tw-text-opacity:0.5]` Fixes #15000 --------- Co-authored-by: Adam Wathan --- CHANGELOG.md | 1 + integrations/parcel/tests/integration.test.js | 10 +- .../postcss-cli/tests/integration.test.js | 6 +- .../rollup-sass/tests/integration.test.js | 8 +- integrations/rollup/tests/integration.test.js | 10 +- .../tailwindcss-cli/tests/cli.test.js | 4 +- .../tailwindcss-cli/tests/integration.test.js | 26 ++-- integrations/vite/tests/integration.test.js | 10 +- .../webpack-4/tests/integration.test.js | 10 +- .../webpack-5/tests/integration.test.js | 14 +- src/util/removeAlphaVariables.js | 2 + src/util/withAlphaVariable.js | 4 +- tests/apply.test.js | 44 +++---- tests/arbitrary-values.test.css | 121 ++++++++++-------- tests/arbitrary-values.test.js | 4 +- tests/arbitrary-variants.test.js | 10 +- tests/basic-usage.test.css | 28 ++-- tests/basic-usage.test.js | 8 +- tests/blocklist.test.js | 4 +- tests/collapse-adjacent-rules.test.js | 6 +- tests/color-opacity-modifiers.test.js | 8 +- tests/context-reuse.test.js | 4 +- tests/custom-extractors.test.js | 4 +- tests/dark-mode.test.js | 12 +- tests/import-syntax.test.js | 2 +- tests/important-selector.test.js | 2 +- tests/kitchen-sink.test.js | 22 ++-- tests/match-variants.test.js | 6 +- tests/opacity.test.js | 44 +++---- tests/plugins/gradientColorStops.test.js | 4 +- tests/prefers-contrast.test.js | 10 +- tests/prefix.test.js | 10 +- tests/raw-content.test.css | 14 +- tests/resolve-defaults-at-rules.test.js | 2 +- tests/safelist.test.js | 74 +++++------ tests/source-maps.test.js | 4 +- tests/syntax-lit-html.test.js | 6 +- tests/syntax-svelte.test.js | 8 +- tests/variants.test.css | 48 ++++--- tests/variants.test.js | 6 +- tests/withAlphaVariable.test.js | 16 +-- 41 files changed, 323 insertions(+), 313 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 069428f6fb44..d3d46a4a172e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Bump versions for security vulnerabilities ([#14697](https://github.com/tailwindlabs/tailwindcss/pull/14697)) - Ensure the TypeScript types for the `boxShadow` theme configuration allows arrays ([#14856](https://github.com/tailwindlabs/tailwindcss/pull/14856)) +- Set fallback for opacity variables to ensure setting colors with the `selection:*` variant works in Chrome 131 ([#15003](https://github.com/tailwindlabs/tailwindcss/pull/15003)) ## [3.4.14] - 2024-10-15 diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js index 9a9091a30589..beaf5e70d7dc 100644 --- a/integrations/parcel/tests/integration.test.js +++ b/integrations/parcel/tests/integration.test.js @@ -74,7 +74,7 @@ describe('static build', () => { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } `) }) @@ -124,7 +124,7 @@ describe('static build', () => { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } `) }) @@ -170,7 +170,7 @@ describe('watcher', () => { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -218,7 +218,7 @@ describe('watcher', () => { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -361,7 +361,7 @@ describe('watcher', () => { expect(await readOutputFile(/index\.\w+\.css$/)).toIncludeCss(css` .btn { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); border-radius: 0.25rem; padding: 0.25rem 0.5rem; } diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js index 964c57b82e39..08dd81baeab3 100644 --- a/integrations/postcss-cli/tests/integration.test.js +++ b/integrations/postcss-cli/tests/integration.test.js @@ -64,7 +64,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -113,7 +113,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -252,7 +252,7 @@ describe('watcher', () => { .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/rollup-sass/tests/integration.test.js b/integrations/rollup-sass/tests/integration.test.js index 8793784c6db6..98ace171ec82 100644 --- a/integrations/rollup-sass/tests/integration.test.js +++ b/integrations/rollup-sass/tests/integration.test.js @@ -64,7 +64,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -113,7 +113,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -249,7 +249,7 @@ describe('watcher', () => { css` .btn { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); border-radius: 0.25rem; padding: 0.25rem 0.5rem; } @@ -329,7 +329,7 @@ describe('watcher', () => { css` .btn { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); border-radius: 0.25rem; padding: 0.25rem 0.5rem; } diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js index 86544ffe1ec0..30edc8a50d08 100644 --- a/integrations/rollup/tests/integration.test.js +++ b/integrations/rollup/tests/integration.test.js @@ -65,7 +65,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -111,7 +111,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -154,7 +154,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -203,7 +203,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -340,7 +340,7 @@ describe('watcher', () => { .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/tailwindcss-cli/tests/cli.test.js b/integrations/tailwindcss-cli/tests/cli.test.js index a373b307a7c4..9795bd0d7018 100644 --- a/integrations/tailwindcss-cli/tests/cli.test.js +++ b/integrations/tailwindcss-cli/tests/cli.test.js @@ -262,7 +262,7 @@ describe('Build command', () => { .btn-after { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; @@ -313,7 +313,7 @@ describe('Build command', () => { .btn-after { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js index 31b362353fbf..48d43fb41eeb 100644 --- a/integrations/tailwindcss-cli/tests/integration.test.js +++ b/integrations/tailwindcss-cli/tests/integration.test.js @@ -75,12 +75,12 @@ describe('static build', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .bg-red-600 { --tw-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--tw-bg-opacity)); + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); } .font-bold { @@ -128,7 +128,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -176,7 +176,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -224,7 +224,7 @@ describe('static build', () => { css` .bg-yellow { --tw-bg-opacity: 1; - background-color: rgb(255 255 0 / var(--tw-bg-opacity)); + background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -279,7 +279,7 @@ describe('static build', () => { css` .bg-yellow { --tw-bg-opacity: 1; - background-color: rgb(255 255 0 / var(--tw-bg-opacity)); + background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -313,7 +313,7 @@ describe('static build', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } ` ) @@ -356,7 +356,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -405,7 +405,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -594,7 +594,7 @@ describe('watcher', () => { .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; @@ -670,7 +670,7 @@ describe('watcher', () => { css` .bg-yellow { --tw-bg-opacity: 1; - background-color: rgb(255 255 0 / var(--tw-bg-opacity)); + background-color: rgb(255 255 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -690,7 +690,7 @@ describe('watcher', () => { css` .bg-yellow { --tw-bg-opacity: 1; - background-color: rgb(255 255 119 / var(--tw-bg-opacity)); + background-color: rgb(255 255 119 / var(--tw-bg-opacity, 1)); } ` ) @@ -722,7 +722,7 @@ describe('watcher', () => { css` .bg-yellow { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } ` ) diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js index 1a3b1302b3a7..1001ff9c3903 100644 --- a/integrations/vite/tests/integration.test.js +++ b/integrations/vite/tests/integration.test.js @@ -78,7 +78,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -122,7 +122,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -173,7 +173,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -226,7 +226,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -379,7 +379,7 @@ describe('watcher', () => { .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js index ae7cce0c8a2d..6e0b034f20ed 100644 --- a/integrations/webpack-4/tests/integration.test.js +++ b/integrations/webpack-4/tests/integration.test.js @@ -61,7 +61,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -105,7 +105,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -151,7 +151,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -203,7 +203,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -345,7 +345,7 @@ describe('watcher', () => { .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js index 1a4a969a4a38..6209e0a5e900 100644 --- a/integrations/webpack-5/tests/integration.test.js +++ b/integrations/webpack-5/tests/integration.test.js @@ -61,7 +61,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -105,7 +105,7 @@ describe('static build', () => { css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ` ) @@ -151,7 +151,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -203,7 +203,7 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -345,7 +345,7 @@ describe('watcher', () => { .btn { border-radius: 0.25rem; --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; @@ -390,12 +390,12 @@ describe('watcher', () => { css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .bg-red-600 { --tw-bg-opacity: 1; - background-color: rgb(220 38 38 / var(--tw-bg-opacity)); + background-color: rgb(220 38 38 / var(--tw-bg-opacity, 1)); } .font-bold { diff --git a/src/util/removeAlphaVariables.js b/src/util/removeAlphaVariables.js index 76655bea2bbd..be9281812fb1 100644 --- a/src/util/removeAlphaVariables.js +++ b/src/util/removeAlphaVariables.js @@ -18,6 +18,8 @@ export function removeAlphaVariables(container, toRemove) { for (let varName of toRemove) { if (decl.value.includes(`/ var(${varName})`)) { decl.value = decl.value.replace(`/ var(${varName})`, '') + } else if (decl.value.includes(`/ var(${varName}, 1)`)) { + decl.value = decl.value.replace(`/ var(${varName}, 1)`, '') } } }) diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js index 15aedb73b66d..e49bd82567e1 100644 --- a/src/util/withAlphaVariable.js +++ b/src/util/withAlphaVariable.js @@ -21,7 +21,7 @@ export default function withAlphaVariable({ color, property, variable }) { [variable]: '1', ...Object.fromEntries( properties.map((p) => { - return [p, color({ opacityVariable: variable, opacityValue: `var(${variable})` })] + return [p, color({ opacityVariable: variable, opacityValue: `var(${variable}, 1)` })] }) ), } @@ -42,7 +42,7 @@ export default function withAlphaVariable({ color, property, variable }) { [variable]: '1', ...Object.fromEntries( properties.map((p) => { - return [p, formatColor({ ...parsed, alpha: `var(${variable})` })] + return [p, formatColor({ ...parsed, alpha: `var(${variable}, 1)` })] }) ), } diff --git a/tests/apply.test.js b/tests/apply.test.js index 6576241bfdeb..d9cc8ec82177 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -161,7 +161,7 @@ test('@apply', () => { expect(result.css).toMatchFormattedCss(css` .basic-example { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); border-radius: 0.375rem; padding: 0.5rem 1rem; } @@ -243,7 +243,7 @@ test('@apply', () => { .multiple, .selectors { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); border-radius: 0.375rem; padding: 0.5rem 1rem; } @@ -307,16 +307,16 @@ test('@apply', () => { } .btn-blue { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); border-radius: 0.25rem; padding: 0.5rem 1rem; font-weight: 700; } .btn-blue:hover { --tw-bg-opacity: 1; - background-color: rgb(29 78 216 / var(--tw-bg-opacity)); + background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1)); } .recursive-apply-a { font-weight: 900; @@ -651,22 +651,22 @@ test('@apply classes from outside a @layer', async () => { } .bar { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); font-weight: 700; } .bar:hover { --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); + color: rgb(34 197 94 / var(--tw-text-opacity, 1)); } .baz { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); font-weight: 700; text-decoration-line: underline; } .baz:hover { --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); + color: rgb(34 197 94 / var(--tw-text-opacity, 1)); } .keep-me-even-though-I-am-not-used-in-content { color: green; @@ -891,7 +891,7 @@ it('should not throw when the selector is different (but contains the base parti .bg-gray-500, .focus\:bg-gray-500 { --tw-bg-opacity: 1; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)); + background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)); } `) }) @@ -1444,13 +1444,13 @@ describe('multiple instances', () => { .a { color: red; --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); + color: rgb(34 197 94 / var(--tw-text-opacity, 1)); color: #00f; text-decoration: underline; } .b { --tw-text-opacity: 1; - color: rgb(34 197 94 / var(--tw-text-opacity)); + color: rgb(34 197 94 / var(--tw-text-opacity, 1)); text-decoration: underline; } `) @@ -1567,7 +1567,7 @@ it('should work outside of layer', async () => { expect(result.css).toMatchFormattedCss(css` .input-text { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); background-color: red; } `) @@ -1577,7 +1577,7 @@ it('should work outside of layer', async () => { expect(result.css).toMatchFormattedCss(css` .input-text { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); background-color: red; } `) @@ -1605,7 +1605,7 @@ it('should work in layer', async () => { expect(result.css).toMatchFormattedCss(css` .input-text { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); background-color: red; } `) @@ -1644,14 +1644,14 @@ it('apply partitioning works with media queries', async () => { html, body { --tw-text-opacity: 1; - color: rgb(22 163 74 / var(--tw-text-opacity)); + color: rgb(22 163 74 / var(--tw-text-opacity, 1)); font-size: 1rem; } @media print { html, body { --tw-text-opacity: 1; - color: rgb(220 38 38 / var(--tw-text-opacity)); + color: rgb(220 38 38 / var(--tw-text-opacity, 1)); font-size: 2rem; } } @@ -1978,7 +1978,7 @@ it('should maintain the correct selector when applying other utilities', () => { .foo:hover.bar .baz, .foo:hover.bar > .baz { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); color: red; } `) @@ -2233,19 +2233,19 @@ test('applying classes with class-based dark variant to pseudo elements', async expect(result.css).toMatchFormattedCss(css` ::-webkit-scrollbar-track { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } :is(.dark *)::-webkit-scrollbar-track { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } ::-webkit-scrollbar-track:hover { --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } :is(.dark *)::-webkit-scrollbar-track:hover { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } `) }) diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 32d7110828a8..cc64391f1f50 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -134,13 +134,13 @@ min-height: var(--height); } .w-\[\'\)\(\)\'\] { - width: ")()"; + width: ')()'; } .w-\[\'\]\[\]\'\] { - width: "][]"; + width: '][]'; } .w-\[\'\}\{\}\'\] { - width: "}{}"; + width: '}{}'; } .w-\[\(\(\)\)\] { width: (()); @@ -353,7 +353,7 @@ cursor: pointer; } .cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\2c pointer\] { - cursor: url("./path_to_hand.cur") 2 2, pointer; + cursor: url('./path_to_hand.cur') 2 2, pointer; } .cursor-\[url\(hand\.cur\)_2_2\2c pointer\] { cursor: url(hand.cur) 2 2, pointer; @@ -414,7 +414,7 @@ scroll-padding-top: var(--scroll-padding); } .list-\[\'\\1f44d\'\] { - list-style-type: "\1f44d"; + list-style-type: '\1f44d'; } .list-\[var\(--value\)\] { list-style-type: var(--value); @@ -506,7 +506,7 @@ } .divide-\[black\] > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-divide-opacity)); + border-color: rgb(0 0 0 / var(--tw-divide-opacity, 1)); } .divide-\[var\(--value\)\] > :not([hidden]) ~ :not([hidden]) { border-color: var(--value); @@ -580,7 +580,7 @@ } .border-\[\#f00\] { --tw-border-opacity: 1; - border-color: rgb(255 0 0 / var(--tw-border-opacity)); + border-color: rgb(255 0 0 / var(--tw-border-opacity, 1)); } .border-\[color\:var\(--value\)\] { border-color: var(--value); @@ -590,28 +590,28 @@ } .border-b-\[\#f00\] { --tw-border-opacity: 1; - border-bottom-color: rgb(255 0 0 / var(--tw-border-opacity)); + border-bottom-color: rgb(255 0 0 / var(--tw-border-opacity, 1)); } .border-b-\[color\:var\(--value\)\] { border-bottom-color: var(--value); } .border-l-\[\#f00\] { --tw-border-opacity: 1; - border-left-color: rgb(255 0 0 / var(--tw-border-opacity)); + border-left-color: rgb(255 0 0 / var(--tw-border-opacity, 1)); } .border-l-\[color\:var\(--value\)\] { border-left-color: var(--value); } .border-r-\[\#f00\] { --tw-border-opacity: 1; - border-right-color: rgb(255 0 0 / var(--tw-border-opacity)); + border-right-color: rgb(255 0 0 / var(--tw-border-opacity, 1)); } .border-r-\[color\:var\(--value\)\] { border-right-color: var(--value); } .border-t-\[\#f00\] { --tw-border-opacity: 1; - border-top-color: rgb(255 0 0 / var(--tw-border-opacity)); + border-top-color: rgb(255 0 0 / var(--tw-border-opacity, 1)); } .border-t-\[color\:var\(--value\)\] { border-top-color: var(--value); @@ -627,25 +627,25 @@ } .bg-\[\#0f0\] { --tw-bg-opacity: 1; - background-color: rgb(0 255 0 / var(--tw-bg-opacity)); + background-color: rgb(0 255 0 / var(--tw-bg-opacity, 1)); } .bg-\[\#0f0_var\(--value\)\] { background-color: #0f0 var(--value); } .bg-\[\#ff0000\] { --tw-bg-opacity: 1; - background-color: rgb(255 0 0 / var(--tw-bg-opacity)); + background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1)); } .bg-\[color\:var\(--value1\)_var\(--value2\)\] { background-color: var(--value1) var(--value2); } .bg-\[hsl\(0\2c 100\%\2c 50\%\)\] { --tw-bg-opacity: 1; - background-color: hsl(0 100% 50% / var(--tw-bg-opacity)); + background-color: hsl(0 100% 50% / var(--tw-bg-opacity, 1)); } .bg-\[hsl\(0rad\2c 100\%\2c 50\%\)\] { --tw-bg-opacity: 1; - background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity)); + background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity, 1)); } .bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] { background-color: hsla(0, 100%, 50%, 0.3); @@ -655,14 +655,14 @@ } .bg-\[rgb\(123\2c 123\2c 123\)\] { --tw-bg-opacity: 1; - background-color: rgb(123 123 123 / var(--tw-bg-opacity)); + background-color: rgb(123 123 123 / var(--tw-bg-opacity, 1)); } .bg-\[rgb\(123\2c _456\2c _123\)_black\] { background-color: rgb(123, 456, 123) black; } .bg-\[rgb\(123_456_789\)\] { --tw-bg-opacity: 1; - background-color: rgb(123 456 789 / var(--tw-bg-opacity)); + background-color: rgb(123 456 789 / var(--tw-bg-opacity, 1)); } .bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] { background-color: rgba(123, 123, 123, 0.5); @@ -704,7 +704,7 @@ background-image: repeating-conic-gradient(#f8f9fa 0% 25%, white 0% 50%); } .bg-\[url\(\'\/path-to-image\.png\'\)\] { - background-image: url("/path-to-image.png"); + background-image: url('/path-to-image.png'); } .bg-\[url\:var\(--url\)\] { background-image: var(--url); @@ -819,16 +819,16 @@ vertical-align: 10em; } .font-\[\'Gill_Sans\'\] { - font-family: "Gill Sans"; + font-family: 'Gill Sans'; } .font-\[\'Some_Font\'\2c \'Some_Other_Font\'\] { - font-family: "Some Font", "Some Other Font"; + font-family: 'Some Font', 'Some Other Font'; } .font-\[\'Some_Font\'\2c sans-serif\] { - font-family: "Some Font", sans-serif; + font-family: 'Some Font', sans-serif; } .font-\[\'Some_Font\'\2c var\(--other-font\)\] { - font-family: "Some Font", var(--other-font); + font-family: 'Some Font', var(--other-font); } .font-\[Georgia\2c serif\] { font-family: Georgia, serif; @@ -874,22 +874,22 @@ } .text-\[black\] { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); } .text-\[color\:var\(--color\)\] { color: var(--color); } .text-\[rgb\(123\2c 123\2c 123\)\] { --tw-text-opacity: 1; - color: rgb(123 123 123 / var(--tw-text-opacity)); + color: rgb(123 123 123 / var(--tw-text-opacity, 1)); } .text-\[rgb\(123\2c _123\2c _123\)\] { --tw-text-opacity: 1; - color: rgb(123 123 123 / var(--tw-text-opacity)); + color: rgb(123 123 123 / var(--tw-text-opacity, 1)); } .text-\[rgb\(123_123_123\)\] { --tw-text-opacity: 1; - color: rgb(123 123 123 / var(--tw-text-opacity)); + color: rgb(123 123 123 / var(--tw-text-opacity, 1)); } .text-opacity-\[0\.8\] { --tw-text-opacity: 0.8; @@ -985,7 +985,7 @@ } .ring-\[\#76ad65\] { --tw-ring-opacity: 1; - --tw-ring-color: rgb(118 173 101 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(118 173 101 / var(--tw-ring-opacity, 1)); } .ring-\[color\:var\(--value\)\] { --tw-ring-color: var(--value); @@ -1055,81 +1055,90 @@ } .backdrop-blur-\[11px\] { --tw-backdrop-blur: blur(11px); - -webkit-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); + -webkit-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: 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); - -webkit-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); + -webkit-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: 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); - -webkit-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); + -webkit-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: 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); - -webkit-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); + -webkit-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: 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); - -webkit-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); + -webkit-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: 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); - -webkit-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); + -webkit-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: 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%); - -webkit-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); + -webkit-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: 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%); - -webkit-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); + -webkit-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: 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); - -webkit-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); + -webkit-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: 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); @@ -1155,11 +1164,11 @@ will-change: var(--will-change); } .content-\[\'\>\'\] { - --tw-content: ">"; + --tw-content: '>'; content: var(--tw-content); } .content-\[\'hello\'\] { - --tw-content: "hello"; + --tw-content: 'hello'; content: var(--tw-content); } .content-\[attr\(content-before\)\] { diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index bdb81397ce2f..594980803235 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -80,7 +80,7 @@ it('should support arbitrary values for various background utilities', () => { expect(result.css).toMatchFormattedCss(css` .bg-\[\#ff0000\] { --tw-bg-opacity: 1; - background-color: rgb(255 0 0 / var(--tw-bg-opacity)); + background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1)); } .bg-\[color\:var\(--bg-color\)\] { background-color: var(--bg-color); @@ -93,7 +93,7 @@ it('should support arbitrary values for various background utilities', () => { } .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .bg-\[url\(\'\/image-1-0\.png\'\)\] { background-image: url('/image-1-0.png'); diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index c60bb92ad307..fce5f0576e17 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -567,7 +567,7 @@ test('classes in arbitrary variants should not be prefixed', () => { .hover\:\[\&_\.foo\]\:tw-text-red-400 .foo:hover, .foo .\[\.foo_\&\]\:tw-text-red-400 { --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } `) }) @@ -601,19 +601,19 @@ test('classes in the same arbitrary variant should not be prefixed', () => { expect(result.css).toMatchFormattedCss(css` .\[\&_\.foo\]\:tw-bg-white .foo { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .\[\&_\.foo\]\:tw-text-red-400 .foo { --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } .foo .\[\.foo_\&\]\:tw-bg-white { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .foo .\[\.foo_\&\]\:tw-text-red-400 { --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } `) }) diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 57b887d6d4b6..9e92cb9c75d2 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -570,7 +570,7 @@ } .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-divide-opacity)); + border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1)); } .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 0.5; @@ -644,40 +644,40 @@ } .border-black { --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-x-black { --tw-border-opacity: 1; - border-left-color: rgb(0 0 0 / var(--tw-border-opacity)); - border-right-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-left-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); + border-right-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-y-black { --tw-border-opacity: 1; - border-top-color: rgb(0 0 0 / var(--tw-border-opacity)); - border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); + border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-b-black { --tw-border-opacity: 1; - border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-l-black { --tw-border-opacity: 1; - border-left-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-left-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-r-black { --tw-border-opacity: 1; - border-right-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-right-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-t-black { --tw-border-opacity: 1; - border-top-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-top-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-opacity-10 { --tw-border-opacity: 0.1; } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .bg-opacity-20 { --tw-bg-opacity: 0.2; @@ -831,7 +831,7 @@ } .text-indigo-500 { --tw-text-opacity: 1; - color: rgb(99 102 241 / var(--tw-text-opacity)); + color: rgb(99 102 241 / var(--tw-text-opacity, 1)); } .text-opacity-10 { --tw-text-opacity: 0.1; @@ -863,7 +863,7 @@ } .placeholder-green-300::placeholder { --tw-placeholder-opacity: 1; - color: rgb(134 239 172 / var(--tw-placeholder-opacity)); + color: rgb(134 239 172 / var(--tw-placeholder-opacity, 1)); } .placeholder-opacity-60::placeholder { --tw-placeholder-opacity: 0.6; @@ -958,7 +958,7 @@ } .ring-white { --tw-ring-opacity: 1; - --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); } .ring-opacity-40 { --tw-ring-opacity: 0.4; diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index a65db81e24d4..06406306c65e 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -243,7 +243,7 @@ test('all plugins are executed that match a candidate', () => { expect(result.css).toMatchFormattedCss(css` .bg-green-light { --tw-bg-opacity: 1; - background-color: rgb(0 128 0 / var(--tw-bg-opacity)); + background-color: rgb(0 128 0 / var(--tw-bg-opacity, 1)); } `) }) @@ -291,11 +291,11 @@ test('per-plugin colors with the same key can differ when using a custom colors expect(result.css).toMatchFormattedCss(css` .bg-theme { --tw-bg-opacity: 1; - background-color: rgb(255 0 0 / var(--tw-bg-opacity)); + background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1)); } .text-theme { --tw-text-opacity: 1; - color: rgb(0 128 0 / var(--tw-text-opacity)); + color: rgb(0 128 0 / var(--tw-text-opacity, 1)); } `) }) @@ -858,7 +858,7 @@ it('Ring color utilities are generated when using respectDefaultRingColorOpacity } .ring-blue-500 { --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); } `) }) diff --git a/tests/blocklist.test.js b/tests/blocklist.test.js index e9915350f9e7..a9da1b2ed7b1 100644 --- a/tests/blocklist.test.js +++ b/tests/blocklist.test.js @@ -76,7 +76,7 @@ it('blocklists do NOT support regexes', async () => { expect(result.css).toMatchFormattedCss(css` .bg-\[\#f00d1e\] { --tw-bg-opacity: 1; - background-color: rgb(240 13 30 / var(--tw-bg-opacity)); + background-color: rgb(240 13 30 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; @@ -97,7 +97,7 @@ it('can block classes generated by the safelist', () => { expect(result.css).toMatchFormattedCss(css` .bg-red-400 { --tw-bg-opacity: 1; - background-color: rgb(248 113 113 / var(--tw-bg-opacity)); + background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1)); } .font-bold { font-weight: 700; diff --git a/tests/collapse-adjacent-rules.test.js b/tests/collapse-adjacent-rules.test.js index 81411b02ec5e..933558afc507 100644 --- a/tests/collapse-adjacent-rules.test.js +++ b/tests/collapse-adjacent-rules.test.js @@ -102,14 +102,14 @@ test('collapse adjacent rules', () => { @supports (foo: bar) { .some-apply-thing { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); font-weight: 700; } } @media (min-width: 768px) { .some-apply-thing { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); font-weight: 700; } } @@ -117,7 +117,7 @@ test('collapse adjacent rules', () => { @media (min-width: 768px) { .some-apply-thing { --tw-text-opacity: 1; - color: rgb(0 0 0 / var(--tw-text-opacity)); + color: rgb(0 0 0 / var(--tw-text-opacity, 1)); font-weight: 700; } } diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js index a4600a495bdb..1d34084b49ed 100644 --- a/tests/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -30,7 +30,7 @@ test('colors with slashes are matched first', async () => { expect(result.css).toMatchFormattedCss(css` .bg-red-500\/50 { --tw-bg-opacity: 1; - background-color: rgb(255 0 0 / var(--tw-bg-opacity)); + background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1)); } `) }) @@ -207,21 +207,21 @@ test('opacity modifier in combination with partial custom properties', async () expect(result.css).toMatchFormattedCss(css` .bg-\[hsl\(123\,50\%\,var\(--foo\)\)\] { --tw-bg-opacity: 1; - background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity)); + background-color: hsl(123 50% var(--foo) / var(--tw-bg-opacity, 1)); } .bg-\[hsl\(123\,50\%\,var\(--foo\)\)\]\/50 { background-color: hsl(123 50% var(--foo) / 0.5); } .bg-\[hsl\(123\,var\(--foo\)\,50\%\)\] { --tw-bg-opacity: 1; - background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity)); + background-color: hsl(123 var(--foo) 50% / var(--tw-bg-opacity, 1)); } .bg-\[hsl\(123\,var\(--foo\)\,50\%\)\]\/50 { background-color: hsl(123 var(--foo) 50% / 0.5); } .bg-\[hsl\(var\(--foo\)\,50\%\,50\%\)\] { --tw-bg-opacity: 1; - background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity)); + background-color: hsl(var(--foo) 50% 50% / var(--tw-bg-opacity, 1)); } .bg-\[hsl\(var\(--foo\)\,50\%\,50\%\)\]\/50 { background-color: hsl(var(--foo) 50% 50% / 0.5); diff --git a/tests/context-reuse.test.js b/tests/context-reuse.test.js index 7cd006cde4a8..0c76859762f0 100644 --- a/tests/context-reuse.test.js +++ b/tests/context-reuse.test.js @@ -52,14 +52,14 @@ test('re-uses the context across multiple files with the same config', async () expect(results[1].css).toMatchFormattedCss(css` body { --tw-bg-opacity: 1; - background-color: rgb(96 165 250 / var(--tw-bg-opacity)); + background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1)); } `) expect(results[2].css).toMatchFormattedCss(css` body { --tw-text-opacity: 1; - color: rgb(248 113 113 / var(--tw-text-opacity)); + color: rgb(248 113 113 / var(--tw-text-opacity, 1)); } `) diff --git a/tests/custom-extractors.test.js b/tests/custom-extractors.test.js index f5933b7a595e..6b6cdf2cc433 100644 --- a/tests/custom-extractors.test.js +++ b/tests/custom-extractors.test.js @@ -13,11 +13,11 @@ let sharedHtml = html` let expected = css` .bg-white { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .text-indigo-500 { --tw-text-opacity: 1; - color: rgb(99 102 241 / var(--tw-text-opacity)); + color: rgb(99 102 241 / var(--tw-text-opacity, 1)); } ` diff --git a/tests/dark-mode.test.js b/tests/dark-mode.test.js index 14585f4e3bd8..ff37f9fd8606 100644 --- a/tests/dark-mode.test.js +++ b/tests/dark-mode.test.js @@ -179,16 +179,16 @@ it('should use legacy sorting when using `darkMode: class`', () => { expect(result.css).toMatchFormattedCss(css` .hover\:text-green-200:hover { --tw-text-opacity: 1; - color: rgb(187 247 208 / var(--tw-text-opacity)); + color: rgb(187 247 208 / var(--tw-text-opacity, 1)); } .dark\:text-green-100:is(.dark *) { --tw-text-opacity: 1; - color: rgb(220 252 231 / var(--tw-text-opacity)); + color: rgb(220 252 231 / var(--tw-text-opacity, 1)); } @media (min-width: 1024px) { .lg\:text-green-300 { --tw-text-opacity: 1; - color: rgb(134 239 172 / var(--tw-text-opacity)); + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); } } `) @@ -214,17 +214,17 @@ it('should use modern sorting otherwise', () => { expect(result.css).toMatchFormattedCss(css` .hover\:text-green-200:hover { --tw-text-opacity: 1; - color: rgb(187 247 208 / var(--tw-text-opacity)); + color: rgb(187 247 208 / var(--tw-text-opacity, 1)); } @media (min-width: 1024px) { .lg\:text-green-300 { --tw-text-opacity: 1; - color: rgb(134 239 172 / var(--tw-text-opacity)); + color: rgb(134 239 172 / var(--tw-text-opacity, 1)); } } .dark\:text-green-100:where(.dark, .dark *) { --tw-text-opacity: 1; - color: rgb(220 252 231 / var(--tw-text-opacity)); + color: rgb(220 252 231 / var(--tw-text-opacity, 1)); } `) }) diff --git a/tests/import-syntax.test.js b/tests/import-syntax.test.js index a0f38c3fe777..eac1a752e04f 100644 --- a/tests/import-syntax.test.js +++ b/tests/import-syntax.test.js @@ -70,7 +70,7 @@ test('using @import instead of @tailwind', () => { } .bg-black { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } @media (min-width: 768px) { .md\:hover\:text-center:hover { diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js index bc41ecfceb4d..c6f4a08e925f 100644 --- a/tests/important-selector.test.js +++ b/tests/important-selector.test.js @@ -196,7 +196,7 @@ test('pseudo-elements are appended after the `:is()`', () => { #app .dark\:before\:bg-black:where(.dark, .dark *)::before { content: var(--tw-content); --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } `) }) diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index e37fc5164e6b..20f030d127da 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -253,7 +253,7 @@ test('it works', () => { } .apply-test { --tw-bg-opacity: 1; - background-color: rgb(236 72 153 / var(--tw-bg-opacity)); + background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1)); margin-top: 1.5rem; } .apply-test:hover, @@ -263,11 +263,11 @@ test('it works', () => { @media (min-width: 640px) { .apply-test { --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .apply-test:nth-child(2n):focus { --tw-bg-opacity: 1; - background-color: rgb(251 207 232 / var(--tw-bg-opacity)); + background-color: rgb(251 207 232 / var(--tw-bg-opacity, 1)); } } .apply-components { @@ -315,7 +315,7 @@ test('it works', () => { @media (min-width: 640px) { .apply-with-existing:hover { --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } } .multiple, @@ -343,7 +343,7 @@ test('it works', () => { } .group:hover .apply-dark-group-example-a:where(.dark, .dark *) { --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } @media (min-width: 640px) { @media (prefers-reduced-motion: no-preference) { @@ -499,23 +499,23 @@ test('it works', () => { } .border-black { --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-e-red-400 { --tw-border-opacity: 1; - border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity)); + border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); } .border-s-green-500 { --tw-border-opacity: 1; - border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity)); + border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity, 1)); } .bg-black { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .bg-opacity-50 { --tw-bg-opacity: 0.5; @@ -701,7 +701,7 @@ test('it works', () => { } .focus\:ring-blue-500:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity, 1)); } .focus\:hover\:font-light:hover:focus { font-weight: 300; diff --git a/tests/match-variants.test.js b/tests/match-variants.test.js index 2923b10c0dc2..6eb83ac49e2e 100644 --- a/tests/match-variants.test.js +++ b/tests/match-variants.test.js @@ -29,7 +29,7 @@ test('partial arbitrary variants', () => { } .potato-yellow .potato-\[yellow\]\:bg-yellow-200 { --tw-bg-opacity: 1; - background-color: rgb(254 240 138 / var(--tw-bg-opacity)); + background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1)); } `) }) @@ -64,7 +64,7 @@ test('partial arbitrary variants with at-rules', () => { @media (potato: yellow) { .potato-\[yellow\]\:bg-yellow-200 { --tw-bg-opacity: 1; - background-color: rgb(254 240 138 / var(--tw-bg-opacity)); + background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1)); } } `) @@ -100,7 +100,7 @@ test('partial arbitrary variants with at-rules and placeholder', () => { @media (potato: yellow) { .potato-\[yellow\]\:bg-yellow-200:potato { --tw-bg-opacity: 1; - background-color: rgb(254 240 138 / var(--tw-bg-opacity)); + background-color: rgb(254 240 138 / var(--tw-bg-opacity, 1)); } } `) diff --git a/tests/opacity.test.js b/tests/opacity.test.js index ac439daa43a9..0e4f1f8c5fe0 100644 --- a/tests/opacity.test.js +++ b/tests/opacity.test.js @@ -119,42 +119,42 @@ it('can use defining custom properties for colors (opacity plugins expect(result.css).toMatchFormattedCss(css` .divide-primary > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; - border-color: rgb(var(--color-primary) / var(--tw-divide-opacity)); + border-color: rgb(var(--color-primary) / var(--tw-divide-opacity, 1)); } .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 0.5; } .border-primary { --tw-border-opacity: 1; - border-color: rgb(var(--color-primary) / var(--tw-border-opacity)); + border-color: rgb(var(--color-primary) / var(--tw-border-opacity, 1)); } .border-opacity-50 { --tw-border-opacity: 0.5; } .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(var(--color-primary) / var(--tw-bg-opacity)); + background-color: rgb(var(--color-primary) / var(--tw-bg-opacity, 1)); } .bg-opacity-50 { --tw-bg-opacity: 0.5; } .text-primary { --tw-text-opacity: 1; - color: rgb(var(--color-primary) / var(--tw-text-opacity)); + color: rgb(var(--color-primary) / var(--tw-text-opacity, 1)); } .text-opacity-50 { --tw-text-opacity: 0.5; } .placeholder-primary::placeholder { --tw-placeholder-opacity: 1; - color: rgb(var(--color-primary) / var(--tw-placeholder-opacity)); + color: rgb(var(--color-primary) / var(--tw-placeholder-opacity, 1)); } .placeholder-opacity-50::placeholder { --tw-placeholder-opacity: 0.5; } .ring-primary { --tw-ring-opacity: 1; - --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity)); + --tw-ring-color: rgb(var(--color-primary) / var(--tw-ring-opacity, 1)); } .ring-opacity-50 { --tw-ring-opacity: 0.5; @@ -271,42 +271,42 @@ it('can use hsl helper when defining custom properties for colors (opacity plugi expect(result.css).toMatchFormattedCss(css` .divide-primary > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; - border-color: hsl(var(--color-primary) / var(--tw-divide-opacity)); + border-color: hsl(var(--color-primary) / var(--tw-divide-opacity, 1)); } .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 0.5; } .border-primary { --tw-border-opacity: 1; - border-color: hsl(var(--color-primary) / var(--tw-border-opacity)); + border-color: hsl(var(--color-primary) / var(--tw-border-opacity, 1)); } .border-opacity-50 { --tw-border-opacity: 0.5; } .bg-primary { --tw-bg-opacity: 1; - background-color: hsl(var(--color-primary) / var(--tw-bg-opacity)); + background-color: hsl(var(--color-primary) / var(--tw-bg-opacity, 1)); } .bg-opacity-50 { --tw-bg-opacity: 0.5; } .text-primary { --tw-text-opacity: 1; - color: hsl(var(--color-primary) / var(--tw-text-opacity)); + color: hsl(var(--color-primary) / var(--tw-text-opacity, 1)); } .text-opacity-50 { --tw-text-opacity: 0.5; } .placeholder-primary::placeholder { --tw-placeholder-opacity: 1; - color: hsl(var(--color-primary) / var(--tw-placeholder-opacity)); + color: hsl(var(--color-primary) / var(--tw-placeholder-opacity, 1)); } .placeholder-opacity-50::placeholder { --tw-placeholder-opacity: 0.5; } .ring-primary { --tw-ring-opacity: 1; - --tw-ring-color: hsl(var(--color-primary) / var(--tw-ring-opacity)); + --tw-ring-color: hsl(var(--color-primary) / var(--tw-ring-opacity, 1)); } .ring-opacity-50 { --tw-ring-opacity: 0.5; @@ -643,7 +643,7 @@ it('should be possible to use an as part of the color definition', expect(result.css).toMatchFormattedCss(css` .bg-primary { --tw-bg-opacity: 1; - background-color: rgb(var(--color-primary) / var(--tw-bg-opacity)); + background-color: rgb(var(--color-primary) / var(--tw-bg-opacity, 1)); } `) }) @@ -769,7 +769,7 @@ it('Theme functions can reference values with slashes in brackets', () => { expect(result.css).toMatchFormattedCss(css` .bg-foo1 { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .bg-foo2 { background-color: #00000080; @@ -823,7 +823,7 @@ it('works with opacity values defined as a placeholder or a function in when col } .bg-foo20 { --tw-bg-opacity: 1; - background-color: rgb(255 100 0 / var(--tw-bg-opacity)); + background-color: rgb(255 100 0 / var(--tw-bg-opacity, 1)); } .bg-foo21 { background-color: #ff640080; @@ -836,7 +836,7 @@ it('works with opacity values defined as a placeholder or a function in when col } .bg-foo40 { --tw-bg-opacity: 1; - background-color: rgb(255 100 0 / var(--tw-bg-opacity)); + background-color: rgb(255 100 0 / var(--tw-bg-opacity, 1)); } .bg-foo41 { background-color: #ff640080; @@ -967,7 +967,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB expect(result.css).toMatchFormattedCss(css` .divide-blue-300 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; - border-color: rgb(147 197 253 / var(--tw-divide-opacity)); + border-color: rgb(147 197 253 / var(--tw-divide-opacity, 1)); } .divide-blue-300\/50 > :not([hidden]) ~ :not([hidden]) { border-color: #93c5fd80; @@ -980,7 +980,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB } .border-blue-300 { --tw-border-opacity: 1; - border-color: rgb(147 197 253 / var(--tw-border-opacity)); + border-color: rgb(147 197 253 / var(--tw-border-opacity, 1)); } .border-blue-300\/50 { border-color: #93c5fd80; @@ -993,7 +993,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB } .bg-blue-300 { --tw-bg-opacity: 1; - background-color: rgb(147 197 253 / var(--tw-bg-opacity)); + background-color: rgb(147 197 253 / var(--tw-bg-opacity, 1)); } .bg-blue-300\/50 { background-color: #93c5fd80; @@ -1006,7 +1006,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB } .text-blue-300 { --tw-text-opacity: 1; - color: rgb(147 197 253 / var(--tw-text-opacity)); + color: rgb(147 197 253 / var(--tw-text-opacity, 1)); } .text-blue-300\/50 { color: #93c5fd80; @@ -1019,7 +1019,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB } .placeholder-blue-300::placeholder { --tw-placeholder-opacity: 1; - color: rgb(147 197 253 / var(--tw-placeholder-opacity)); + color: rgb(147 197 253 / var(--tw-placeholder-opacity, 1)); } .placeholder-blue-300\/50::placeholder { color: #93c5fd80; @@ -1032,7 +1032,7 @@ it('You can re-enable any opacity plugin even when disableColorOpacityUtilitiesB } .ring-blue-300 { --tw-ring-opacity: 1; - --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(147 197 253 / var(--tw-ring-opacity, 1)); } .ring-blue-300\/50 { --tw-ring-color: #93c5fd80; diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index c9647d50fb96..049856a555ed 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -60,11 +60,11 @@ test('opacity variables are given to colors defined as closures', () => { } .text-primary { --tw-text-opacity: 1; - color: rgba(31, 31, 31, var(--tw-text-opacity)); + color: rgba(31, 31, 31, var(--tw-text-opacity, 1)); } .text-secondary { --tw-text-opacity: 1; - color: hsl(10 50% 50% / var(--tw-text-opacity)); + color: hsl(10 50% 50% / var(--tw-text-opacity, 1)); } .text-opacity-50 { --tw-text-opacity: 0.5; diff --git a/tests/prefers-contrast.test.js b/tests/prefers-contrast.test.js index 52420ee1e395..87d983472946 100644 --- a/tests/prefers-contrast.test.js +++ b/tests/prefers-contrast.test.js @@ -21,18 +21,18 @@ it('should be possible to use contrast-more and contrast-less variants', () => { ${defaults} .bg-white { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } @media (prefers-contrast: more) { .contrast-more\:bg-pink-500 { --tw-bg-opacity: 1; - background-color: rgb(236 72 153 / var(--tw-bg-opacity)); + background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1)); } } @media (prefers-contrast: less) { .contrast-less\:bg-black { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } } `) @@ -57,13 +57,13 @@ it('dark mode should appear after the contrast variants', () => { @media (prefers-contrast: more) { .contrast-more\:bg-black { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } } @media (prefers-color-scheme: dark) { .dark\:bg-white { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } } `) diff --git a/tests/prefix.test.js b/tests/prefix.test.js index 8a478f71028f..2ebb8acbc78b 100644 --- a/tests/prefix.test.js +++ b/tests/prefix.test.js @@ -174,7 +174,7 @@ test('prefix', () => { } .dark\:tw-bg-\[rgb\(255\,0\,0\)\]:where(.tw-dark, .tw-dark *) { --tw-bg-opacity: 1; - background-color: rgb(255 0 0 / var(--tw-bg-opacity)); + background-color: rgb(255 0 0 / var(--tw-bg-opacity, 1)); } .dark\:focus\:tw-text-left:focus:where(.tw-dark, .tw-dark *) { text-align: left; @@ -530,7 +530,7 @@ test('supports non-word prefixes (1)', async () => { expect(result.css).toMatchFormattedCss(css` .\@bg-black { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .\@underline { text-decoration-line: underline; @@ -540,7 +540,7 @@ test('supports non-word prefixes (1)', async () => { } .foo { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); background-color: red; } .hover\:before\:\@content-\[\'Hovering\'\]:hover:before { @@ -592,7 +592,7 @@ test('supports non-word prefixes (2)', async () => { expect(result.css).toMatchFormattedCss(css` .\@\]\$bg-black { --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1)); } .\@\]\$underline { text-decoration-line: underline; @@ -602,7 +602,7 @@ test('supports non-word prefixes (2)', async () => { } .foo { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); background-color: red; } `) diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index a6be31fd0aec..92e4b8564be1 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -368,7 +368,7 @@ } .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-divide-opacity)); + border-color: rgb(229 231 235 / var(--tw-divide-opacity, 1)); } .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 0.5; @@ -419,14 +419,14 @@ } .border-black { --tw-border-opacity: 1; - border-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity, 1)); } .border-opacity-10 { --tw-border-opacity: 0.1; } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1)); } .bg-opacity-20 { --tw-bg-opacity: 0.2; @@ -525,7 +525,7 @@ } .font-sans { font-family: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, - Segoe UI Symbol, Noto Color Emoji; + Segoe UI Symbol, Noto Color Emoji; } .text-2xl { font-size: 1.5rem; @@ -566,7 +566,7 @@ } .text-indigo-500 { --tw-text-opacity: 1; - color: rgb(99 102 241 / var(--tw-text-opacity)); + color: rgb(99 102 241 / var(--tw-text-opacity, 1)); } .text-opacity-10 { --tw-text-opacity: 0.1; @@ -580,7 +580,7 @@ } .placeholder-green-300::placeholder { --tw-placeholder-opacity: 1; - color: rgb(134 239 172 / var(--tw-placeholder-opacity)); + color: rgb(134 239 172 / var(--tw-placeholder-opacity, 1)); } .placeholder-opacity-60::placeholder { --tw-placeholder-opacity: 0.6; @@ -635,7 +635,7 @@ } .ring-white { --tw-ring-opacity: 1; - --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity, 1)); } .ring-opacity-40 { --tw-ring-opacity: 0.4; diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index d8d7d2a22d95..1258b79eda62 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -504,7 +504,7 @@ test('with borders', async () => { } .border-red-500 { --tw-border-opacity: 1; - border-color: rgb(239 68 68 / var(--tw-border-opacity)); + border-color: rgb(239 68 68 / var(--tw-border-opacity, 1)); } @media (min-width: 768px) { .md\:border-2 { diff --git a/tests/safelist.test.js b/tests/safelist.test.js index e2621f846e7c..a8d8cc1df366 100644 --- a/tests/safelist.test.js +++ b/tests/safelist.test.js @@ -33,7 +33,7 @@ it('should safelist strings', () => { } .text-gray-200 { --tw-text-opacity: 1; - color: rgb(229 231 235 / var(--tw-text-opacity)); + color: rgb(229 231 235 / var(--tw-text-opacity, 1)); } .hover\:underline:hover { text-decoration-line: underline; @@ -57,22 +57,22 @@ it('should safelist based on a pattern regex', () => { expect(result.css).toMatchFormattedCss(css` .bg-red-100 { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .bg-red-200 { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .uppercase { text-transform: uppercase; } .hover\:bg-red-100:hover { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .hover\:bg-red-200:hover { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } `) }) @@ -102,22 +102,22 @@ it('should not generate duplicates', () => { expect(result.css).toMatchFormattedCss(css` .bg-red-100 { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .bg-red-200 { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .uppercase { text-transform: uppercase; } .hover\:bg-red-100:hover { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .hover\:bg-red-200:hover { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } `) }) @@ -138,11 +138,11 @@ it('should safelist when using a custom prefix', () => { expect(result.css).toMatchFormattedCss(css` .tw-bg-red-100 { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .tw-bg-red-200 { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .tw-uppercase { text-transform: uppercase; @@ -196,11 +196,11 @@ it('should not safelist any invalid variants if provided', () => { expect(result.css).toMatchFormattedCss(css` .bg-red-100 { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .bg-red-200 { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .uppercase { text-transform: uppercase; @@ -254,7 +254,7 @@ it('should safelist negatives based on a pattern regex', () => { expect(result.css).toMatchFormattedCss(css` .bg-red-400 { --tw-bg-opacity: 1; - background-color: rgb(248 113 113 / var(--tw-bg-opacity)); + background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1)); } .bg-red-400\/40 { background-color: #f8717166; @@ -264,7 +264,7 @@ it('should safelist negatives based on a pattern regex', () => { } .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .bg-red-500\/40 { background-color: #ef444466; @@ -286,7 +286,7 @@ it('should safelist negatives based on a pattern regex', () => { } .hover\:bg-red-400:hover { --tw-bg-opacity: 1; - background-color: rgb(248 113 113 / var(--tw-bg-opacity)); + background-color: rgb(248 113 113 / var(--tw-bg-opacity, 1)); } .hover\:bg-red-400\/40:hover { background-color: #f8717166; @@ -296,7 +296,7 @@ it('should safelist negatives based on a pattern regex', () => { } .hover\:bg-red-500:hover { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .hover\:bg-red-500\/40:hover { background-color: #ef444466; @@ -381,38 +381,38 @@ it('should safelist pattern regex having !important selector with variants', () expect(result.css).toMatchFormattedCss(css` .\!bg-gray-500 { --tw-bg-opacity: 1 !important; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important; + background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)) !important; } .\!bg-gray-600 { --tw-bg-opacity: 1 !important; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important; + background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)) !important; } .\!bg-gray-700 { --tw-bg-opacity: 1 !important; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important; + background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important; } .\!bg-gray-800 { --tw-bg-opacity: 1 !important; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important; + background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)) !important; } .uppercase { text-transform: uppercase; } .hover\:\!bg-gray-500:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(107 114 128 / var(--tw-bg-opacity)) !important; + background-color: rgb(107 114 128 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!bg-gray-600:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(75 85 99 / var(--tw-bg-opacity)) !important; + background-color: rgb(75 85 99 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!bg-gray-700:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(55 65 81 / var(--tw-bg-opacity)) !important; + background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!bg-gray-800:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)) !important; + background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1)) !important; } `) }) @@ -437,54 +437,54 @@ it('should safelist multiple patterns with !important selector', () => { expect(result.css).toMatchFormattedCss(css` .\!bg-gray-200 { --tw-bg-opacity: 1 !important; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important; + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important; } .\!bg-gray-300 { --tw-bg-opacity: 1 !important; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important; + background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important; } .\!bg-gray-400 { --tw-bg-opacity: 1 !important; - background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important; + background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)) !important; } .uppercase { text-transform: uppercase; } .\!text-gray-700 { --tw-text-opacity: 1 !important; - color: rgb(55 65 81 / var(--tw-text-opacity)) !important; + color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important; } .\!text-gray-800 { --tw-text-opacity: 1 !important; - color: rgb(31 41 55 / var(--tw-text-opacity)) !important; + color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important; } .\!text-gray-900 { --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; + color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important; } .hover\:\!bg-gray-200:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(229 231 235 / var(--tw-bg-opacity)) !important; + background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!bg-gray-300:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)) !important; + background-color: rgb(209 213 219 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!bg-gray-400:hover { --tw-bg-opacity: 1 !important; - background-color: rgb(156 163 175 / var(--tw-bg-opacity)) !important; + background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1)) !important; } .hover\:\!text-gray-700:hover { --tw-text-opacity: 1 !important; - color: rgb(55 65 81 / var(--tw-text-opacity)) !important; + color: rgb(55 65 81 / var(--tw-text-opacity, 1)) !important; } .hover\:\!text-gray-800:hover { --tw-text-opacity: 1 !important; - color: rgb(31 41 55 / var(--tw-text-opacity)) !important; + color: rgb(31 41 55 / var(--tw-text-opacity, 1)) !important; } .hover\:\!text-gray-900:hover { --tw-text-opacity: 1 !important; - color: rgb(17 24 39 / var(--tw-text-opacity)) !important; + color: rgb(17 24 39 / var(--tw-text-opacity, 1)) !important; } `) }) diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index 45edbb70cd1e..4a8eaf2963b2 100644 --- a/tests/source-maps.test.js +++ b/tests/source-maps.test.js @@ -46,14 +46,14 @@ test('apply generates source maps', async () => { '4:6-33 -> 4:6-18', '4:6-33 -> 5:6-17', '4:6-33 -> 6:6-24', - '4:6-33 -> 7:6-61', + '4:6-33 -> 7:6-64', '5:4 -> 8:4', '7:4 -> 10:4', '8:6-39 -> 11:6-39', '9:6-31 -> 12:6-18', '9:6-31 -> 13:6-17', '9:6-31 -> 14:6-24', - '9:6-31 -> 15:6-61', + '9:6-31 -> 15:6-64', '10:4 -> 16:4', '13:6 -> 18:4', '13:6-29 -> 19:6-18', diff --git a/tests/syntax-lit-html.test.js b/tests/syntax-lit-html.test.js index a3bdfebda160..5d2248c0b6fd 100644 --- a/tests/syntax-lit-html.test.js +++ b/tests/syntax-lit-html.test.js @@ -19,7 +19,7 @@ test('it detects classes in lit-html templates', () => { } .bg-blue-400 { --tw-bg-opacity: 1; - background-color: rgb(96 165 250 / var(--tw-bg-opacity)); + background-color: rgb(96 165 250 / var(--tw-bg-opacity, 1)); } .px-4 { padding-left: 1rem; @@ -34,11 +34,11 @@ test('it detects classes in lit-html templates', () => { } .text-white { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .hover\:bg-blue-600:hover { --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } `) }) diff --git a/tests/syntax-svelte.test.js b/tests/syntax-svelte.test.js index 65678857be27..c119df9660f3 100644 --- a/tests/syntax-svelte.test.js +++ b/tests/syntax-svelte.test.js @@ -18,12 +18,12 @@ test('it detects svelte based on the file extension', () => { expect(result.css).toMatchCss(css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } @media (min-width: 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } } `) @@ -64,12 +64,12 @@ test('using raw with svelte extension', () => { expect(result.css).toMatchCss(css` .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } @media (min-width: 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } } `) diff --git a/tests/variants.test.css b/tests/variants.test.css index 9fd06868669b..82d62eb6448e 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -60,11 +60,11 @@ } .first-letter\:text-red-500:first-letter { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .first-line\:bg-yellow-300:first-line { --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1)); } .first-line\:underline:first-line { text-decoration-line: underline; @@ -85,34 +85,34 @@ } .selection\:bg-blue-500 ::selection { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } .selection\:text-white ::selection { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .selection\:bg-blue-500::selection { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } .selection\:text-white::selection { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .file\:bg-blue-500::file-selector-button { --tw-bg-opacity: 1; - background-color: rgb(59 130 246 / var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1)); } .file\:text-white::file-selector-button { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .placeholder\:font-bold::placeholder { font-weight: 700; } .placeholder\:text-red-500::placeholder { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } .backdrop\:shadow-md::backdrop { --tw-shadow: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; @@ -127,7 +127,7 @@ .before\:bg-red-500:before { content: var(--tw-content); --tw-bg-opacity: 1; - background-color: rgb(239 68 68 / var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1)); } .after\:flex:after { content: var(--tw-content); @@ -154,7 +154,7 @@ } .open\:bg-red-200[open] { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .default\:shadow-md:default, .checked\:shadow-md:checked, @@ -207,11 +207,11 @@ } .file\:hover\:bg-blue-600:hover::file-selector-button { --tw-bg-opacity: 1; - background-color: rgb(37 99 235 / var(--tw-bg-opacity)); + background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1)); } .open\:hover\:bg-red-200:hover[open] { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .focus\:shadow-md:focus, .focus\:hover\:shadow-md:hover:focus, @@ -236,7 +236,7 @@ } .group[open] .group-open\:bg-red-200 { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .group:default .group-default\:shadow-md, .group:checked .group-checked\:shadow-md, @@ -287,7 +287,7 @@ } .group[open]:focus .group-open\:group-focus\:bg-red-200 { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .group:focus:hover .group-focus\:group-hover\:shadow-md, .group:focus-visible .group-focus-visible\:shadow-md, @@ -313,7 +313,7 @@ } .peer[open] ~ .peer-open\:bg-red-200 { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } .peer:default ~ .peer-default\:shadow-md, .peer:checked ~ .peer-checked\:shadow-md, @@ -380,13 +380,13 @@ @media (prefers-contrast: more) { .contrast-more\:bg-yellow-300 { --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1)); } } @media (prefers-contrast: less) { .contrast-less\:bg-yellow-300 { --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1)); } } @media (width >= 640px) { @@ -447,17 +447,17 @@ @media (orientation: portrait) { .portrait\:bg-yellow-300 { --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1)); } } @media (orientation: landscape) { .landscape\:bg-yellow-300 { --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1)); } } -.ltr\:shadow-md:where([dir="ltr"], [dir="ltr"] *), -.rtl\:shadow-md:where([dir="rtl"], [dir="rtl"] *), +.ltr\:shadow-md:where([dir='ltr'], [dir='ltr'] *), +.rtl\:shadow-md:where([dir='rtl'], [dir='rtl'] *), .dark\:shadow-md:where(.dark, .dark *), .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md:where(.dark, .dark *), @@ -505,8 +505,6 @@ @media print { .print\:bg-yellow-300 { --tw-bg-opacity: 1; - background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1)); } } - - diff --git a/tests/variants.test.js b/tests/variants.test.js index 8bc5084c24e1..78d5601133d3 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -299,7 +299,7 @@ test('stacked peer variants', async () => { expect(result.css).toIncludeCss(css` .peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:border-blue-500 { --tw-border-opacity: 1; - border-color: rgb(59 130 246 / var(--tw-border-opacity)); + border-color: rgb(59 130 246 / var(--tw-border-opacity, 1)); } `) }) @@ -1050,7 +1050,7 @@ test('variants with slashes in them work', () => { @media (min-aspect-ratio: 1 / 10) { .ar-1\/10\:text-red-500 { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } } `) @@ -1087,7 +1087,7 @@ test('variants with slashes support modifiers', () => { @media (min-aspect-ratio: 1 / 10) and (foo: 20) { .ar-1\/10\/20\:text-red-500 { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); } } `) diff --git a/tests/withAlphaVariable.test.js b/tests/withAlphaVariable.test.js index d543dfc6ed73..3a430d5b8b2a 100644 --- a/tests/withAlphaVariable.test.js +++ b/tests/withAlphaVariable.test.js @@ -5,7 +5,7 @@ test('it adds the right custom property', () => { withAlphaVariable({ color: '#ff0000', property: 'color', variable: '--tw-text-opacity' }) ).toEqual({ '--tw-text-opacity': '1', - color: 'rgb(255 0 0 / var(--tw-text-opacity))', + color: 'rgb(255 0 0 / var(--tw-text-opacity, 1))', }) expect( withAlphaVariable({ @@ -15,7 +15,7 @@ test('it adds the right custom property', () => { }) ).toEqual({ '--tw-text-opacity': '1', - color: 'hsl(240 100% 50% / var(--tw-text-opacity))', + color: 'hsl(240 100% 50% / var(--tw-text-opacity, 1))', }) }) @@ -179,7 +179,7 @@ test('it allows a closure to be passed', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity))', + 'background-color': 'rgba(0, 0, 0, var(--tw-bg-opacity, 1))', }) }) @@ -192,7 +192,7 @@ test('it transforms rgb and hsl to space-separated rgb and hsl', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))', + 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity, 1))', }) expect( withAlphaVariable({ @@ -202,7 +202,7 @@ test('it transforms rgb and hsl to space-separated rgb and hsl', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))', + 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity, 1))', }) expect( withAlphaVariable({ @@ -212,7 +212,7 @@ test('it transforms rgb and hsl to space-separated rgb and hsl', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))', + 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity, 1))', }) expect( withAlphaVariable({ @@ -222,7 +222,7 @@ test('it transforms rgb and hsl to space-separated rgb and hsl', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))', + 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity, 1))', }) }) @@ -235,6 +235,6 @@ test('it transforms named colors to rgb', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'rgb(255 0 0 / var(--tw-bg-opacity))', + 'background-color': 'rgb(255 0 0 / var(--tw-bg-opacity, 1))', }) })