From 4919cbfbb8b84add5fca7ae24fc147d45bc3b4e1 Mon Sep 17 00:00:00 2001 From: Brad Cornes Date: Thu, 9 Sep 2021 15:15:53 +0100 Subject: [PATCH] Update color parsing and formatting (#5442) * Replace `culori` with simple color parser * Use space-separated color syntax * Update default color values to use space-separated syntax * Update separator regex * Fix tests * add tests for the new `color` util Also slightly modified the `color` util itself to take `transparent` into account and also format every value as a string for consistency. Co-authored-by: Robin Malfait --- package-lock.json | 12 +- package.json | 2 +- src/corePlugins.js | 4 +- src/util/color.js | 56 ++++++ src/util/pluginUtils.js | 8 +- src/util/withAlphaVariable.js | 64 ++----- stubs/defaultConfig.stub.js | 26 +-- tests/apply.test.css | 14 +- tests/apply.test.js | 8 +- tests/arbitrary-values.test.css | 21 +- tests/basic-usage.test.css | 39 ++-- tests/color-opacity-modifiers.test.js | 14 +- tests/color.test.js | 49 +++++ tests/custom-extractors.test.css | 4 +- tests/import-syntax.test.css | 2 +- tests/kitchen-sink.test.css | 30 +-- tests/plugins/divide.test.js | 10 +- tests/plugins/gradientColorStops.test.js | 6 +- tests/prefix.test.css | 2 +- tests/raw-content.test.css | 27 ++- tests/resolve-defaults-at-rules.test.js | 12 +- tests/svelte-syntax.test.css | 4 +- tests/variants.test.css | 232 +++++++++++------------ tests/variants.test.js | 2 +- tests/withAlphaVariable.test.js | 63 +++++- 25 files changed, 409 insertions(+), 302 deletions(-) create mode 100644 src/util/color.js create mode 100644 tests/color.test.js diff --git a/package-lock.json b/package-lock.json index 16d639443..aa6d90812 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,8 +12,8 @@ "arg": "^5.0.1", "chalk": "^4.1.2", "chokidar": "^3.5.2", + "color-name": "^1.1.4", "cosmiconfig": "^7.0.1", - "culori": "^0.19.1", "detective": "^5.2.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", @@ -3803,11 +3803,6 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", "dev": true }, - "node_modules/culori": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/culori/-/culori-0.19.1.tgz", - "integrity": "sha512-K/NLpdtNnSQwH2Ru/Fk39wDL40v9PxTBFY6jHQegJDhmBqrE/d9mJB/AD4odSZJml10AlJjZdm6+I9JM3nE/EQ==" - }, "node_modules/data-urls": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz", @@ -13157,11 +13152,6 @@ } } }, - "culori": { - "version": "0.19.1", - "resolved": "https://registry.npmjs.org/culori/-/culori-0.19.1.tgz", - "integrity": "sha512-K/NLpdtNnSQwH2Ru/Fk39wDL40v9PxTBFY6jHQegJDhmBqrE/d9mJB/AD4odSZJml10AlJjZdm6+I9JM3nE/EQ==" - }, "data-urls": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/data-urls/-/data-urls-2.0.0.tgz", diff --git a/package.json b/package.json index b647d08cb..195864592 100644 --- a/package.json +++ b/package.json @@ -70,8 +70,8 @@ "arg": "^5.0.1", "chalk": "^4.1.2", "chokidar": "^3.5.2", + "color-name": "^1.1.4", "cosmiconfig": "^7.0.1", - "culori": "^0.19.1", "detective": "^5.2.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", diff --git a/src/corePlugins.js b/src/corePlugins.js index 4f34c9cf7..12228c7bd 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1302,7 +1302,7 @@ export let backgroundImage = createUtilityPlugin( ) export let gradientColorStops = (() => { function transparentTo(value) { - return withAlphaValue(value, 0, 'rgba(255, 255, 255, 0)') + return withAlphaValue(value, 0, 'rgb(255 255 255 / 0)') } return function ({ matchUtilities, theme }) { @@ -1738,7 +1738,7 @@ export let ringWidth = ({ matchUtilities, addBase, addUtilities, theme }) => { let ringColorDefault = withAlphaValue( theme('ringColor.DEFAULT'), ringOpacityDefault, - `rgba(147, 197, 253, ${ringOpacityDefault})` + `rgb(147 197 253 / ${ringOpacityDefault})` ) addBase({ diff --git a/src/util/color.js b/src/util/color.js new file mode 100644 index 000000000..b1d1a5565 --- /dev/null +++ b/src/util/color.js @@ -0,0 +1,56 @@ +import namedColors from 'color-name' + +let HEX = /^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})?$/i +let SHORT_HEX = /^#([a-f\d])([a-f\d])([a-f\d])([a-f\d])?$/i +let VALUE = `(?:\\d+|\\d*\\.\\d+)%?` +let SEP = `(?:\\s*,\\s*|\\s+)` +let ALPHA_SEP = `\\s*[,/]\\s*` +let RGB_HSL = new RegExp( + `^(rgb|hsl)a?\\(\\s*(${VALUE})${SEP}(${VALUE})${SEP}(${VALUE})(?:${ALPHA_SEP}(${VALUE}))?\\s*\\)$` +) + +export function parseColor(value) { + if (typeof value !== 'string') { + return null + } + + value = value.trim() + if (value === 'transparent') { + return { mode: 'rgb', color: ['0', '0', '0'], alpha: '0' } + } + + if (value in namedColors) { + return { mode: 'rgb', color: namedColors[value].map((v) => v.toString()) } + } + + let hex = value + .replace(SHORT_HEX, (_, r, g, b, a) => ['#', r, r, g, g, b, b, a ? a + a : ''].join('')) + .match(HEX) + + if (hex !== null) { + return { + mode: 'rgb', + color: [parseInt(hex[1], 16), parseInt(hex[2], 16), parseInt(hex[3], 16)].map((v) => + v.toString() + ), + alpha: hex[4] ? (parseInt(hex[4], 16) / 255).toString() : undefined, + } + } + + let match = value.match(RGB_HSL) + + if (match !== null) { + return { + mode: match[1], + color: [match[2], match[3], match[4]].map((v) => v.toString()), + alpha: match[5]?.toString?.(), + } + } + + return null +} + +export function formatColor({ mode, color, alpha }) { + let hasAlpha = alpha !== undefined + return `${mode}(${color.join(' ')}${hasAlpha ? ` / ${alpha}` : ''})` +} diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js index 1f371c7a1..373cd15d1 100644 --- a/src/util/pluginUtils.js +++ b/src/util/pluginUtils.js @@ -1,9 +1,9 @@ import selectorParser from 'postcss-selector-parser' import postcss from 'postcss' -import * as culori from 'culori' import escapeCommas from './escapeCommas' import { withAlphaValue } from './withAlphaVariable' import isKeyframeRule from './isKeyframeRule' +import { parseColor } from './color' export function applyPseudoToMarker(selector, marker, state, join) { let states = [state] @@ -221,10 +221,6 @@ function splitAlpha(modifier) { return [modifier.slice(0, slashIdx), modifier.slice(slashIdx + 1)] } -function isColor(value) { - return culori.parse(value) !== undefined -} - export function asColor(modifier, lookup = {}, tailwindConfig = {}) { if (lookup[modifier] !== undefined) { return lookup[modifier] @@ -245,7 +241,7 @@ export function asColor(modifier, lookup = {}, tailwindConfig = {}) { } return asValue(modifier, lookup, { - validate: isColor, + validate: (value) => parseColor(value) !== null, }) } diff --git a/src/util/withAlphaVariable.js b/src/util/withAlphaVariable.js index 70c552cd2..b9452a1f0 100644 --- a/src/util/withAlphaVariable.js +++ b/src/util/withAlphaVariable.js @@ -1,41 +1,17 @@ -import * as culori from 'culori' - -function isValidColor(color) { - return culori.parse(color) !== undefined -} +import { parseColor, formatColor } from './color' export function withAlphaValue(color, alphaValue, defaultValue) { if (typeof color === 'function') { return color({ opacityValue: alphaValue }) } - if (isValidColor(color)) { - // Parse color - const parsed = culori.parse(color) + let parsed = parseColor(color) - // Apply alpha value - parsed.alpha = alphaValue - - // Format string - let value - if (parsed.mode === 'hsl') { - value = culori.formatHsl(parsed) - } else { - value = culori.formatRgb(parsed) - } - - // Correctly apply CSS variable alpha value - if (typeof alphaValue === 'string' && alphaValue.startsWith('var(') && value.endsWith('NaN)')) { - value = value.replace('NaN)', `${alphaValue})`) - } - - // Color could not be formatted correctly - if (!value.includes('NaN')) { - return value - } + if (parsed === null) { + return defaultValue } - return defaultValue + return formatColor({ ...parsed, alpha: alphaValue }) } export default function withAlphaVariable({ color, property, variable }) { @@ -46,29 +22,23 @@ export default function withAlphaVariable({ color, property, variable }) { } } - if (isValidColor(color)) { - const parsed = culori.parse(color) - - if ('alpha' in parsed) { - // Has an alpha value, return color as-is - return { - [property]: color, - } - } - - const formatFn = parsed.mode === 'hsl' ? 'formatHsl' : 'formatRgb' - const value = culori[formatFn]({ - ...parsed, - alpha: NaN, // intentionally set to `NaN` for replacing - }).replace('NaN)', `var(${variable}))`) + const parsed = parseColor(color) + if (parsed === null) { return { - [variable]: '1', - [property]: value, + [property]: color, + } + } + + if (parsed.alpha !== undefined) { + // Has an alpha value, return color as-is + return { + [property]: color, } } return { - [property]: color, + [variable]: '1', + [property]: formatColor({ ...parsed, alpha: `var(${variable})` }), } } diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 02324cb2c..3ce4b4e55 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -201,13 +201,13 @@ module.exports = { 8: '8px', }, boxShadow: { - sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)', - DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)', - md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', - lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)', - xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)', - '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)', - inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)', + sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)', + DEFAULT: '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06)', + md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06)', + lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05)', + xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04)', + '2xl': '0 25px 50px -12px rgb(0 0 0 / 0.25)', + inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.06)', none: 'none', }, caretColor: (theme) => theme('colors'), @@ -242,12 +242,12 @@ module.exports = { divideOpacity: (theme) => theme('borderOpacity'), divideWidth: (theme) => theme('borderWidth'), dropShadow: { - sm: '0 1px 1px rgba(0,0,0,0.05)', - DEFAULT: ['0 1px 2px rgba(0, 0, 0, 0.1)', '0 1px 1px rgba(0, 0, 0, 0.06)'], - md: ['0 4px 3px rgba(0, 0, 0, 0.07)', '0 2px 2px rgba(0, 0, 0, 0.06)'], - lg: ['0 10px 8px rgba(0, 0, 0, 0.04)', '0 4px 3px rgba(0, 0, 0, 0.1)'], - xl: ['0 20px 13px rgba(0, 0, 0, 0.03)', '0 8px 5px rgba(0, 0, 0, 0.08)'], - '2xl': '0 25px 25px rgba(0, 0, 0, 0.15)', + sm: '0 1px 1px rgb(0 0 0 / 0.05)', + DEFAULT: ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'], + md: ['0 4px 3px rgb(0 0 0 / 0.07)', '0 2px 2px rgb(0 0 0 / 0.06)'], + lg: ['0 10px 8px rgb(0 0 0 / 0.04)', '0 4px 3px rgb(0 0 0 / 0.1)'], + xl: ['0 20px 13px rgb(0 0 0 / 0.03)', '0 8px 5px rgb(0 0 0 / 0.08)'], + '2xl': '0 25px 25px rgb(0 0 0 / 0.15)', none: '0 0 #0000', }, fill: { current: 'currentColor' }, diff --git a/tests/apply.test.css b/tests/apply.test.css index 3c6df8f98..1eef7c6e2 100644 --- a/tests/apply.test.css +++ b/tests/apply.test.css @@ -1,7 +1,7 @@ .basic-example { border-radius: 0.375rem; --tw-bg-opacity: 1; - background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; @@ -94,7 +94,7 @@ .selectors { border-radius: 0.375rem; --tw-bg-opacity: 1; - background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; @@ -142,12 +142,12 @@ var(--tw-numeric-spacing) var(--tw-numeric-fraction); --tw-ordinal: ordinal; --tw-numeric-spacing: tabular-nums; - --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .complex-utilities:hover { - --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -192,13 +192,13 @@ padding-right: 1rem; font-weight: 700; --tw-bg-opacity: 1; - background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } .btn-blue:hover { --tw-bg-opacity: 1; - background-color: rgba(29, 78, 216, var(--tw-bg-opacity)); + background-color: rgb(29 78 216 / var(--tw-bg-opacity)); } .recursive-apply-a { font-weight: 900; diff --git a/tests/apply.test.js b/tests/apply.test.js index 182e02140..172f50b07 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -293,25 +293,25 @@ test('@apply classes from outside a @layer', async () => { .bar { --tw-text-opacity: 1; - color: rgba(239, 68, 68, var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity)); font-weight: 700; } .bar:hover { --tw-text-opacity: 1; - color: rgba(34, 197, 94, var(--tw-text-opacity)); + color: rgb(34 197 94 / var(--tw-text-opacity)); } .baz { text-decoration: underline; --tw-text-opacity: 1; - color: rgba(239, 68, 68, var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity)); font-weight: 700; } .baz:hover { --tw-text-opacity: 1; - color: rgba(34, 197, 94, var(--tw-text-opacity)); + color: rgb(34 197 94 / var(--tw-text-opacity)); } .keep-me-even-though-I-am-not-used-in-content { diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 9f0cdc0a4..3eb51fa9c 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -242,29 +242,29 @@ } .border-\[\#f00\] { --tw-border-opacity: 1; - border-color: rgba(255, 0, 0, var(--tw-border-opacity)); + border-color: rgb(255 0 0 / var(--tw-border-opacity)); } .bg-\[\#0f0\] { --tw-bg-opacity: 1; - background-color: rgba(0, 255, 0, var(--tw-bg-opacity)); + background-color: rgb(0 255 0 / var(--tw-bg-opacity)); } .bg-\[\#ff0000\] { --tw-bg-opacity: 1; - background-color: rgba(255, 0, 0, var(--tw-bg-opacity)); + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); } .bg-\[\#0000ffcc\] { background-color: #0000ffcc; } .bg-\[rgb\(123\2c 123\2c 123\)\] { --tw-bg-opacity: 1; - background-color: rgba(123, 123, 123, var(--tw-bg-opacity)); + background-color: rgb(123 123 123 / var(--tw-bg-opacity)); } .bg-\[rgba\(123\2c 123\2c 123\2c 0\.5\)\] { background-color: rgba(123, 123, 123, 0.5); } .bg-\[hsl\(0\2c 100\%\2c 50\%\)\] { --tw-bg-opacity: 1; - background-color: hsla(0, 100%, 50%, var(--tw-bg-opacity)); + background-color: hsl(0 100% 50% / var(--tw-bg-opacity)); } .bg-\[hsla\(0\2c 100\%\2c 50\%\2c 0\.3\)\] { background-color: hsla(0, 100%, 50%, 0.3); @@ -277,19 +277,18 @@ } .from-\[\#da5b66\] { --tw-gradient-from: #da5b66; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(218, 91, 102, 0)); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(218 91 102 / 0)); } .from-\[var\(--color\)\] { --tw-gradient-from: var(--color); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(255, 255, 255, 0)); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(255 255 255 / 0)); } .via-\[\#da5b66\] { - --tw-gradient-stops: var(--tw-gradient-from), #da5b66, - var(--tw-gradient-to, rgba(218, 91, 102, 0)); + --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to, rgb(218 91 102 / 0)); } .via-\[var\(--color\)\] { --tw-gradient-stops: var(--tw-gradient-from), var(--color), - var(--tw-gradient-to, rgba(255, 255, 255, 0)); + var(--tw-gradient-to, rgb(255 255 255 / 0)); } .to-\[\#da5b66\] { --tw-gradient-to: #da5b66; @@ -367,7 +366,7 @@ } .ring-\[\#76ad65\] { --tw-ring-opacity: 1; - --tw-ring-color: rgba(118, 173, 101, var(--tw-ring-opacity)); + --tw-ring-color: rgb(118 173 101 / var(--tw-ring-opacity)); } .ring-opacity-\[var\(--ring-opacity\)\] { --tw-ring-opacity: var(--ring-opacity); diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index a86cfe8b2..06f7b0306 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -12,14 +12,14 @@ rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: rgba(59, 130, 246, 0.5); + --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; @@ -409,7 +409,7 @@ } .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-divide-opacity)); + border-color: rgb(229 231 235 / var(--tw-divide-opacity)); } .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 0.5; @@ -463,30 +463,30 @@ } .border-black { --tw-border-opacity: 1; - border-color: rgba(0, 0, 0, var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity)); } .border-t-black { --tw-border-opacity: 1; - border-top-color: rgba(0, 0, 0, var(--tw-border-opacity)); + border-top-color: rgb(0 0 0 / var(--tw-border-opacity)); } .border-r-black { --tw-border-opacity: 1; - border-right-color: rgba(0, 0, 0, var(--tw-border-opacity)); + border-right-color: rgb(0 0 0 / var(--tw-border-opacity)); } .border-b-black { --tw-border-opacity: 1; - border-bottom-color: rgba(0, 0, 0, var(--tw-border-opacity)); + border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); } .border-l-black { --tw-border-opacity: 1; - border-left-color: rgba(0, 0, 0, var(--tw-border-opacity)); + border-left-color: rgb(0 0 0 / var(--tw-border-opacity)); } .border-opacity-10 { --tw-border-opacity: 0.1; } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } .bg-opacity-20 { --tw-bg-opacity: 0.2; @@ -496,11 +496,10 @@ } .from-red-300 { --tw-gradient-from: #fca5a5; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0)); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0)); } .via-purple-200 { - --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, - var(--tw-gradient-to, rgba(233, 213, 255, 0)); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0)); } .to-blue-400 { --tw-gradient-to: #60a5fa; @@ -639,7 +638,7 @@ } .text-indigo-500 { --tw-text-opacity: 1; - color: rgba(99, 102, 241, var(--tw-text-opacity)); + color: rgb(99 102 241 / var(--tw-text-opacity)); } .text-opacity-10 { --tw-text-opacity: 0.1; @@ -653,7 +652,7 @@ } .placeholder-green-300::placeholder { --tw-placeholder-opacity: 1; - color: rgba(134, 239, 172, var(--tw-placeholder-opacity)); + color: rgb(134 239 172 / var(--tw-placeholder-opacity)); } .placeholder-opacity-60::placeholder { --tw-placeholder-opacity: 0.6; @@ -680,17 +679,17 @@ mix-blend-mode: saturation; } .shadow { - --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { - --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -718,7 +717,7 @@ } .ring-white { --tw-ring-opacity: 1; - --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity)); + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); } .ring-opacity-40 { --tw-ring-opacity: 0.4; @@ -742,8 +741,8 @@ filter: var(--tw-filter); } .drop-shadow-md { - --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) - drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); + --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) + drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); filter: var(--tw-filter); } .grayscale { diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js index 0f5b9438f..7dd78f3c8 100644 --- a/tests/color-opacity-modifiers.test.js +++ b/tests/color-opacity-modifiers.test.js @@ -8,7 +8,7 @@ test('basic color opacity modifier', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .bg-red-500\\/50 { - background-color: rgba(239, 68, 68, 0.5); + background-color: rgb(239 68 68 / 0.5); } `) }) @@ -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: rgba(255, 0, 0, var(--tw-bg-opacity)); + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); } `) }) @@ -44,7 +44,7 @@ test('arbitrary color opacity modifier', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .bg-red-500\\/\\[var\\(--opacity\\)\\] { - background-color: rgba(239, 68, 68, var(--opacity)); + background-color: rgb(239 68 68 / var(--opacity)); } `) }) @@ -122,14 +122,14 @@ test('utilities that support any type are supported', async () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` .from-red-500\\/50 { - --tw-gradient-from: rgba(239, 68, 68, 0.5); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 68, 68, 0)); + --tw-gradient-from: rgb(239 68 68 / 0.5); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0)); } .fill-red-500\\/25 { - fill: rgba(239, 68, 68, 0.25); + fill: rgb(239 68 68 / 0.25); } .placeholder-red-500\\/75::placeholder { - color: rgba(239, 68, 68, 0.75); + color: rgb(239 68 68 / 0.75); } `) }) diff --git a/tests/color.test.js b/tests/color.test.js new file mode 100644 index 000000000..be9edbac5 --- /dev/null +++ b/tests/color.test.js @@ -0,0 +1,49 @@ +import { parseColor, formatColor } from '../src/util/color' + +describe('parseColor', () => { + it.each` + color | output + ${'black'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }} + ${'#0088cc'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }} + ${'#08c'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }} + ${'#0088cc99'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }} + ${'#08c9'} | ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }} + ${'rgb(0, 30, 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }} + ${'rgba(0, 30, 60, 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }} + ${'rgb(0 30 60)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: undefined }} + ${'rgb(0 30 60 / 0.5)'} | ${{ mode: 'rgb', color: ['0', '30', '60'], alpha: '0.5' }} + ${'hsl(0, 30%, 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }} + ${'hsla(0, 30%, 60%, 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }} + ${'hsl(0 30% 60%)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: undefined }} + ${'hsl(0 30% 60% / 0.5)'} | ${{ mode: 'hsl', color: ['0', '30%', '60%'], alpha: '0.5' }} + ${'transparent'} | ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: '0' }} + `('should parse "$color" to the correct value', ({ color, output }) => { + expect(parseColor(color)).toEqual(output) + }) + + it.each` + color + ${'var(--my-color)'} + ${'currentColor'} + ${'inherit'} + ${'initial'} + ${'revert'} + ${'unset'} + `('should return `null` for unparseable color "$color"', ({ color }) => { + expect(parseColor(color)).toBe(null) + }) +}) + +describe('formatColor', () => { + it.each` + color | output + ${{ mode: 'rgb', color: ['0', '0', '0'], alpha: undefined }} | ${'rgb(0 0 0)'} + ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: undefined }} | ${'rgb(0 136 204)'} + ${{ mode: 'rgb', color: ['0', '136', '204'], alpha: '0.6' }} | ${'rgb(0 136 204 / 0.6)'} + ${{ mode: 'hsl', color: ['0', '0%', '0%'], alpha: undefined }} | ${'hsl(0 0% 0%)'} + ${{ mode: 'hsl', color: ['0', '136%', '204%'], alpha: undefined }} | ${'hsl(0 136% 204%)'} + ${{ mode: 'hsl', color: ['0', '136%', '204%'], alpha: '0.6' }} | ${'hsl(0 136% 204% / 0.6)'} + `('should format the color pieces into a proper "$output"', ({ color, output }) => { + expect(formatColor(color)).toEqual(output) + }) +}) diff --git a/tests/custom-extractors.test.css b/tests/custom-extractors.test.css index f817afdff..837a02f65 100644 --- a/tests/custom-extractors.test.css +++ b/tests/custom-extractors.test.css @@ -1,8 +1,8 @@ .bg-white { --tw-bg-opacity: 1; - background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .text-indigo-500 { --tw-text-opacity: 1; - color: rgba(99, 102, 241, var(--tw-text-opacity)); + color: rgb(99 102 241 / var(--tw-text-opacity)); } diff --git a/tests/import-syntax.test.css b/tests/import-syntax.test.css index 689ddb280..66ac9568c 100644 --- a/tests/import-syntax.test.css +++ b/tests/import-syntax.test.css @@ -34,7 +34,7 @@ h1 { } .bg-black { --tw-bg-opacity: 1; - background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } @media (min-width: 768px) { .md\:hover\:text-center:hover { diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index cfda4f5cc..22ec76eb1 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -18,7 +18,7 @@ .apply-test { margin-top: 1.5rem; --tw-bg-opacity: 1; - background-color: rgba(236, 72, 153, var(--tw-bg-opacity)); + background-color: rgb(236 72 153 / var(--tw-bg-opacity)); } .apply-test:hover { font-weight: 700; @@ -29,11 +29,11 @@ @media (min-width: 640px) { .apply-test { --tw-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } .apply-test:focus:nth-child(even) { --tw-bg-opacity: 1; - background-color: rgba(251, 207, 232, var(--tw-bg-opacity)); + background-color: rgb(251 207 232 / var(--tw-bg-opacity)); } } .apply-components { @@ -83,7 +83,7 @@ @media (min-width: 640px) { .apply-with-existing:hover { --tw-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } } .multiple, @@ -117,7 +117,7 @@ } .dark .group:hover .apply-dark-group-example-a { --tw-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } @media (min-width: 640px) { @media (prefers-reduced-motion: no-preference) { @@ -145,7 +145,7 @@ --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: rgba(59, 130, 246, 0.5); + --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; @@ -288,11 +288,11 @@ div { } .bg-black { --tw-bg-opacity: 1; - background-color: rgba(0, 0, 0, var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } .bg-opacity-50 { --tw-bg-opacity: 0.5; @@ -305,7 +305,7 @@ div { } .from-foo { --tw-gradient-from: #bada55; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(186, 218, 85, 0)); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(186 218 85 / 0)); } .text-center { text-align: center; @@ -314,12 +314,12 @@ div { font-weight: 500; } .shadow-sm { - --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -377,7 +377,7 @@ div { font-weight: 700; } .hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -396,7 +396,7 @@ div { } .focus\:ring-blue-500:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgba(59, 130, 246, var(--tw-ring-opacity)); + --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); } .focus\:hover\:font-light:focus:hover { font-weight: 300; @@ -537,12 +537,12 @@ div { opacity: 0.5; } .md\:shadow-sm { - --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .md\:hover\:border-r-blue-500\/30:hover { - border-right-color: rgba(59, 130, 246, 0.3); + border-right-color: rgb(59 130 246 / 0.3); } .md\:hover\:opacity-20:hover { opacity: 0.2; diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index fcfb45ece..b63c0bc8d 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -12,7 +12,7 @@ it('should add the divide styles for divide-y and a default border color', () => ::before, ::after { --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } .divide-y > :not([hidden]) ~ :not([hidden]) { @@ -36,7 +36,7 @@ it('should add the divide styles for divide-x and a default border color', () => ::before, ::after { --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } .divide-x > :not([hidden]) ~ :not([hidden]) { @@ -60,7 +60,7 @@ it('should add the divide styles for divide-y-reverse and a default border color ::before, ::after { --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } .divide-y-reverse > :not([hidden]) ~ :not([hidden]) { @@ -82,7 +82,7 @@ it('should add the divide styles for divide-x-reverse and a default border color ::before, ::after { --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } .divide-x-reverse > :not([hidden]) ~ :not([hidden]) { @@ -104,7 +104,7 @@ it('should only inject the base styles once if we use divide and border at the s ::before, ::after { --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } .divide-y > :not([hidden]) ~ :not([hidden]) { diff --git a/tests/plugins/gradientColorStops.test.js b/tests/plugins/gradientColorStops.test.js index 9047ff699..9dd5b71de 100644 --- a/tests/plugins/gradientColorStops.test.js +++ b/tests/plugins/gradientColorStops.test.js @@ -38,7 +38,7 @@ test('opacity variables are given to colors defined as closures', () => { } .from-secondary { --tw-gradient-from: hsl(10, 50%, 50%); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsla(10, 50%, 50%, 0)); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, hsl(10 50% 50% / 0)); } .via-primary { --tw-gradient-stops: var(--tw-gradient-from), rgb(31, 31, 31), @@ -46,7 +46,7 @@ test('opacity variables are given to colors defined as closures', () => { } .via-secondary { --tw-gradient-stops: var(--tw-gradient-from), hsl(10, 50%, 50%), - var(--tw-gradient-to, hsla(10, 50%, 50%, 0)); + var(--tw-gradient-to, hsl(10 50% 50% / 0)); } .to-primary { --tw-gradient-to: rgb(31, 31, 31); @@ -60,7 +60,7 @@ test('opacity variables are given to colors defined as closures', () => { } .text-secondary { --tw-text-opacity: 1; - color: hsla(10, 50%, 50%, var(--tw-text-opacity)); + color: hsl(10 50% 50% / var(--tw-text-opacity)); } .text-opacity-50 { --tw-text-opacity: 0.5; diff --git a/tests/prefix.test.css b/tests/prefix.test.css index 269943c5a..2575134af 100644 --- a/tests/prefix.test.css +++ b/tests/prefix.test.css @@ -74,7 +74,7 @@ } .tw-dark .dark\:tw-bg-\[rgb\(255\2c 0\2c 0\)\] { --tw-bg-opacity: 1; - background-color: rgba(255, 0, 0, var(--tw-bg-opacity)); + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); } .tw-dark .dark\:focus\:tw-text-left:focus { text-align: left; diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index c4d4fa05c..0c466140d 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -344,7 +344,7 @@ } .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-divide-opacity)); + border-color: rgb(229 231 235 / var(--tw-divide-opacity)); } .divide-opacity-50 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 0.5; @@ -392,14 +392,14 @@ } .border-black { --tw-border-opacity: 1; - border-color: rgba(0, 0, 0, var(--tw-border-opacity)); + border-color: rgb(0 0 0 / var(--tw-border-opacity)); } .border-opacity-10 { --tw-border-opacity: 0.1; } .bg-green-500 { --tw-bg-opacity: 1; - background-color: rgba(34, 197, 94, var(--tw-bg-opacity)); + background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } .bg-opacity-20 { --tw-bg-opacity: 0.2; @@ -409,11 +409,10 @@ } .from-red-300 { --tw-gradient-from: #fca5a5; - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(252, 165, 165, 0)); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(252 165 165 / 0)); } .via-purple-200 { - --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, - var(--tw-gradient-to, rgba(233, 213, 255, 0)); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to, rgb(233 213 255 / 0)); } .to-blue-400 { --tw-gradient-to: #60a5fa; @@ -546,7 +545,7 @@ } .text-indigo-500 { --tw-text-opacity: 1; - color: rgba(99, 102, 241, var(--tw-text-opacity)); + color: rgb(99 102 241 / var(--tw-text-opacity)); } .text-opacity-10 { --tw-text-opacity: 0.1; @@ -560,7 +559,7 @@ } .placeholder-green-300::placeholder { --tw-placeholder-opacity: 1; - color: rgba(134, 239, 172, var(--tw-placeholder-opacity)); + color: rgb(134 239 172 / var(--tw-placeholder-opacity)); } .placeholder-opacity-60::placeholder { --tw-placeholder-opacity: 0.6; @@ -581,17 +580,17 @@ mix-blend-mode: saturation; } .shadow { - --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { - --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); + --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -2px rgb(0 0 0 / 0.05); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -619,7 +618,7 @@ } .ring-white { --tw-ring-opacity: 1; - --tw-ring-color: rgba(255, 255, 255, var(--tw-ring-opacity)); + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); } .ring-opacity-40 { --tw-ring-opacity: 0.4; @@ -643,8 +642,8 @@ filter: var(--tw-filter); } .drop-shadow-md { - --tw-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) - drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06)); + --tw-drop-shadow: drop-shadow(0 4px 3px rgb(0 0 0 / 0.07)) + drop-shadow(0 2px 2px rgb(0 0 0 / 0.06)); filter: var(--tw-filter); } .grayscale { diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index 7d87d9297..0a4d2af13 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -409,7 +409,7 @@ test('with borders', async () => { ::before, ::after { --tw-border-opacity: 1; - border-color: rgba(229, 231, 235, var(--tw-border-opacity)); + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } /* --- */ .border { @@ -417,7 +417,7 @@ test('with borders', async () => { } .border-red-500 { --tw-border-opacity: 1; - border-color: rgba(239, 68, 68, var(--tw-border-opacity)); + border-color: rgb(239 68 68 / var(--tw-border-opacity)); } @media (min-width: 768px) { .md\\:border-2 { @@ -451,14 +451,14 @@ test('with shadows', async () => { --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; - --tw-ring-color: rgba(59, 130, 246, 0.5); + --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; } /* --- */ .shadow { - --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06); + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px 0 rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @@ -470,11 +470,11 @@ test('with shadows', async () => { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-black\\/25 { - --tw-ring-color: rgba(0, 0, 0, 0.25); + --tw-ring-color: rgb(0 0 0 / 0.25); } @media (min-width: 768px) { .md\\:shadow-xl { - --tw-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); + --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 10px 10px -5px rgb(0 0 0 / 0.04); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } diff --git a/tests/svelte-syntax.test.css b/tests/svelte-syntax.test.css index 8cbd69623..20aaf36f8 100644 --- a/tests/svelte-syntax.test.css +++ b/tests/svelte-syntax.test.css @@ -1,10 +1,10 @@ .bg-red-500 { --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } @media (min-width: 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; - background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); } } diff --git a/tests/variants.test.css b/tests/variants.test.css index 56277cc51..300d8c798 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -11,11 +11,11 @@ } .first-letter\:text-red-500::first-letter { --tw-text-opacity: 1; - color: rgba(239, 68, 68, var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity)); } .first-line\:bg-yellow-300::first-line { --tw-bg-opacity: 1; - background-color: rgba(253, 224, 71, var(--tw-bg-opacity)); + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); } .first-line\:underline::first-line { text-decoration: underline; @@ -26,7 +26,7 @@ } .marker\:text-red-500 *::marker { --tw-text-opacity: 1; - color: rgba(239, 68, 68, var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity)); } .marker\:text-lg::marker { font-size: 1.125rem; @@ -34,23 +34,23 @@ } .marker\:text-red-500::marker { --tw-text-opacity: 1; - color: rgba(239, 68, 68, var(--tw-text-opacity)); + color: rgb(239 68 68 / var(--tw-text-opacity)); } .selection\:bg-blue-500 *::selection { --tw-bg-opacity: 1; - background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); } .selection\:text-white *::selection { --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } .selection\:bg-blue-500::selection { --tw-bg-opacity: 1; - background-color: rgba(59, 130, 246, var(--tw-bg-opacity)); + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); } .selection\:text-white::selection { --tw-text-opacity: 1; - color: rgba(255, 255, 255, var(--tw-text-opacity)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } .before\:block::before { content: ''; @@ -59,7 +59,7 @@ .before\:bg-red-500::before { content: ''; --tw-bg-opacity: 1; - background-color: rgba(239, 68, 68, var(--tw-bg-opacity)); + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } .after\:flex::after { content: ''; @@ -70,552 +70,552 @@ text-transform: uppercase; } .first\:shadow-md:first-child { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .last\:shadow-md:last-child { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .only\:shadow-md:only-child { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .odd\:shadow-md:nth-child(odd) { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .even\:shadow-md:nth-child(even) { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .first-of-type\:shadow-md:first-of-type { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .last-of-type\:shadow-md:last-of-type { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .only-of-type\:shadow-md:only-of-type { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .visited\:shadow-md:visited { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .target\:shadow-md:target { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .default\:shadow-md:default { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .checked\:shadow-md:checked { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .indeterminate\:shadow-md:indeterminate { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .placeholder-shown\:shadow-md:placeholder-shown { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .autofill\:shadow-md:autofill { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .required\:shadow-md:required { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .valid\:shadow-md:valid { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .invalid\:shadow-md:invalid { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .in-range\:shadow-md:in-range { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .out-of-range\:shadow-md:out-of-range { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .read-only\:shadow-md:read-only { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .empty\:shadow-md:empty { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus-within\:shadow-md:focus-within { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-md:hover { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus\:shadow-md:focus { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus\:hover\:shadow-md:focus:hover { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .focus-visible\:shadow-md:focus-visible { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .active\:shadow-md:active { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .disabled\:shadow-md:disabled { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:first-child .group-first\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:last-child .group-last\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:only-child .group-only\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:nth-child(odd) .group-odd\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:nth-child(even) .group-even\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:first-of-type .group-first-of-type\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:last-of-type .group-last-of-type\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:only-of-type .group-only-of-type\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:visited .group-visited\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:target .group-target\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:default .group-default\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:checked .group-checked\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:indeterminate .group-indeterminate\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:placeholder-shown .group-placeholder-shown\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:autofill .group-autofill\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:required .group-required\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:valid .group-valid\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:invalid .group-invalid\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:in-range .group-in-range\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:out-of-range .group-out-of-range\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:read-only .group-read-only\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:empty .group-empty\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:focus-within .group-focus-within\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:hover .group-hover\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:focus .group-focus\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:focus:hover .group-focus\:group-hover\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:focus-visible .group-focus-visible\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:active .group-active\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:disabled .group-disabled\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:disabled:focus:hover .group-disabled\:group-focus\:group-hover\:first\:shadow-md:first-child { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:first-child ~ .peer-first\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:last-child ~ .peer-last\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:only-child ~ .peer-only\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:nth-child(odd) ~ .peer-odd\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:nth-child(even) ~ .peer-even\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:first-of-type ~ .peer-first-of-type\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:last-of-type ~ .peer-last-of-type\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:only-of-type ~ .peer-only-of-type\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:visited ~ .peer-visited\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:target ~ .peer-target\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:default ~ .peer-default\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:checked ~ .peer-checked\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:indeterminate ~ .peer-indeterminate\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:placeholder-shown ~ .peer-placeholder-shown\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:autofill ~ .peer-autofill\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:required ~ .peer-required\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:valid ~ .peer-valid\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:invalid ~ .peer-invalid\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:in-range ~ .peer-in-range\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:out-of-range ~ .peer-out-of-range\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:read-only ~ .peer-read-only\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:empty ~ .peer-empty\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:focus-within ~ .peer-focus-within\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:hover ~ .peer-hover\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:focus ~ .peer-focus\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:focus:hover ~ .peer-focus\:peer-hover\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:focus-visible ~ .peer-focus-visible\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:active ~ .peer-active\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:disabled ~ .peer-disabled\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:disabled:focus:hover ~ .peer-disabled\:peer-focus\:peer-hover\:first\:shadow-md:first-child { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } [dir='ltr'] .ltr\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } [dir='rtl'] .rtl\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @media (prefers-reduced-motion: no-preference) { .motion-safe\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } @media (prefers-reduced-motion: reduce) { .motion-reduce\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } .dark .dark\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dark .group:disabled:focus:hover .dark\:group-disabled\:group-focus\:group-hover\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dark .peer:disabled:focus:hover ~ .dark\:peer-disabled\:peer-focus\:peer-hover\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @media (min-width: 640px) { .sm\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .sm\:active\:shadow-md:active { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } @media (min-width: 768px) { .md\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group:focus .md\:group-focus\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } @media (min-width: 1024px) { .lg\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .dark .lg\:dark\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } @media (min-width: 1280px) { .xl\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } @media (min-width: 1536px) { .\32xl\:shadow-md { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } @media (prefers-reduced-motion: no-preference) { .dark .\32xl\:dark\:motion-safe\:focus-within\:shadow-md:focus-within { - --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -1px rgb(0 0 0 / 0.06); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } diff --git a/tests/variants.test.js b/tests/variants.test.js index d6e8cea1e..b4d7b49ca 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -39,7 +39,7 @@ test('stacked peer variants', async () => { let expected = css` .peer:disabled:focus:hover ~ .peer-disabled\\:peer-focus\\:peer-hover\\:border-blue-500 { --tw-border-opacity: 1; - border-color: rgba(59, 130, 246, var(--tw-border-opacity)); + border-color: rgb(59 130 246 / var(--tw-border-opacity)); } ` diff --git a/tests/withAlphaVariable.test.js b/tests/withAlphaVariable.test.js index 34ae4487a..d543dfc6e 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: 'rgba(255, 0, 0, var(--tw-text-opacity))', + color: 'rgb(255 0 0 / var(--tw-text-opacity))', }) expect( withAlphaVariable({ @@ -15,7 +15,7 @@ test('it adds the right custom property', () => { }) ).toEqual({ '--tw-text-opacity': '1', - color: 'hsla(240, 100%, 50%, var(--tw-text-opacity))', + color: 'hsl(240 100% 50% / var(--tw-text-opacity))', }) }) @@ -29,6 +29,42 @@ test('it ignores colors that cannot be parsed', () => { ).toEqual({ 'background-color': 'currentColor', }) + expect( + withAlphaVariable({ + color: 'rgb(255, 0)', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + 'background-color': 'rgb(255, 0)', + }) + expect( + withAlphaVariable({ + color: 'rgb(255)', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + 'background-color': 'rgb(255)', + }) + expect( + withAlphaVariable({ + color: 'rgb(255, 0, 0, 255)', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + 'background-color': 'rgb(255, 0, 0, 255)', + }) + expect( + withAlphaVariable({ + color: 'rgb(var(--color))', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + 'background-color': 'rgb(var(--color))', + }) }) test('it ignores colors that already have an alpha channel', () => { @@ -147,7 +183,7 @@ test('it allows a closure to be passed', () => { }) }) -test('it transforms rgb and hsl to rgba and hsla', () => { +test('it transforms rgb and hsl to space-separated rgb and hsl', () => { expect( withAlphaVariable({ color: 'rgb(50, 50, 50)', @@ -156,7 +192,7 @@ test('it transforms rgb and hsl to rgba and hsla', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'rgba(50, 50, 50, var(--tw-bg-opacity))', + 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))', }) expect( withAlphaVariable({ @@ -166,7 +202,7 @@ test('it transforms rgb and hsl to rgba and hsla', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'rgba(50, 50, 50, var(--tw-bg-opacity))', + 'background-color': 'rgb(50 50 50 / var(--tw-bg-opacity))', }) expect( withAlphaVariable({ @@ -176,7 +212,7 @@ test('it transforms rgb and hsl to rgba and hsla', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'hsla(50, 50%, 50%, var(--tw-bg-opacity))', + 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))', }) expect( withAlphaVariable({ @@ -186,6 +222,19 @@ test('it transforms rgb and hsl to rgba and hsla', () => { }) ).toEqual({ '--tw-bg-opacity': '1', - 'background-color': 'hsla(50, 50%, 50%, var(--tw-bg-opacity))', + 'background-color': 'hsl(50 50% 50% / var(--tw-bg-opacity))', + }) +}) + +test('it transforms named colors to rgb', () => { + expect( + withAlphaVariable({ + color: 'red', + property: 'background-color', + variable: '--tw-bg-opacity', + }) + ).toEqual({ + '--tw-bg-opacity': '1', + 'background-color': 'rgb(255 0 0 / var(--tw-bg-opacity))', }) })