Error: Snapshot ``@import 'tailwindcss'` is replaced with the generated CSS 1` mismatched - Expected + Received "@layer theme { - :root { - --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif; - --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - --color-red-50: oklch(.971 .013 17.38); - --color-red-100: oklch(.936 .032 17.717); - --color-red-200: oklch(.885 .062 18.334); - --color-red-300: oklch(.808 .114 19.571); - --color-red-400: oklch(.704 .191 22.216); - --color-red-500: oklch(.637 .237 25.331); - --color-red-600: oklch(.577 .245 27.325); - --color-red-700: oklch(.505 .213 27.518); - --color-red-800: oklch(.444 .177 26.899); - --color-red-900: oklch(.396 .141 25.723); - --color-red-950: oklch(.258 .092 26.042); - --color-orange-50: oklch(.98 .016 73.684); - --color-orange-100: oklch(.954 .038 75.164); - --color-orange-200: oklch(.901 .076 70.697); - --color-orange-300: oklch(.837 .128 66.29); - --color-orange-400: oklch(.75 .183 55.934); - --color-orange-500: oklch(.705 .213 47.604); - --color-orange-600: oklch(.646 .222 41.116); - --color-orange-700: oklch(.553 .195 38.402); - --color-orange-800: oklch(.47 .157 37.304); - --color-orange-900: oklch(.408 .123 38.172); - --color-orange-950: oklch(.266 .079 36.259); - --color-amber-50: oklch(.987 .022 95.277); - --color-amber-100: oklch(.962 .059 95.617); - --color-amber-200: oklch(.924 .12 95.746); - --color-amber-300: oklch(.879 .169 91.605); - --color-amber-400: oklch(.828 .189 84.429); - --color-amber-500: oklch(.769 .188 70.08); - --color-amber-600: oklch(.666 .179 58.318); - --color-amber-700: oklch(.555 .163 48.998); - --color-amber-800: oklch(.473 .137 46.201); - --color-amber-900: oklch(.414 .112 45.904); - --color-amber-950: oklch(.279 .077 45.635); - --color-yellow-50: oklch(.987 .026 102.212); - --color-yellow-100: oklch(.973 .071 103.193); - --color-yellow-200: oklch(.945 .129 101.54); - --color-yellow-300: oklch(.905 .182 98.111); - --color-yellow-400: oklch(.852 .199 91.936); - --color-yellow-500: oklch(.795 .184 86.047); - --color-yellow-600: oklch(.681 .162 75.834); - --color-yellow-700: oklch(.554 .135 66.442); - --color-yellow-800: oklch(.476 .114 61.907); - --color-yellow-900: oklch(.421 .095 57.708); - --color-yellow-950: oklch(.286 .066 53.813); - --color-lime-50: oklch(.986 .031 120.757); - --color-lime-100: oklch(.967 .067 122.328); - --color-lime-200: oklch(.938 .127 124.321); - --color-lime-300: oklch(.897 .196 126.665); - --color-lime-400: oklch(.841 .238 128.85); - --color-lime-500: oklch(.768 .233 130.85); - --color-lime-600: oklch(.648 .2 131.684); - --color-lime-700: oklch(.532 .157 131.589); - --color-lime-800: oklch(.453 .124 130.933); - --color-lime-900: oklch(.405 .101 131.063); - --color-lime-950: oklch(.274 .072 132.109); - --color-green-50: oklch(.982 .018 155.826); - --color-green-100: oklch(.962 .044 156.743); - --color-green-200: oklch(.925 .084 155.995); - --color-green-300: oklch(.871 .15 154.449); - --color-green-400: oklch(.792 .209 151.711); - --color-green-500: oklch(.723 .219 149.579); - --color-green-600: oklch(.627 .194 149.214); - --color-green-700: oklch(.527 .154 150.069); - --color-green-800: oklch(.448 .119 151.328); - --color-green-900: oklch(.393 .095 152.535); - --color-green-950: oklch(.266 .065 152.934); - --color-emerald-50: oklch(.979 .021 166.113); - --color-emerald-100: oklch(.95 .052 163.051); - --color-emerald-200: oklch(.905 .093 164.15); - --color-emerald-300: oklch(.845 .143 164.978); - --color-emerald-400: oklch(.765 .177 163.223); - --color-emerald-500: oklch(.696 .17 162.48); - --color-emerald-600: oklch(.596 .145 163.225); - --color-emerald-700: oklch(.508 .118 165.612); - --color-emerald-800: oklch(.432 .095 166.913); - --co

Error: Snapshot `compiling CSS > adds vendor prefixes 1` mismatched - Expected + Received ".\[text-size-adjust\:none\] { - -webkit-text-size-adjust: none; - -moz-text-size-adjust: none; text-size-adjust: none; }" ❯ src/index.test.ts:163:7

Error: Snapshot `Parsing themes values from CSS > unsetting `--text-*` does not unset `--text-color-*`, `--text-underline-offset-*`, `--text-indent-*`, `--text-decoration-thickness-*` or `--text-decoration-color-*` 1` mismatched - Expected + Received @@ -19,11 +19,10 @@ color: var(--text-color-potato); } .decoration-salad { -webkit-text-decoration-color: var(--text-decoration-color-salad); - -webkit-text-decoration-color: var(--text-decoration-color-salad); text-decoration-color: var(--text-decoration-color-salad); } .decoration-potato { text-decoration-thickness: var(--text-decoration-thickness-potato); ❯ src/index.test.ts:1389:7

Error: Snapshot `color-scheme 1` mismatched - Expected + Received ".scheme-dark { - --lightningcss-light: ; - --lightningcss-dark: initial; - --lightningcss-light: ; - --lightningcss-dark: initial; - color-scheme: dark; - } - - .scheme-light { - --lightningcss-light: initial; - --lightningcss-dark: ; - --lightningcss-light: initial; - --lightningcss-dark: ; - color-scheme: light; - } - - .scheme-light-dark { - --lightningcss-light: initial; - --lightningcss-dark: ; - --lightningcss-light: initial; - --lightningcss-dark: ; - color-scheme: light dark; - } - - @media (prefers-color-scheme: dark) { - .scheme-light-dark { - --lightningcss-light: ; - --lightningcss-dark: initial; - } - } - - .scheme-normal { - color-scheme: normal; - } - - .scheme-only-dark { - --lightningcss-light: ; - --lightningcss-dark: initial; - --lightningcss-light: ; - --lightningcss-dark: initial; - color-scheme: dark only; - } - - .scheme-only-light { - --lightningcss-light: initial; - --lightningcss-dark: ; - --lightningcss-light: initial; - --lightningcss-dark: ; + color-scheme: dark; + } + + .scheme-light { + color-scheme: light; + } + + .scheme-light-dark { + color-scheme: light dark; + } + + .scheme-normal { + color-scheme: normal; + } + + .scheme-only-dark { + color-scheme: dark only; + } + + .scheme-only-light { color-scheme: light only; }" ❯ src/utilities.test.ts:6840:5

Error: Snapshot `decoration 1` mismatched - Expected + Received @@ -9,62 +9,52 @@ .decoration-\[\#0088cc\]\/50, .decoration-\[\#0088cc\]\/\[0\.5\], .decoration-\[\#0088cc\]\/\[50\%\] { text-decoration-color: oklab(59.9824% -.06725 -.12414 / .5); } .decoration-\[color\:var\(--my-color\)\] { - -webkit-text-decoration-color: var(--my-color); - -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } .decoration-\[color\:var\(--my-color\)\]\/50, .decoration-\[color\:var\(--my-color\)\]\/\[0\.5\], .decoration-\[color\:var\(--my-color\)\]\/\[50\%\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); } .decoration-\[var\(--my-color\)\] { - -webkit-text-decoration-color: var(--my-color); - -webkit-text-decoration-color: var(--my-color); text-decoration-color: var(--my-color); } .decoration-\[var\(--my-color\)\]\/50, .decoration-\[var\(--my-color\)\]\/\[0\.5\], .decoration-\[var\(--my-color\)\]\/\[50\%\] { - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); + } + + .decoration-current { - text-decoration-color: color-mix(in oklab, var(--my-color) 50%, transparent); - } - - .decoration-current { + -webkit-text-decoration-color: currentColor; text-decoration-color: currentColor; } .decoration-current\/50, .decoration-current\/\[0\.5\], .decoration-current\/\[50\%\] { -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); text-decoration-color: color-mix(in oklab, currentColor 50%, transparent); } .decoration-inherit { -webkit-text-decoration-color: inherit; - -webkit-text-decoration-color: inherit; text-decoration-color: inherit; } .decoration-red-500 { -webkit-text-decoration-color: var(--color-red-500); - -webkit-text-decoration-color: var(--color-red-500); text-decoration-color: var(--color-red-500); } .decoration-red-500\/50, .decoration-red-500\/\[0\.5\], .decoration-red-500\/\[50\%\] { -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - -webkit-text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); + text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - text-decoration-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - - .decoration-transparent { + } + + .decoration-transparent { + -webkit-text-decoration-color: #0000; text-decoration-color: #0000; } .decoration-dashed { text-decoration-style: dashed; @@ -109,11 +99,11 @@ .decoration-\[12px\] { text-decoration-thickness: 12px; } .decoration-\[50\%\] { - text-decoration-thickness: .5em; + text-decoration-thickness: 50%; } .decoration-\[length\:var\(--my-thickness\)\], .decoration-\[percentage\:var\(--my-thickness\)\] { text-decoration-thickness: var(--my-thickness); } ❯ src/utilities.test.ts:13409:5

Error: Snapshot `backdrop-filter 1` mismatched - Expected + Received @@ -2,200 +2,167 @@ --blur-xl: 24px; } .backdrop-blur-\[4px\] { --tw-backdrop-blur: blur(4px); - -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-blur-none { --tw-backdrop-blur: ; - -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-blur-xl { --tw-backdrop-blur: blur(var(--blur-xl)); - -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-50 { --tw-backdrop-brightness: brightness(50%); - -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, ); 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-50 { --tw-backdrop-contrast: contrast(50%); - -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-\[1\.23\] { --tw-backdrop

Error: Snapshot `transition 1` mismatched - Expected + Received @@ -4,11 +4,11 @@ --transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; --transition-property-opacity: opacity; } .transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, -webkit-backdrop-filter, -webkit-backdrop-filter, backdrop-filter; + transition-property: color, background-color, border-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-\[var\(--value\)\] { @@ -22,11 +22,11 @@ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-colors { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; + transition-property: color, background-color, border-color, -webkit-text-decoration-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); transition-duration: var(--tw-duration, var(--default-transition-duration)); } .transition-opacity { ❯ src/utilities.test.ts:14370:5