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 069428f6f..d3d46a4a1 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 9a9091a30..beaf5e70d 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 964c57b82..08dd81bae 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 8793784c6..98ace171e 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 86544ffe1..30edc8a50 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 a373b307a..9795bd0d7 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 31b362353..48d43fb41 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 1a3b1302b..1001ff9c3 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 ae7cce0c8..6e0b034f2 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 1a4a969a4..6209e0a5e 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 76655bea2..be9281812 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 15aedb73b..e49bd8256 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 6576241bf..d9cc8ec82 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 32d711082..cc64391f1 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 bdb81397c..594980803 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 c60bb92ad..fce5f0576 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 57b887d6d..9e92cb9c7 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 a65db81e2..06406306c 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 e9915350f..a9da1b2ed 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 81411b02e..933558afc 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 a4600a495..1d34084b4 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 7cd006cde..0c7685976 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 f5933b7a5..6b6cdf2cc 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 14585f4e3..ff37f9fd8 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 a0f38c3fe..eac1a752e 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 bc41ecfce..c6f4a08e9 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 e37fc5164..20f030d12 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 2923b10c0..6eb83ac49 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 ac439daa4..0e4f1f8c5 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 c9647d50f..049856a55 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 52420ee1e..87d983472 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 8a478f710..2ebb8acbc 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 a6be31fd0..92e4b8564 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 d8d7d2a22..1258b79ed 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 e2621f846..a8d8cc1df 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 45edbb70c..4a8eaf296 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 a3bdfebda..5d2248c0b 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 65678857b..c119df966 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 9fd068686..82d62eb64 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 8bc5084c2..78d560113 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 d543dfc6e..3a430d5b8 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))', }) })