Title

From 436a33dafa47aeaaae991caa7c037c3ccb62c744 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 16 Jan 2023 16:44:01 +0100 Subject: [PATCH 01/14] ensure we use `npm@7` for older versions of Node.js This is important so that we can guarantee that `workspaces` are supported which we depend on right now (just for install purposes). --- .github/workflows/nodejs.yml | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 3e69e8540db1..9dd23baf192e 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -33,6 +33,10 @@ jobs: node-version: ${{ matrix.node-version }} # cache: 'npm' + - name: Install newer version of npm on older versions of Node.js + if: matrix.node-version < 16 + run: npm install -g npm@7 + - name: Cache node_modules uses: actions/cache@v3 with: From a3deed472da498f8a52404b2e8ccbc16f0e93101 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 16 Jan 2023 16:47:56 +0100 Subject: [PATCH 02/14] tmp: trigger CI build (GitHub is doing funky things and not working right now) --- .github/workflows/nodejs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 9dd23baf192e..2258d1e356e4 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -5,7 +5,7 @@ name: Node.js CI on: push: - branches: [master] + branches: [master, 'feat/improve-ci'] pull_request: branches: [master] From cf9b2fe9c585d86b600ac267bb19dc7ce60c04f4 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 16 Jan 2023 16:53:01 +0100 Subject: [PATCH 03/14] drop Node.js 12 from Node.js CI workflow --- .github/workflows/nodejs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 2258d1e356e4..f9a0cebcebff 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -23,7 +23,7 @@ jobs: strategy: matrix: - node-version: [12, 14, 16, 18] + node-version: [14, 16, 18] steps: - uses: actions/checkout@v3 From c1fd28764e75136a81002a6ae521bb67f1a4f2fe Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 16 Jan 2023 16:57:41 +0100 Subject: [PATCH 04/14] focus on Node.js 16 for now --- .github/workflows/nodejs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index f9a0cebcebff..cbebbc6fe3e2 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -23,7 +23,7 @@ jobs: strategy: matrix: - node-version: [14, 16, 18] + node-version: [16] steps: - uses: actions/checkout@v3 From ebfdcdbba87eeef1abe881d9cc50c1ed2d492512 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 16 Jan 2023 17:03:11 +0100 Subject: [PATCH 05/14] Revert "tmp: trigger CI build (GitHub is doing funky things and not working right now)" This reverts commit a3deed472da498f8a52404b2e8ccbc16f0e93101. --- .github/workflows/nodejs.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index cbebbc6fe3e2..0a2212e2e6cb 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -5,7 +5,7 @@ name: Node.js CI on: push: - branches: [master, 'feat/improve-ci'] + branches: [master] pull_request: branches: [master] From 31e25bc4811a81e8e9e710980ea5bdc50c4d4f7a Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 25 Nov 2022 13:09:58 -0500 Subject: [PATCH 06/14] WIP --- src/corePlugins.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index 47521e5eed10..fc9e00474b98 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -23,6 +23,21 @@ import { removeAlphaVariables } from './util/removeAlphaVariables' import { flagEnabled } from './featureFlags' import { normalize } from './util/dataTypes' +// Logical properties: +// - margin +// - padding +// - inset +// - border-width +// - border-color +// - border-style? +// - border-radius +// - rounded-tl -> border-start-start -> rounded-ss / rounded-ts? +// - rounded-tr -> border-start-end -> rounded-se / rounded-te? +// - rounded-br -> border-end-end -> rounded-ee / rounded-be? +// - rounded-bl -> border-end-start -> rounded-es / rounded-bs? +// - clear +// - float + export let variantPlugins = { pseudoElementVariants: ({ addVariant }) => { addVariant('first-letter', '&::first-letter') From f4baf0c227ba8b8e3ef8c1e0ecadc11012383e13 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 23 Dec 2022 14:19:35 -0500 Subject: [PATCH 07/14] Add support for logical properties in inline direction --- src/corePlugins.js | 55 +++++++++++++++++++-------- tests/kitchen-sink.test.css | 74 ++++++++++++++++++++++++++++++++++++ tests/kitchen-sink.test.html | 7 +++- 3 files changed, 120 insertions(+), 16 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index fc9e00474b98..c6f1698e49e9 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -23,21 +23,6 @@ import { removeAlphaVariables } from './util/removeAlphaVariables' import { flagEnabled } from './featureFlags' import { normalize } from './util/dataTypes' -// Logical properties: -// - margin -// - padding -// - inset -// - border-width -// - border-color -// - border-style? -// - border-radius -// - rounded-tl -> border-start-start -> rounded-ss / rounded-ts? -// - rounded-tr -> border-start-end -> rounded-se / rounded-te? -// - rounded-br -> border-end-end -> rounded-ee / rounded-be? -// - rounded-bl -> border-end-start -> rounded-es / rounded-bs? -// - clear -// - float - export let variantPlugins = { pseudoElementVariants: ({ addVariant }) => { addVariant('first-letter', '&::first-letter') @@ -638,6 +623,8 @@ export let corePlugins = { ['inset-y', ['top', 'bottom']], ], [ + ['inset-s', ['inset-inline-start']], + ['inset-e', ['inset-inline-end']], ['top', ['top']], ['right', ['right']], ['bottom', ['bottom']], @@ -689,6 +676,8 @@ export let corePlugins = { ['my', ['margin-top', 'margin-bottom']], ], [ + ['ms', ['margin-inline-start']], + ['me', ['margin-inline-end']], ['mt', ['margin-top']], ['mr', ['margin-right']], ['mb', ['margin-bottom']], @@ -1450,12 +1439,18 @@ export let corePlugins = { borderRadius: createUtilityPlugin('borderRadius', [ ['rounded', ['border-radius']], [ + ['rounded-s', ['border-start-start-radius', 'border-end-start-radius']], + ['rounded-e', ['border-start-end-radius', 'border-end-end-radius']], ['rounded-t', ['border-top-left-radius', 'border-top-right-radius']], ['rounded-r', ['border-top-right-radius', 'border-bottom-right-radius']], ['rounded-b', ['border-bottom-right-radius', 'border-bottom-left-radius']], ['rounded-l', ['border-top-left-radius', 'border-bottom-left-radius']], ], [ + ['rounded-ss', ['border-start-start-radius']], + ['rounded-se', ['border-start-end-radius']], + ['rounded-ee', ['border-end-end-radius']], + ['rounded-es', ['border-end-start-radius']], ['rounded-tl', ['border-top-left-radius']], ['rounded-tr', ['border-top-right-radius']], ['rounded-br', ['border-bottom-right-radius']], @@ -1472,6 +1467,8 @@ export let corePlugins = { ['border-y', [['@defaults border-width', {}], 'border-top-width', 'border-bottom-width']], ], [ + ['border-s', [['@defaults border-width', {}], 'border-inline-start-width']], + ['border-e', [['@defaults border-width', {}], 'border-inline-end-width']], ['border-t', [['@defaults border-width', {}], 'border-top-width']], ['border-r', [['@defaults border-width', {}], 'border-right-width']], ['border-b', [['@defaults border-width', {}], 'border-bottom-width']], @@ -1554,6 +1551,32 @@ export let corePlugins = { matchUtilities( { + 'border-s': (value) => { + if (!corePlugins('borderOpacity')) { + return { + 'border-inline-start-color': toColorValue(value), + } + } + + return withAlphaVariable({ + color: value, + property: 'border-inline-start-color', + variable: '--tw-border-opacity', + }) + }, + 'border-e': (value) => { + if (!corePlugins('borderOpacity')) { + return { + 'border-inline-end-color': toColorValue(value), + } + } + + return withAlphaVariable({ + color: value, + property: 'border-inline-end-color', + variable: '--tw-border-opacity', + }) + }, 'border-t': (value) => { if (!corePlugins('borderOpacity')) { return { @@ -1790,6 +1813,8 @@ export let corePlugins = { ['py', ['padding-top', 'padding-bottom']], ], [ + ['ps', ['padding-inline-start']], + ['pe', ['padding-inline-end']], ['pt', ['padding-top']], ['pr', ['padding-right']], ['pb', ['padding-bottom']], diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index e1b2a1b3a174..565ece11f47d 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -276,9 +276,35 @@ div { .foo .bg-black { appearance: none; } +.inset-6 { + top: 1.5rem; + right: 1.5rem; + bottom: 1.5rem; + left: 1.5rem; +} +.inset-x-1 { + left: 0.25rem; + right: 0.25rem; +} +.inset-s-4 { + inset-inline-start: 1rem; +} +.inset-e-8 { + inset-inline-end: 2rem; +} +.mx-1 { + margin-left: 0.25rem; + margin-right: 0.25rem; +} .mt-6 { margin-top: 1.5rem; } +.ms-4 { + margin-inline-start: 1rem; +} +.me-8 { + margin-inline-end: 2rem; +} .scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5; @@ -294,6 +320,41 @@ div { .grid-cols-\[200px\2c repeat$auto-fill\2c minmax\(15\%\2c 100px$\)\2c 300px\] { grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; } +.rounded-s { + border-start-start-radius: 0.25rem; + border-end-start-radius: 0.25rem; +} +.rounded-e { + border-start-end-radius: 0.25rem; + border-end-end-radius: 0.25rem; +} +.rounded-ss { + border-start-start-radius: 0.25rem; +} +.rounded-es { + border-end-start-radius: 0.25rem; +} +.border-2 { + border-width: 2px; +} +.border-s-0 { + border-inline-start-width: 0px; +} +.border-e-4 { + border-inline-end-width: 4px; +} +.border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} +.border-s-green-500 { + --tw-border-opacity: 1; + border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity)); +} +.border-e-red-400 { + --tw-border-opacity: 1; + border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity)); +} .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -316,6 +377,19 @@ div { --tw-gradient-to: rgb(186 218 85 / 0); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); } +.px-1 { + padding-left: 0.25rem; + padding-right: 0.25rem; +} +.pt-6 { + padding-top: 1.5rem; +} +.ps-4 { + padding-inline-start: 1rem; +} +.pe-8 { + padding-inline-end: 2rem; +} .text-center { text-align: center; } diff --git a/tests/kitchen-sink.test.html b/tests/kitchen-sink.test.html index 5215db2ad388..412a5dc109b7 100644 --- a/tests/kitchen-sink.test.html +++ b/tests/kitchen-sink.test.html @@ -14,7 +14,12 @@ >

From e4100faefdb2937856c9059e7ca4506132c950a8 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 23 Dec 2022 14:41:36 -0500 Subject: [PATCH 08/14] Add scroll-margin/scroll-padding utilities --- src/corePlugins.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/corePlugins.js b/src/corePlugins.js index c6f1698e49e9..d65624919a2b 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1026,6 +1026,8 @@ export let corePlugins = { ['scroll-my', ['scroll-margin-top', 'scroll-margin-bottom']], ], [ + ['scroll-ms', ['scroll-margin-inline-start']], + ['scroll-me', ['scroll-margin-inline-end']], ['scroll-mt', ['scroll-margin-top']], ['scroll-mr', ['scroll-margin-right']], ['scroll-mb', ['scroll-margin-bottom']], @@ -1042,6 +1044,8 @@ export let corePlugins = { ['scroll-py', ['scroll-padding-top', 'scroll-padding-bottom']], ], [ + ['scroll-ps', ['scroll-padding-inline-start']], + ['scroll-pe', ['scroll-padding-inline-end']], ['scroll-pt', ['scroll-padding-top']], ['scroll-pr', ['scroll-padding-right']], ['scroll-pb', ['scroll-padding-bottom']], From e99205a6d483f540752f79d5723c3ada9eb0deb2 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 23 Dec 2022 14:41:42 -0500 Subject: [PATCH 09/14] Update CHANGELOG --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 50ee9372c17f..f4e7fac0b71a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `--watch=always` option to prevent exit when stdin closes ([#9966](https://github.com/tailwindlabs/tailwindcss/pull/9966)) - Add standalone CLI build for 64-bit Windows on ARM (`node16-win-arm64`) ([#10001](https://github.com/tailwindlabs/tailwindcss/pull/10001)) - Add `delay-0` and `duration-0` by default ([#10294](https://github.com/tailwindlabs/tailwindcss/pull/10294)) +- Add logical properties support for inline direction ([#10166](https://github.com/tailwindlabs/tailwindcss/pull/10166)) ### Fixed From e8967109dfa67c9d2d0ffb1060f34b03c38bac46 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 23 Dec 2022 21:17:29 -0500 Subject: [PATCH 10/14] Rename inset-s/e to start/end --- src/corePlugins.js | 4 ++-- tests/kitchen-sink.test.css | 4 ++-- tests/kitchen-sink.test.html | 2 +- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index d65624919a2b..71fac8a0b8d0 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -623,8 +623,8 @@ export let corePlugins = { ['inset-y', ['top', 'bottom']], ], [ - ['inset-s', ['inset-inline-start']], - ['inset-e', ['inset-inline-end']], + ['start', ['inset-inline-start']], + ['end', ['inset-inline-end']], ['top', ['top']], ['right', ['right']], ['bottom', ['bottom']], diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index 565ece11f47d..125d9067dd68 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -286,10 +286,10 @@ div { left: 0.25rem; right: 0.25rem; } -.inset-s-4 { +.start-4 { inset-inline-start: 1rem; } -.inset-e-8 { +.end-8 { inset-inline-end: 2rem; } .mx-1 { diff --git a/tests/kitchen-sink.test.html b/tests/kitchen-sink.test.html index 412a5dc109b7..042fa6f38625 100644 --- a/tests/kitchen-sink.test.html +++ b/tests/kitchen-sink.test.html @@ -16,7 +16,7 @@

From 8d935c29d4e8e488117eab4cbe66d7e601553707 Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 13 Jan 2023 15:11:44 -0500 Subject: [PATCH 11/14] Update sort order in test --- tests/kitchen-sink.test.css | 46 ++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index 125d9067dd68..a3393c9c1332 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -286,24 +286,24 @@ div { left: 0.25rem; right: 0.25rem; } -.start-4 { - inset-inline-start: 1rem; -} .end-8 { inset-inline-end: 2rem; } +.start-4 { + inset-inline-start: 1rem; +} .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } -.mt-6 { - margin-top: 1.5rem; +.me-8 { + margin-inline-end: 2rem; } .ms-4 { margin-inline-start: 1rem; } -.me-8 { - margin-inline-end: 2rem; +.mt-6 { + margin-top: 1.5rem; } .scale-50 { --tw-scale-x: 0.5; @@ -320,41 +320,41 @@ div { .grid-cols-\[200px\2c repeat$auto-fill\2c minmax\(15\%\2c 100px$\)\2c 300px\] { grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; } -.rounded-s { - border-start-start-radius: 0.25rem; - border-end-start-radius: 0.25rem; -} .rounded-e { border-start-end-radius: 0.25rem; border-end-end-radius: 0.25rem; } -.rounded-ss { +.rounded-s { border-start-start-radius: 0.25rem; + border-end-start-radius: 0.25rem; } .rounded-es { border-end-start-radius: 0.25rem; } +.rounded-ss { + border-start-start-radius: 0.25rem; +} .border-2 { border-width: 2px; } -.border-s-0 { - border-inline-start-width: 0px; -} .border-e-4 { border-inline-end-width: 4px; } +.border-s-0 { + border-inline-start-width: 0px; +} .border-black { --tw-border-opacity: 1; border-color: rgb(0 0 0 / var(--tw-border-opacity)); } -.border-s-green-500 { - --tw-border-opacity: 1; - border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity)); -} .border-e-red-400 { --tw-border-opacity: 1; border-inline-end-color: rgb(248 113 113 / var(--tw-border-opacity)); } +.border-s-green-500 { + --tw-border-opacity: 1; + border-inline-start-color: rgb(34 197 94 / var(--tw-border-opacity)); +} .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); @@ -381,14 +381,14 @@ div { padding-left: 0.25rem; padding-right: 0.25rem; } -.pt-6 { - padding-top: 1.5rem; +.pe-8 { + padding-inline-end: 2rem; } .ps-4 { padding-inline-start: 1rem; } -.pe-8 { - padding-inline-end: 2rem; +.pt-6 { + padding-top: 1.5rem; } .text-center { text-align: center; From 07377f7fde7d3ee324283d66c4f5905f0792a58a Mon Sep 17 00:00:00 2001 From: Adam Wathan <4323180+adamwathan@users.noreply.github.com> Date: Fri, 13 Jan 2023 15:38:51 -0500 Subject: [PATCH 12/14] Use logical properties for space/divide in Oxide --- src/corePlugins.js | 22 ++ tests/kitchen-sink.test.css | 6 +- tests/kitchen-sink.test.js | 2 +- tests/oxide.test.css | 579 ----------------------------------- tests/oxide.test.html | 77 ----- tests/oxide.test.js | 205 +------------ tests/plugins/divide.test.js | 31 +- 7 files changed, 64 insertions(+), 858 deletions(-) delete mode 100644 tests/oxide.test.css delete mode 100644 tests/oxide.test.html diff --git a/src/corePlugins.js b/src/corePlugins.js index 71fac8a0b8d0..0a6c49db27c1 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,6 +1,7 @@ import fs from 'fs' import * as path from 'path' import postcss from 'postcss' +import { env } from './lib/sharedState' import createUtilityPlugin from './util/createUtilityPlugin' import buildMediaQuery from './util/buildMediaQuery' import escapeClassName from './util/escapeClassName' @@ -1219,6 +1220,16 @@ export let corePlugins = { 'space-x': (value) => { value = value === '0' ? '0px' : value + if (env.OXIDE) { + return { + '& > :not([hidden]) ~ :not([hidden])': { + '--tw-space-x-reverse': '0', + 'margin-inline-end': `calc(${value} * var(--tw-space-x-reverse))`, + 'margin-inline-start': `calc(${value} * calc(1 - var(--tw-space-x-reverse)))`, + }, + } + } + return { '& > :not([hidden]) ~ :not([hidden])': { '--tw-space-x-reverse': '0', @@ -1254,6 +1265,17 @@ export let corePlugins = { 'divide-x': (value) => { value = value === '0' ? '0px' : value + if (env.OXIDE) { + return { + '& > :not([hidden]) ~ :not([hidden])': { + '@defaults border-width': {}, + '--tw-divide-x-reverse': '0', + 'border-inline-end-width': `calc(${value} * var(--tw-divide-x-reverse))`, + 'border-inline-start-width': `calc(${value} * calc(1 - var(--tw-divide-x-reverse)))`, + }, + } + } + return { '& > :not([hidden]) ~ :not([hidden])': { '@defaults border-width': {}, diff --git a/tests/kitchen-sink.test.css b/tests/kitchen-sink.test.css index a3393c9c1332..9f5ad33cf2ae 100644 --- a/tests/kitchen-sink.test.css +++ b/tests/kitchen-sink.test.css @@ -95,9 +95,9 @@ font-weight: 400; } .list > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + --tw-space-y-reverse: 0; + margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .nested { .example { diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 9314475b20ee..ca5a5278d332 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -141,7 +141,7 @@ test.each([[true], [false]])('it works (using Rust: %p)', (useOxide) => { @apply font-bold group-hover:font-normal; } .list { - @apply space-x-4; + @apply space-y-4; } .nested { .example { diff --git a/tests/oxide.test.css b/tests/oxide.test.css deleted file mode 100644 index e1b2a1b3a174..000000000000 --- a/tests/oxide.test.css +++ /dev/null @@ -1,579 +0,0 @@ -.theme-test { - font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, - 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol', 'Noto Color Emoji'; - color: #3b82f6; -} -@media (min-width: 1024px) { - .screen-test { - color: purple; - } -} -.apply-1 { - margin-top: 1.5rem; -} -.apply-2 { - margin-top: 1.5rem; -} -.apply-test { - margin-top: 1.5rem; - --tw-bg-opacity: 1; - background-color: rgb(236 72 153 / var(--tw-bg-opacity)); -} -.apply-test:hover { - font-weight: 700; -} -.apply-test:hover:focus { - font-weight: 700; -} -@media (min-width: 640px) { - .apply-test { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); - } - .apply-test:nth-child(even):focus { - --tw-bg-opacity: 1; - background-color: rgb(251 207 232 / var(--tw-bg-opacity)); - } -} -.apply-components { - width: 100%; -} -@media (min-width: 640px) { - .apply-components { - max-width: 640px; - } -} -@media (min-width: 768px) { - .apply-components { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .apply-components { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - .apply-components { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - .apply-components { - max-width: 1536px; - } -} -.apply-components { - margin-left: auto; - margin-right: auto; -} -.drop-empty-rules:hover { - font-weight: 700; -} -.group:hover .apply-group { - font-weight: 700; -} -.dark .apply-dark-mode { - font-weight: 700; -} -.apply-with-existing:hover { - font-weight: 400; -} -@media (min-width: 640px) { - .apply-with-existing:hover { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); - } -} -.multiple, -.selectors { - font-weight: 700; -} -.group:hover .multiple, -.group:hover .selectors { - font-weight: 400; -} -.list > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(1rem * var(--tw-space-x-reverse)); - margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); -} -.nested { - .example { - font-weight: 700; - } - .example:hover { - font-weight: 400; - } -} -.apply-order-a { - margin: 1.25rem; - margin-top: 1.5rem; -} -.apply-order-b { - margin: 1.25rem; - margin-top: 1.5rem; -} -.dark .group:hover .apply-dark-group-example-a { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); -} -@media (min-width: 640px) { - @media (prefers-reduced-motion: no-preference) { - .group:active .crazy-example:focus { - opacity: 0.1; - } - } -} -h1 { - font-size: 1.5rem; - font-weight: 700; -} -h1:first-child { - margin-top: 0px; -} -div { - background: #654321; -} -*, -::before, -::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; -} -.container { - width: 100%; -} -@media (min-width: 640px) { - .container { - max-width: 640px; - } -} -@media (min-width: 768px) { - .container { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .container { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - .container { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - .container { - max-width: 1536px; - } -} -.test-apply-font-variant { - --tw-ordinal: ordinal; - --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); -} -.custom-component { - background: #123456; -} -*, -::before, -::after, -::backdrop { - padding: 5px; -} -.foo .bg-black { - appearance: none; -} -.mt-6 { - margin-top: 1.5rem; -} -.scale-50 { - --tw-scale-x: 0.5; - --tw-scale-y: 0.5; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); -} -.transform { - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); -} -.grid-cols-\[200px\2c repeat$auto-fill\2c minmax\(15\%\2c 100px$\)\2c 300px\] { - grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; -} -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); -} -.bg-green-500 { - --tw-bg-opacity: 1; - background-color: rgb(34 197 94 / var(--tw-bg-opacity)); -} -.bg-opacity-50 { - --tw-bg-opacity: 0.5; -} -.bg-gradient-to-r { - background-image: linear-gradient(to right, var(--tw-gradient-stops)); -} -.bg-hero--home-1 { - background-image: url('/images/homepage-1.jpg'); -} -.from-foo { - --tw-gradient-from: #bada55; - --tw-gradient-to: rgb(186 218 85 / 0); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); -} -.text-center { - text-align: center; -} -.font-medium { - font-weight: 500; -} -.shadow-md { - --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); -} -.shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); -} -.magic-none { - magic: none; -} -.magic-tons { - magic: tons; -} -.custom-util { - background: #abcdef; -} -*, -::before, -::after, -::backdrop { - margin: 10px; -} -.first\:pt-0:first-child { - padding-top: 0px; -} -.hover\:container:hover { - width: 100%; -} -@media (min-width: 640px) { - .hover\:container:hover { - max-width: 640px; - } -} -@media (min-width: 768px) { - .hover\:container:hover { - max-width: 768px; - } -} -@media (min-width: 1024px) { - .hover\:container:hover { - max-width: 1024px; - } -} -@media (min-width: 1280px) { - .hover\:container:hover { - max-width: 1280px; - } -} -@media (min-width: 1536px) { - .hover\:container:hover { - max-width: 1536px; - } -} -.hover\:scale-75:hover { - --tw-scale-x: 0.75; - --tw-scale-y: 0.75; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); -} -.hover\:font-bold:hover { - font-weight: 700; -} -.hover\:shadow-lg:hover { - --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); - --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), - 0 4px 6px -4px var(--tw-shadow-color); - box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), - var(--tw-shadow); -} -.hover\:custom-util:hover { - background: #abcdef; -} -.focus\:font-normal:focus { - font-weight: 400; -} -.focus\:ring-2:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) - var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) - var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} -.focus\:ring-blue-500:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); -} -.focus\:hover\:font-light:hover:focus { - font-weight: 300; -} -.disabled\:font-bold:disabled { - font-weight: 700; -} -.group:hover .group-hover\:opacity-100 { - opacity: 1; -} -.group:hover .group-hover\:custom-util { - background: #abcdef; -} -.group:active .group-active\:opacity-10 { - opacity: 0.1; -} -.foo\:custom-util { - background: #abcdef !important; -} -.foo\:hover\:custom-util:hover { - background: #abcdef !important; -} -@media (prefers-reduced-motion: no-preference) { - .motion-safe\:transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - .motion-safe\:custom-util { - background: #abcdef; - } -} -@media (prefers-reduced-motion: reduce) { - .motion-reduce\:transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, - opacity, box-shadow, transform, filter, backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } -} -.dark .dark\:custom-util { - background: #abcdef; -} -@media (min-width: 640px) { - .sm\:container { - width: 100%; - } - @media (min-width: 640px) { - .sm\:container { - max-width: 640px; - } - } - @media (min-width: 768px) { - .sm\:container { - max-width: 768px; - } - } - @media (min-width: 1024px) { - .sm\:container { - max-width: 1024px; - } - } - @media (min-width: 1280px) { - .sm\:container { - max-width: 1280px; - } - } - @media (min-width: 1536px) { - .sm\:container { - max-width: 1536px; - } - } - .sm\:text-center { - text-align: center; - } - .sm\:tabular-nums { - --tw-numeric-spacing: tabular-nums; - font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) - var(--tw-numeric-spacing) var(--tw-numeric-fraction); - } - .sm\:custom-util { - background: #abcdef; - } - @media (prefers-reduced-motion: no-preference) { - .group:active .sm\:motion-safe\:group-active\:focus\:opacity-10:focus { - opacity: 0.1; - } - } -} -@media (min-width: 768px) { - .md\:container { - width: 100%; - } - @media (min-width: 640px) { - .md\:container { - max-width: 640px; - } - } - @media (min-width: 768px) { - .md\:container { - max-width: 768px; - } - } - @media (min-width: 1024px) { - .md\:container { - max-width: 1024px; - } - } - @media (min-width: 1280px) { - .md\:container { - max-width: 1280px; - } - } - @media (min-width: 1536px) { - .md\:container { - max-width: 1536px; - } - } - .md\:text-center { - text-align: center; - } - .md\:opacity-50 { - opacity: 0.5; - } - .md\:shadow-sm { - --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); - 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: rgb(59 130 246 / 0.3); - } - .md\:hover\:opacity-20:hover { - opacity: 0.2; - } - @media (prefers-reduced-motion: no-preference) { - .md\:motion-safe\:hover\:transition:hover { - transition-property: color, background-color, border-color, text-decoration-color, fill, - stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - .dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active { - background: #abcdef !important; - } - } - @media (min-width: 640px) { - .md\:sm\:text-center { - text-align: center; - } - } -} -@media (min-width: 1280px) and (max-width: 1535px) { - .range\:text-right { - text-align: right; - } -} -@media (min-width: 640px) and (max-width: 767px), (max-width: 868px) { - .multi\:text-left { - text-align: left; - } -} diff --git a/tests/oxide.test.html b/tests/oxide.test.html deleted file mode 100644 index 5215db2ad388..000000000000 --- a/tests/oxide.test.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - Title - - - -

- - - - diff --git a/tests/oxide.test.js b/tests/oxide.test.js index 75fa4b2c9467..9e96c225b655 100644 --- a/tests/oxide.test.js +++ b/tests/oxide.test.js @@ -1,202 +1,29 @@ -import fs from 'fs' -import path from 'path' - +import { run, html, css, defaults } from './util/run' import { env } from '../src/lib/sharedState' -import { run, css } from './util/run' + +beforeEach(() => { + env.OXIDE = true +}) afterEach(() => { env.OXIDE = false }) -test.each([[true], [false]])('it works (using Rust: %p)', (useOxide) => { - env.OXIDE = useOxide - +test('space-x uses logical properties', () => { let config = { - darkMode: 'class', - content: [path.resolve(__dirname, './oxide.test.html')], + content: [{ raw: html`

` }], corePlugins: { preflight: false }, - theme: { - extend: { - screens: { - range: { min: '1280px', max: '1535px' }, - multi: [{ min: '640px', max: '767px' }, { max: '868px' }], - }, - gradientColorStops: { - foo: '#bada55', - }, - backgroundImage: { - 'hero--home-1': "url('/images/homepage-1.jpg')", - }, - }, - }, - plugins: [ - function ({ addVariant }) { - addVariant( - 'foo', - ({ container }) => { - container.walkRules((rule) => { - rule.selector = `.foo\\:${rule.selector.slice(1)}` - rule.walkDecls((decl) => { - decl.important = true - }) - }) - }, - { before: 'sm' } - ) - }, - function ({ addUtilities, addBase, theme }) { - addBase({ - h1: { - fontSize: theme('fontSize.2xl'), - fontWeight: theme('fontWeight.bold'), - '&:first-child': { - marginTop: '0px', - }, - }, - }) - addUtilities( - { - '.magic-none': { - magic: 'none', - }, - '.magic-tons': { - magic: 'tons', - }, - }, - ['responsive', 'hover'] - ) - }, - ], } - let input = css` - @layer utilities { - .custom-util { - background: #abcdef; - } - *, - ::before, - ::after, - ::backdrop { - margin: 10px; - } - } - @layer components { - .test-apply-font-variant { - @apply ordinal tabular-nums; - } - .custom-component { - background: #123456; - } - *, - ::before, - ::after, - ::backdrop { - padding: 5px; - } - .foo .bg-black { - appearance: none; - } - } - @layer base { - div { - background: #654321; - } - } - .theme-test { - font-family: theme('fontFamily.sans'); - color: theme('colors.blue.500'); - } - @screen lg { - .screen-test { - color: purple; - } - } - .apply-1 { - @apply mt-6; - } - .apply-2 { - @apply mt-6; - } - .apply-test { - @apply mt-6 bg-pink-500 hover:font-bold focus:hover:font-bold sm:bg-green-500 sm:focus:even:bg-pink-200; - } - .apply-components { - @apply container mx-auto; - } - .drop-empty-rules { - @apply hover:font-bold; - } - .apply-group { - @apply group-hover:font-bold; - } - .apply-dark-mode { - @apply dark:font-bold; - } - .apply-with-existing:hover { - @apply font-normal sm:bg-green-500; - } - .multiple, - .selectors { - @apply font-bold group-hover:font-normal; - } - .list { - @apply space-x-4; - } - .nested { - .example { - @apply font-bold hover:font-normal; - } - } - .apply-order-a { - @apply m-5 mt-6; - } - .apply-order-b { - @apply m-5 mt-6; - } - .apply-dark-group-example-a { - @apply dark:group-hover:bg-green-500; - } - .crazy-example { - @apply sm:motion-safe:group-active:focus:opacity-10; - } - @tailwind base; - @tailwind components; - @tailwind utilities; - ` - - return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './oxide.test.css') - let expected = fs.readFileSync(expectedPath, 'utf8') + return run('@tailwind base; @tailwind utilities;', config).then((result) => { + expect(result.css).toMatchCss(css` + ${defaults} - expect(result.css).toMatchFormattedCss(expected) + .space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + } + `) }) }) - -xit.each([[true], [false]])( - 'should use the transformer for svelte files (using Rust: %p)', - (useOxide) => { - env.OXIDE = useOxide - - let config = { - darkMode: 'class', - content: [path.resolve(__dirname, './oxide.test.svelte')], - corePlugins: { preflight: false }, - theme: {}, - plugins: [], - } - - let input = css` - @tailwind base; - @tailwind components; - @tailwind utilities; - ` - - return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './oxide-svelte.test.css') - let expected = fs.readFileSync(expectedPath, 'utf8') - - expect(result.css).toMatchFormattedCss(expected) - }) - } -) diff --git a/tests/plugins/divide.test.js b/tests/plugins/divide.test.js index e50ea4e4fc33..0fce96e9bec4 100644 --- a/tests/plugins/divide.test.js +++ b/tests/plugins/divide.test.js @@ -1,4 +1,5 @@ import { run, html, css, defaults } from '../util/run' +import { env } from '../../src/lib/sharedState' it('should add the divide styles for divide-y and a default border color', () => { let config = { @@ -25,16 +26,28 @@ it('should add the divide styles for divide-x and a default border color', () => corePlugins: { preflight: false }, } - return run('@tailwind base; @tailwind utilities;', config).then((result) => { - expect(result.css).toMatchCss(css` - ${defaults} + let expected = env.OXIDE + ? css` + ${defaults} + + .divide-x > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(1px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); + } + ` + : css` + ${defaults} + + .divide-x > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-right-width: calc(1px * var(--tw-divide-x-reverse)); + border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); + } + ` - .divide-x > :not([hidden]) ~ :not([hidden]) { - --tw-divide-x-reverse: 0; - border-right-width: calc(1px * var(--tw-divide-x-reverse)); - border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); - } - `) + return run('@tailwind base; @tailwind utilities;', config).then((result) => { + expect(result.css).toMatchCss(expected) }) }) From 45390f022e1bf04957e7754e3530f50d08f8c688 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 16 Jan 2023 18:48:50 +0100 Subject: [PATCH 13/14] run non-oxide and OXIDE tests + fix oxide version tests --- package.json | 2 +- tests/any-type.test.js | 1723 +++++++++++++++++-------- tests/arbitrary-values.oxide.test.css | 1141 ++++++++++++++++ tests/arbitrary-values.test.js | 4 +- tests/basic-usage.oxide.test.css | 1090 ++++++++++++++++ tests/basic-usage.test.js | 4 +- tests/raw-content.oxide.test.css | 778 +++++++++++ tests/raw-content.test.js | 5 +- tests/variants.oxide.test.css | 954 ++++++++++++++ tests/variants.test.js | 5 +- 10 files changed, 5128 insertions(+), 578 deletions(-) create mode 100644 tests/arbitrary-values.oxide.test.css create mode 100644 tests/basic-usage.oxide.test.css create mode 100644 tests/raw-content.oxide.test.css create mode 100644 tests/variants.oxide.test.css diff --git a/package.json b/package.json index b6b0bae0dcb3..9c2b99111ed3 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "rebuild-fixtures": "npm run build && node -r @swc/register scripts/rebuildFixtures.js", "style": "eslint .", "pretest": "npm run generate", - "test": "jest", + "test": "jest && OXIDE=1 jest", "test:integrations": "npm run test --prefix ./integrations", "install:integrations": "node scripts/install-integrations.js", "generate:plugin-list": "node -r @swc/register scripts/create-plugin-list.js", diff --git a/tests/any-type.test.js b/tests/any-type.test.js index ebfefd3c8b20..4f73edc2d838 100644 --- a/tests/any-type.test.js +++ b/tests/any-type.test.js @@ -1,4 +1,5 @@ import { run, html, css } from './util/run' +import { env } from '../src/lib/sharedState' // Hi there, so you are debugging this test because something failed... right? Well we can look into // the future and guessed that this would happen. So basically it means that we (it was probably @@ -184,578 +185,1154 @@ test('any types are set on correct plugins', () => { ` return run(input, config).then((result) => { - expect(result.css).toMatchFormattedCss(css` - .inset-\[var$--any-value$\] { - top: var(--any-value); - right: var(--any-value); - bottom: var(--any-value); - left: var(--any-value); - } - .inset-x-\[var$--any-value$\] { - left: var(--any-value); - right: var(--any-value); - } - .inset-y-\[var$--any-value$\] { - top: var(--any-value); - bottom: var(--any-value); - } - .bottom-\[var$--any-value$\] { - bottom: var(--any-value); - } - .left-\[var$--any-value$\] { - left: var(--any-value); - } - .right-\[var$--any-value$\] { - right: var(--any-value); - } - .top-\[var$--any-value$\] { - top: var(--any-value); - } - .z-\[var$--any-value$\] { - z-index: var(--any-value); - } - .order-\[var$--any-value$\] { - order: var(--any-value); - } - .col-\[var$--any-value$\] { - grid-column: var(--any-value); - } - .col-start-\[var$--any-value$\] { - grid-column-start: var(--any-value); - } - .col-end-\[var$--any-value$\] { - grid-column-end: var(--any-value); - } - .row-\[var$--any-value$\] { - grid-row: var(--any-value); - } - .row-start-\[var$--any-value$\] { - grid-row-start: var(--any-value); - } - .row-end-\[var$--any-value$\] { - grid-row-end: var(--any-value); - } - .m-\[var$--any-value$\] { - margin: var(--any-value); - } - .mx-\[var$--any-value$\] { - margin-left: var(--any-value); - margin-right: var(--any-value); - } - .my-\[var$--any-value$\] { - margin-top: var(--any-value); - margin-bottom: var(--any-value); - } - .mb-\[var$--any-value$\] { - margin-bottom: var(--any-value); - } - .ml-\[var$--any-value$\] { - margin-left: var(--any-value); - } - .mr-\[var$--any-value$\] { - margin-right: var(--any-value); - } - .mt-\[var$--any-value$\] { - margin-top: var(--any-value); - } - .aspect-\[var$--any-value$\] { - aspect-ratio: var(--any-value); - } - .h-\[var$--any-value$\] { - height: var(--any-value); - } - .max-h-\[var$--any-value$\] { - max-height: var(--any-value); - } - .min-h-\[var$--any-value$\] { - min-height: var(--any-value); - } - .w-\[var$--any-value$\] { - width: var(--any-value); - } - .min-w-\[var$--any-value$\] { - min-width: var(--any-value); - } - .max-w-\[var$--any-value$\] { - max-width: var(--any-value); - } - .flex-\[var$--any-value$\] { - flex: var(--any-value); - } - .flex-shrink-\[var$--any-value$\] { - flex-shrink: var(--any-value); - } - .shrink-\[var$--any-value$\] { - flex-shrink: var(--any-value); - } - .flex-grow-\[var$--any-value$\] { - flex-grow: var(--any-value); - } - .grow-\[var$--any-value$\] { - flex-grow: var(--any-value); - } - .basis-\[var$--any-value$\] { - flex-basis: var(--any-value); - } - .border-spacing-\[var$--any-value$\] { - --tw-border-spacing-x: var(--any-value); - --tw-border-spacing-y: var(--any-value); - border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); - } - .border-spacing-x-\[var$--any-value$\] { - --tw-border-spacing-x: var(--any-value); - border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); - } - .border-spacing-y-\[var$--any-value$\] { - --tw-border-spacing-y: var(--any-value); - border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); - } - .origin-\[var$--any-value$\] { - transform-origin: var(--any-value); - } - .translate-x-\[var$--any-value$\] { - --tw-translate-x: var(--any-value); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .translate-y-\[var$--any-value$\] { - --tw-translate-y: var(--any-value); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .rotate-\[var$--any-value$\] { - --tw-rotate: var(--any-value); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .scale-\[var$--any-value$\] { - --tw-scale-x: var(--any-value); - --tw-scale-y: var(--any-value); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .scale-x-\[var$--any-value$\] { - --tw-scale-x: var(--any-value); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .scale-y-\[var$--any-value$\] { - --tw-scale-y: var(--any-value); - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) - skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) - scaleY(var(--tw-scale-y)); - } - .animate-\[var$--any-value$\] { - animation: var(--any-value); - } - .cursor-\[var$--any-value$\] { - cursor: var(--any-value); - } - .scroll-m-\[var$--any-value$\] { - scroll-margin: var(--any-value); - } - .scroll-mx-\[var$--any-value$\] { - scroll-margin-left: var(--any-value); - scroll-margin-right: var(--any-value); - } - .scroll-my-\[var$--any-value$\] { - scroll-margin-top: var(--any-value); - scroll-margin-bottom: var(--any-value); - } - .scroll-mb-\[var$--any-value$\] { - scroll-margin-bottom: var(--any-value); - } - .scroll-ml-\[var$--any-value$\] { - scroll-margin-left: var(--any-value); - } - .scroll-mr-\[var$--any-value$\] { - scroll-margin-right: var(--any-value); - } - .scroll-mt-\[var$--any-value$\] { - scroll-margin-top: var(--any-value); - } - .scroll-p-\[var$--any-value$\] { - scroll-padding: var(--any-value); - } - .scroll-px-\[var$--any-value$\] { - scroll-padding-left: var(--any-value); - scroll-padding-right: var(--any-value); - } - .scroll-py-\[var$--any-value$\] { - scroll-padding-top: var(--any-value); - scroll-padding-bottom: var(--any-value); - } - .scroll-pb-\[var$--any-value$\] { - scroll-padding-bottom: var(--any-value); - } - .scroll-pl-\[var$--any-value$\] { - scroll-padding-left: var(--any-value); - } - .scroll-pr-\[var$--any-value$\] { - scroll-padding-right: var(--any-value); - } - .scroll-pt-\[var$--any-value$\] { - scroll-padding-top: var(--any-value); - } - .list-\[var$--any-value$\] { - list-style-type: var(--any-value); - } - .columns-\[var$--any-value$\] { - columns: var(--any-value); - } - .auto-cols-\[var$--any-value$\] { - grid-auto-columns: var(--any-value); - } - .auto-rows-\[var$--any-value$\] { - grid-auto-rows: var(--any-value); - } - .grid-cols-\[var$--any-value$\] { - grid-template-columns: var(--any-value); - } - .grid-rows-\[var$--any-value$\] { - grid-template-rows: var(--any-value); - } - .gap-\[var$--any-value$\] { - gap: var(--any-value); - } - .gap-x-\[var$--any-value$\] { - column-gap: var(--any-value); - } - .gap-y-\[var$--any-value$\] { - row-gap: var(--any-value); - } - .space-x-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { - --tw-space-x-reverse: 0; - margin-right: calc(var(--any-value) * var(--tw-space-x-reverse)); - margin-left: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse))); - } - .space-y-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { - --tw-space-y-reverse: 0; - margin-top: calc(var(--any-value) * calc(1 - var(--tw-space-y-reverse))); - margin-bottom: calc(var(--any-value) * var(--tw-space-y-reverse)); - } - .divide-y-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { - --tw-divide-y-reverse: 0; - border-top-width: calc(var(--any-value) * calc(1 - var(--tw-divide-y-reverse))); - border-bottom-width: calc(var(--any-value) * var(--tw-divide-y-reverse)); - } - .divide-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { - border-color: var(--any-value); - } - .divide-opacity-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { - --tw-divide-opacity: var(--any-value); - } - .rounded-\[var$--any-value$\] { - border-radius: var(--any-value); - } - .rounded-b-\[var$--any-value$\] { - border-bottom-right-radius: var(--any-value); - border-bottom-left-radius: var(--any-value); - } - .rounded-l-\[var$--any-value$\] { - border-top-left-radius: var(--any-value); - border-bottom-left-radius: var(--any-value); - } - .rounded-r-\[var$--any-value$\] { - border-top-right-radius: var(--any-value); - border-bottom-right-radius: var(--any-value); - } - .rounded-t-\[var$--any-value$\] { - border-top-left-radius: var(--any-value); - border-top-right-radius: var(--any-value); - } - .rounded-bl-\[var$--any-value$\] { - border-bottom-left-radius: var(--any-value); - } - .rounded-br-\[var$--any-value$\] { - border-bottom-right-radius: var(--any-value); - } - .rounded-tl-\[var$--any-value$\] { - border-top-left-radius: var(--any-value); - } - .rounded-tr-\[var$--any-value$\] { - border-top-right-radius: var(--any-value); - } - .border-\[var$--any-value$\] { - border-color: var(--any-value); - } - .border-x-\[var$--any-value$\] { - border-left-color: var(--any-value); - border-right-color: var(--any-value); - } - .border-y-\[var$--any-value$\] { - border-top-color: var(--any-value); - border-bottom-color: var(--any-value); - } - .border-b-\[var$--any-value$\] { - border-bottom-color: var(--any-value); - } - .border-l-\[var$--any-value$\] { - border-left-color: var(--any-value); - } - .border-r-\[var$--any-value$\] { - border-right-color: var(--any-value); - } - .border-t-\[var$--any-value$\] { - border-top-color: var(--any-value); - } - .border-opacity-\[var$--any-value$\] { - --tw-border-opacity: var(--any-value); - } - .bg-\[var$--any-value$\] { - background-color: var(--any-value); - } - .bg-opacity-\[var$--any-value$\] { - --tw-bg-opacity: var(--any-value); - } - .from-\[var$--any-value$\] { - --tw-gradient-from: var(--any-value); - --tw-gradient-to: rgb(255 255 255 / 0); - --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); - } - .via-\[var$--any-value$\] { - --tw-gradient-to: rgb(255 255 255 / 0); - --tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to); - } - .to-\[var$--any-value$\] { - --tw-gradient-to: var(--any-value); - } - .fill-\[var$--any-value$\] { - fill: var(--any-value); - } - .stroke-\[var$--any-value$\] { - stroke: var(--any-value); - } - .object-\[var$--any-value$\] { - object-position: var(--any-value); - } - .p-\[var$--any-value$\] { - padding: var(--any-value); - } - .px-\[var$--any-value$\] { - padding-left: var(--any-value); - padding-right: var(--any-value); - } - .py-\[var$--any-value$\] { - padding-top: var(--any-value); - padding-bottom: var(--any-value); - } - .pb-\[var$--any-value$\] { - padding-bottom: var(--any-value); - } - .pl-\[var$--any-value$\] { - padding-left: var(--any-value); - } - .pr-\[var$--any-value$\] { - padding-right: var(--any-value); - } - .pt-\[var$--any-value$\] { - padding-top: var(--any-value); - } - .indent-\[var$--any-value$\] { - text-indent: var(--any-value); - } - .align-\[var$--any-value$\] { - vertical-align: var(--any-value); - } - .font-\[var$--any-value$\] { - font-weight: var(--any-value); - } - .leading-\[var$--any-value$\] { - line-height: var(--any-value); - } - .tracking-\[var$--any-value$\] { - letter-spacing: var(--any-value); - } - .text-\[var$--any-value$\] { - color: var(--any-value); - } - .text-opacity-\[var$--any-value$\] { - --tw-text-opacity: var(--any-value); - } - .decoration-\[var$--any-value$\] { - text-decoration-color: var(--any-value); - } - .underline-offset-\[var$--any-value$\] { - text-underline-offset: var(--any-value); - } - .placeholder-\[var$--any-value$\]::placeholder { - color: var(--any-value); - } - .placeholder-opacity-\[var$--any-value$\]::placeholder { - --tw-placeholder-opacity: var(--any-value); - } - .caret-\[var$--any-value$\] { - caret-color: var(--any-value); - } - .accent-\[var$--any-value$\] { - accent-color: var(--any-value); - } - .opacity-\[var$--any-value$\] { - opacity: var(--any-value); - } - .shadow-\[var$--any-value$\] { - --tw-shadow-color: var(--any-value); - --tw-shadow: var(--tw-shadow-colored); - } - .outline-offset-\[var$--any-value$\] { - outline-offset: var(--any-value); - } - .outline-\[var$--any-value$\] { - outline-color: var(--any-value); - } - .ring-\[var$--any-value$\] { - --tw-ring-color: var(--any-value); - } - .ring-opacity-\[var$--any-value$\] { - --tw-ring-opacity: var(--any-value); - } - .ring-offset-\[var$--any-value$\] { - --tw-ring-offset-color: var(--any-value); - } - .blur-\[var$--any-value$\] { - --tw-blur: blur(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .brightness-\[var$--any-value$\] { - --tw-brightness: brightness(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .contrast-\[var$--any-value$\] { - --tw-contrast: contrast(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .drop-shadow-\[var$--any-value$\] { - --tw-drop-shadow: drop-shadow(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .grayscale-\[var$--any-value$\] { - --tw-grayscale: grayscale(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .hue-rotate-\[var$--any-value$\] { - --tw-hue-rotate: hue-rotate(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .invert-\[var$--any-value$\] { - --tw-invert: invert(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .saturate-\[var$--any-value$\] { - --tw-saturate: saturate(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .sepia-\[var$--any-value$\] { - --tw-sepia: sepia(var(--any-value)); - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) - var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) - var(--tw-drop-shadow); - } - .backdrop-blur-\[var$--any-value$\] { - --tw-backdrop-blur: blur(var(--any-value)); - 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-\[var$--any-value$\] { - --tw-backdrop-brightness: brightness(var(--any-value)); - 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-\[var$--any-value$\] { - --tw-backdrop-contrast: contrast(var(--any-value)); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) - var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) - var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) - var(--tw-backdrop-sepia); - } - .backdrop-grayscale-\[var$--any-value$\] { - --tw-backdrop-grayscale: grayscale(var(--any-value)); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) - var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) - var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) - var(--tw-backdrop-sepia); - } - .backdrop-hue-rotate-\[var$--any-value$\] { - --tw-backdrop-hue-rotate: hue-rotate(var(--any-value)); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) - var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) - var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) - var(--tw-backdrop-sepia); - } - .backdrop-invert-\[var$--any-value$\] { - --tw-backdrop-invert: invert(var(--any-value)); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) - var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) - var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) - var(--tw-backdrop-sepia); - } - .backdrop-opacity-\[var$--any-value$\] { - --tw-backdrop-opacity: opacity(var(--any-value)); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) - var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) - var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) - var(--tw-backdrop-sepia); - } - .backdrop-saturate-\[var$--any-value$\] { - --tw-backdrop-saturate: saturate(var(--any-value)); - backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) - var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) - var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) - var(--tw-backdrop-sepia); - } - .backdrop-sepia-\[var$--any-value$\] { - --tw-backdrop-sepia: sepia(var(--any-value)); - 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); - } - .transition-\[var$--any-value$\] { - transition-property: var(--any-value); - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; - } - .delay-\[var$--any-value$\] { - transition-delay: var(--any-value); - } - .duration-\[var$--any-value$\] { - transition-duration: var(--any-value); - } - .ease-\[var$--any-value$\] { - transition-timing-function: var(--any-value); - } - .will-change-\[var$--any-value$\] { - will-change: var(--any-value); - } - .content-\[var$--any-value$\] { - --tw-content: var(--any-value); - content: var(--tw-content); - } - `) + expect(result.css).toMatchFormattedCss( + env.OXIDE + ? css` + .inset-\[var$--any-value$\] { + top: var(--any-value); + right: var(--any-value); + bottom: var(--any-value); + left: var(--any-value); + } + .inset-x-\[var$--any-value$\] { + left: var(--any-value); + right: var(--any-value); + } + .inset-y-\[var$--any-value$\] { + top: var(--any-value); + bottom: var(--any-value); + } + .bottom-\[var$--any-value$\] { + bottom: var(--any-value); + } + .left-\[var$--any-value$\] { + left: var(--any-value); + } + .right-\[var$--any-value$\] { + right: var(--any-value); + } + .top-\[var$--any-value$\] { + top: var(--any-value); + } + .z-\[var$--any-value$\] { + z-index: var(--any-value); + } + .order-\[var$--any-value$\] { + order: var(--any-value); + } + .col-\[var$--any-value$\] { + grid-column: var(--any-value); + } + .col-start-\[var$--any-value$\] { + grid-column-start: var(--any-value); + } + .col-end-\[var$--any-value$\] { + grid-column-end: var(--any-value); + } + .row-\[var$--any-value$\] { + grid-row: var(--any-value); + } + .row-start-\[var$--any-value$\] { + grid-row-start: var(--any-value); + } + .row-end-\[var$--any-value$\] { + grid-row-end: var(--any-value); + } + .m-\[var$--any-value$\] { + margin: var(--any-value); + } + .mx-\[var$--any-value$\] { + margin-left: var(--any-value); + margin-right: var(--any-value); + } + .my-\[var$--any-value$\] { + margin-top: var(--any-value); + margin-bottom: var(--any-value); + } + .mb-\[var$--any-value$\] { + margin-bottom: var(--any-value); + } + .ml-\[var$--any-value$\] { + margin-left: var(--any-value); + } + .mr-\[var$--any-value$\] { + margin-right: var(--any-value); + } + .mt-\[var$--any-value$\] { + margin-top: var(--any-value); + } + .aspect-\[var$--any-value$\] { + aspect-ratio: var(--any-value); + } + .h-\[var$--any-value$\] { + height: var(--any-value); + } + .max-h-\[var$--any-value$\] { + max-height: var(--any-value); + } + .min-h-\[var$--any-value$\] { + min-height: var(--any-value); + } + .w-\[var$--any-value$\] { + width: var(--any-value); + } + .min-w-\[var$--any-value$\] { + min-width: var(--any-value); + } + .max-w-\[var$--any-value$\] { + max-width: var(--any-value); + } + .flex-\[var$--any-value$\] { + flex: var(--any-value); + } + .flex-shrink-\[var$--any-value$\] { + flex-shrink: var(--any-value); + } + .shrink-\[var$--any-value$\] { + flex-shrink: var(--any-value); + } + .flex-grow-\[var$--any-value$\] { + flex-grow: var(--any-value); + } + .grow-\[var$--any-value$\] { + flex-grow: var(--any-value); + } + .basis-\[var$--any-value$\] { + flex-basis: var(--any-value); + } + .border-spacing-\[var$--any-value$\] { + --tw-border-spacing-x: var(--any-value); + --tw-border-spacing-y: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .border-spacing-x-\[var$--any-value$\] { + --tw-border-spacing-x: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .border-spacing-y-\[var$--any-value$\] { + --tw-border-spacing-y: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .origin-\[var$--any-value$\] { + transform-origin: var(--any-value); + } + .translate-x-\[var$--any-value$\] { + --tw-translate-x: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .translate-y-\[var$--any-value$\] { + --tw-translate-y: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .rotate-\[var$--any-value$\] { + --tw-rotate: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .scale-\[var$--any-value$\] { + --tw-scale-x: var(--any-value); + --tw-scale-y: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .scale-x-\[var$--any-value$\] { + --tw-scale-x: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .scale-y-\[var$--any-value$\] { + --tw-scale-y: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .animate-\[var$--any-value$\] { + animation: var(--any-value); + } + .cursor-\[var$--any-value$\] { + cursor: var(--any-value); + } + .scroll-m-\[var$--any-value$\] { + scroll-margin: var(--any-value); + } + .scroll-mx-\[var$--any-value$\] { + scroll-margin-left: var(--any-value); + scroll-margin-right: var(--any-value); + } + .scroll-my-\[var$--any-value$\] { + scroll-margin-top: var(--any-value); + scroll-margin-bottom: var(--any-value); + } + .scroll-mb-\[var$--any-value$\] { + scroll-margin-bottom: var(--any-value); + } + .scroll-ml-\[var$--any-value$\] { + scroll-margin-left: var(--any-value); + } + .scroll-mr-\[var$--any-value$\] { + scroll-margin-right: var(--any-value); + } + .scroll-mt-\[var$--any-value$\] { + scroll-margin-top: var(--any-value); + } + .scroll-p-\[var$--any-value$\] { + scroll-padding: var(--any-value); + } + .scroll-px-\[var$--any-value$\] { + scroll-padding-left: var(--any-value); + scroll-padding-right: var(--any-value); + } + .scroll-py-\[var$--any-value$\] { + scroll-padding-top: var(--any-value); + scroll-padding-bottom: var(--any-value); + } + .scroll-pb-\[var$--any-value$\] { + scroll-padding-bottom: var(--any-value); + } + .scroll-pl-\[var$--any-value$\] { + scroll-padding-left: var(--any-value); + } + .scroll-pr-\[var$--any-value$\] { + scroll-padding-right: var(--any-value); + } + .scroll-pt-\[var$--any-value$\] { + scroll-padding-top: var(--any-value); + } + .list-\[var$--any-value$\] { + list-style-type: var(--any-value); + } + .columns-\[var$--any-value$\] { + columns: var(--any-value); + } + .auto-cols-\[var$--any-value$\] { + grid-auto-columns: var(--any-value); + } + .auto-rows-\[var$--any-value$\] { + grid-auto-rows: var(--any-value); + } + .grid-cols-\[var$--any-value$\] { + grid-template-columns: var(--any-value); + } + .grid-rows-\[var$--any-value$\] { + grid-template-rows: var(--any-value); + } + .gap-\[var$--any-value$\] { + gap: var(--any-value); + } + .gap-x-\[var$--any-value$\] { + column-gap: var(--any-value); + } + .gap-y-\[var$--any-value$\] { + row-gap: var(--any-value); + } + .space-x-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(var(--any-value) * var(--tw-space-x-reverse)); + margin-inline-start: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse))); + } + .space-y-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(var(--any-value) * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(var(--any-value) * var(--tw-space-y-reverse)); + } + .divide-y-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(var(--any-value) * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(var(--any-value) * var(--tw-divide-y-reverse)); + } + .divide-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + border-color: var(--any-value); + } + .divide-opacity-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: var(--any-value); + } + .rounded-\[var$--any-value$\] { + border-radius: var(--any-value); + } + .rounded-b-\[var$--any-value$\] { + border-bottom-right-radius: var(--any-value); + border-bottom-left-radius: var(--any-value); + } + .rounded-l-\[var$--any-value$\] { + border-top-left-radius: var(--any-value); + border-bottom-left-radius: var(--any-value); + } + .rounded-r-\[var$--any-value$\] { + border-top-right-radius: var(--any-value); + border-bottom-right-radius: var(--any-value); + } + .rounded-t-\[var$--any-value$\] { + border-top-left-radius: var(--any-value); + border-top-right-radius: var(--any-value); + } + .rounded-bl-\[var$--any-value$\] { + border-bottom-left-radius: var(--any-value); + } + .rounded-br-\[var$--any-value$\] { + border-bottom-right-radius: var(--any-value); + } + .rounded-tl-\[var$--any-value$\] { + border-top-left-radius: var(--any-value); + } + .rounded-tr-\[var$--any-value$\] { + border-top-right-radius: var(--any-value); + } + .border-\[var$--any-value$\] { + border-color: var(--any-value); + } + .border-x-\[var$--any-value$\] { + border-left-color: var(--any-value); + border-right-color: var(--any-value); + } + .border-y-\[var$--any-value$\] { + border-top-color: var(--any-value); + border-bottom-color: var(--any-value); + } + .border-b-\[var$--any-value$\] { + border-bottom-color: var(--any-value); + } + .border-l-\[var$--any-value$\] { + border-left-color: var(--any-value); + } + .border-r-\[var$--any-value$\] { + border-right-color: var(--any-value); + } + .border-t-\[var$--any-value$\] { + border-top-color: var(--any-value); + } + .border-opacity-\[var$--any-value$\] { + --tw-border-opacity: var(--any-value); + } + .bg-\[var$--any-value$\] { + background-color: var(--any-value); + } + .bg-opacity-\[var$--any-value$\] { + --tw-bg-opacity: var(--any-value); + } + .from-\[var$--any-value$\] { + --tw-gradient-from: var(--any-value); + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + } + .via-\[var$--any-value$\] { + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to); + } + .to-\[var$--any-value$\] { + --tw-gradient-to: var(--any-value); + } + .fill-\[var$--any-value$\] { + fill: var(--any-value); + } + .stroke-\[var$--any-value$\] { + stroke: var(--any-value); + } + .object-\[var$--any-value$\] { + object-position: var(--any-value); + } + .p-\[var$--any-value$\] { + padding: var(--any-value); + } + .px-\[var$--any-value$\] { + padding-left: var(--any-value); + padding-right: var(--any-value); + } + .py-\[var$--any-value$\] { + padding-top: var(--any-value); + padding-bottom: var(--any-value); + } + .pb-\[var$--any-value$\] { + padding-bottom: var(--any-value); + } + .pl-\[var$--any-value$\] { + padding-left: var(--any-value); + } + .pr-\[var$--any-value$\] { + padding-right: var(--any-value); + } + .pt-\[var$--any-value$\] { + padding-top: var(--any-value); + } + .indent-\[var$--any-value$\] { + text-indent: var(--any-value); + } + .align-\[var$--any-value$\] { + vertical-align: var(--any-value); + } + .font-\[var$--any-value$\] { + font-weight: var(--any-value); + } + .leading-\[var$--any-value$\] { + line-height: var(--any-value); + } + .tracking-\[var$--any-value$\] { + letter-spacing: var(--any-value); + } + .text-\[var$--any-value$\] { + color: var(--any-value); + } + .text-opacity-\[var$--any-value$\] { + --tw-text-opacity: var(--any-value); + } + .decoration-\[var$--any-value$\] { + text-decoration-color: var(--any-value); + } + .underline-offset-\[var$--any-value$\] { + text-underline-offset: var(--any-value); + } + .placeholder-\[var$--any-value$\]::placeholder { + color: var(--any-value); + } + .placeholder-opacity-\[var$--any-value$\]::placeholder { + --tw-placeholder-opacity: var(--any-value); + } + .caret-\[var$--any-value$\] { + caret-color: var(--any-value); + } + .accent-\[var$--any-value$\] { + accent-color: var(--any-value); + } + .opacity-\[var$--any-value$\] { + opacity: var(--any-value); + } + .shadow-\[var$--any-value$\] { + --tw-shadow-color: var(--any-value); + --tw-shadow: var(--tw-shadow-colored); + } + .outline-offset-\[var$--any-value$\] { + outline-offset: var(--any-value); + } + .outline-\[var$--any-value$\] { + outline-color: var(--any-value); + } + .ring-\[var$--any-value$\] { + --tw-ring-color: var(--any-value); + } + .ring-opacity-\[var$--any-value$\] { + --tw-ring-opacity: var(--any-value); + } + .ring-offset-\[var$--any-value$\] { + --tw-ring-offset-color: var(--any-value); + } + .blur-\[var$--any-value$\] { + --tw-blur: blur(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .brightness-\[var$--any-value$\] { + --tw-brightness: brightness(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .contrast-\[var$--any-value$\] { + --tw-contrast: contrast(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .drop-shadow-\[var$--any-value$\] { + --tw-drop-shadow: drop-shadow(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .grayscale-\[var$--any-value$\] { + --tw-grayscale: grayscale(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .hue-rotate-\[var$--any-value$\] { + --tw-hue-rotate: hue-rotate(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .invert-\[var$--any-value$\] { + --tw-invert: invert(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .saturate-\[var$--any-value$\] { + --tw-saturate: saturate(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .sepia-\[var$--any-value$\] { + --tw-sepia: sepia(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .backdrop-blur-\[var$--any-value$\] { + --tw-backdrop-blur: blur(var(--any-value)); + 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-\[var$--any-value$\] { + --tw-backdrop-brightness: brightness(var(--any-value)); + 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-\[var$--any-value$\] { + --tw-backdrop-contrast: contrast(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-grayscale-\[var$--any-value$\] { + --tw-backdrop-grayscale: grayscale(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-hue-rotate-\[var$--any-value$\] { + --tw-backdrop-hue-rotate: hue-rotate(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-invert-\[var$--any-value$\] { + --tw-backdrop-invert: invert(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-opacity-\[var$--any-value$\] { + --tw-backdrop-opacity: opacity(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-saturate-\[var$--any-value$\] { + --tw-backdrop-saturate: saturate(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-sepia-\[var$--any-value$\] { + --tw-backdrop-sepia: sepia(var(--any-value)); + 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); + } + .transition-\[var$--any-value$\] { + transition-property: var(--any-value); + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + .delay-\[var$--any-value$\] { + transition-delay: var(--any-value); + } + .duration-\[var$--any-value$\] { + transition-duration: var(--any-value); + } + .ease-\[var$--any-value$\] { + transition-timing-function: var(--any-value); + } + .will-change-\[var$--any-value$\] { + will-change: var(--any-value); + } + .content-\[var$--any-value$\] { + --tw-content: var(--any-value); + content: var(--tw-content); + } + ` + : css` + .inset-\[var$--any-value$\] { + top: var(--any-value); + right: var(--any-value); + bottom: var(--any-value); + left: var(--any-value); + } + .inset-x-\[var$--any-value$\] { + left: var(--any-value); + right: var(--any-value); + } + .inset-y-\[var$--any-value$\] { + top: var(--any-value); + bottom: var(--any-value); + } + .bottom-\[var$--any-value$\] { + bottom: var(--any-value); + } + .left-\[var$--any-value$\] { + left: var(--any-value); + } + .right-\[var$--any-value$\] { + right: var(--any-value); + } + .top-\[var$--any-value$\] { + top: var(--any-value); + } + .z-\[var$--any-value$\] { + z-index: var(--any-value); + } + .order-\[var$--any-value$\] { + order: var(--any-value); + } + .col-\[var$--any-value$\] { + grid-column: var(--any-value); + } + .col-start-\[var$--any-value$\] { + grid-column-start: var(--any-value); + } + .col-end-\[var$--any-value$\] { + grid-column-end: var(--any-value); + } + .row-\[var$--any-value$\] { + grid-row: var(--any-value); + } + .row-start-\[var$--any-value$\] { + grid-row-start: var(--any-value); + } + .row-end-\[var$--any-value$\] { + grid-row-end: var(--any-value); + } + .m-\[var$--any-value$\] { + margin: var(--any-value); + } + .mx-\[var$--any-value$\] { + margin-left: var(--any-value); + margin-right: var(--any-value); + } + .my-\[var$--any-value$\] { + margin-top: var(--any-value); + margin-bottom: var(--any-value); + } + .mb-\[var$--any-value$\] { + margin-bottom: var(--any-value); + } + .ml-\[var$--any-value$\] { + margin-left: var(--any-value); + } + .mr-\[var$--any-value$\] { + margin-right: var(--any-value); + } + .mt-\[var$--any-value$\] { + margin-top: var(--any-value); + } + .aspect-\[var$--any-value$\] { + aspect-ratio: var(--any-value); + } + .h-\[var$--any-value$\] { + height: var(--any-value); + } + .max-h-\[var$--any-value$\] { + max-height: var(--any-value); + } + .min-h-\[var$--any-value$\] { + min-height: var(--any-value); + } + .w-\[var$--any-value$\] { + width: var(--any-value); + } + .min-w-\[var$--any-value$\] { + min-width: var(--any-value); + } + .max-w-\[var$--any-value$\] { + max-width: var(--any-value); + } + .flex-\[var$--any-value$\] { + flex: var(--any-value); + } + .flex-shrink-\[var$--any-value$\] { + flex-shrink: var(--any-value); + } + .shrink-\[var$--any-value$\] { + flex-shrink: var(--any-value); + } + .flex-grow-\[var$--any-value$\] { + flex-grow: var(--any-value); + } + .grow-\[var$--any-value$\] { + flex-grow: var(--any-value); + } + .basis-\[var$--any-value$\] { + flex-basis: var(--any-value); + } + .border-spacing-\[var$--any-value$\] { + --tw-border-spacing-x: var(--any-value); + --tw-border-spacing-y: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .border-spacing-x-\[var$--any-value$\] { + --tw-border-spacing-x: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .border-spacing-y-\[var$--any-value$\] { + --tw-border-spacing-y: var(--any-value); + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); + } + .origin-\[var$--any-value$\] { + transform-origin: var(--any-value); + } + .translate-x-\[var$--any-value$\] { + --tw-translate-x: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .translate-y-\[var$--any-value$\] { + --tw-translate-y: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .rotate-\[var$--any-value$\] { + --tw-rotate: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .scale-\[var$--any-value$\] { + --tw-scale-x: var(--any-value); + --tw-scale-y: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .scale-x-\[var$--any-value$\] { + --tw-scale-x: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .scale-y-\[var$--any-value$\] { + --tw-scale-y: var(--any-value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) + rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) + scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); + } + .animate-\[var$--any-value$\] { + animation: var(--any-value); + } + .cursor-\[var$--any-value$\] { + cursor: var(--any-value); + } + .scroll-m-\[var$--any-value$\] { + scroll-margin: var(--any-value); + } + .scroll-mx-\[var$--any-value$\] { + scroll-margin-left: var(--any-value); + scroll-margin-right: var(--any-value); + } + .scroll-my-\[var$--any-value$\] { + scroll-margin-top: var(--any-value); + scroll-margin-bottom: var(--any-value); + } + .scroll-mb-\[var$--any-value$\] { + scroll-margin-bottom: var(--any-value); + } + .scroll-ml-\[var$--any-value$\] { + scroll-margin-left: var(--any-value); + } + .scroll-mr-\[var$--any-value$\] { + scroll-margin-right: var(--any-value); + } + .scroll-mt-\[var$--any-value$\] { + scroll-margin-top: var(--any-value); + } + .scroll-p-\[var$--any-value$\] { + scroll-padding: var(--any-value); + } + .scroll-px-\[var$--any-value$\] { + scroll-padding-left: var(--any-value); + scroll-padding-right: var(--any-value); + } + .scroll-py-\[var$--any-value$\] { + scroll-padding-top: var(--any-value); + scroll-padding-bottom: var(--any-value); + } + .scroll-pb-\[var$--any-value$\] { + scroll-padding-bottom: var(--any-value); + } + .scroll-pl-\[var$--any-value$\] { + scroll-padding-left: var(--any-value); + } + .scroll-pr-\[var$--any-value$\] { + scroll-padding-right: var(--any-value); + } + .scroll-pt-\[var$--any-value$\] { + scroll-padding-top: var(--any-value); + } + .list-\[var$--any-value$\] { + list-style-type: var(--any-value); + } + .columns-\[var$--any-value$\] { + columns: var(--any-value); + } + .auto-cols-\[var$--any-value$\] { + grid-auto-columns: var(--any-value); + } + .auto-rows-\[var$--any-value$\] { + grid-auto-rows: var(--any-value); + } + .grid-cols-\[var$--any-value$\] { + grid-template-columns: var(--any-value); + } + .grid-rows-\[var$--any-value$\] { + grid-template-rows: var(--any-value); + } + .gap-\[var$--any-value$\] { + gap: var(--any-value); + } + .gap-x-\[var$--any-value$\] { + column-gap: var(--any-value); + } + .gap-y-\[var$--any-value$\] { + row-gap: var(--any-value); + } + .space-x-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(var(--any-value) * var(--tw-space-x-reverse)); + margin-left: calc(var(--any-value) * calc(1 - var(--tw-space-x-reverse))); + } + .space-y-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(var(--any-value) * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(var(--any-value) * var(--tw-space-y-reverse)); + } + .divide-y-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(var(--any-value) * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(var(--any-value) * var(--tw-divide-y-reverse)); + } + .divide-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + border-color: var(--any-value); + } + .divide-opacity-\[var$--any-value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: var(--any-value); + } + .rounded-\[var$--any-value$\] { + border-radius: var(--any-value); + } + .rounded-b-\[var$--any-value$\] { + border-bottom-right-radius: var(--any-value); + border-bottom-left-radius: var(--any-value); + } + .rounded-l-\[var$--any-value$\] { + border-top-left-radius: var(--any-value); + border-bottom-left-radius: var(--any-value); + } + .rounded-r-\[var$--any-value$\] { + border-top-right-radius: var(--any-value); + border-bottom-right-radius: var(--any-value); + } + .rounded-t-\[var$--any-value$\] { + border-top-left-radius: var(--any-value); + border-top-right-radius: var(--any-value); + } + .rounded-bl-\[var$--any-value$\] { + border-bottom-left-radius: var(--any-value); + } + .rounded-br-\[var$--any-value$\] { + border-bottom-right-radius: var(--any-value); + } + .rounded-tl-\[var$--any-value$\] { + border-top-left-radius: var(--any-value); + } + .rounded-tr-\[var$--any-value$\] { + border-top-right-radius: var(--any-value); + } + .border-\[var$--any-value$\] { + border-color: var(--any-value); + } + .border-x-\[var$--any-value$\] { + border-left-color: var(--any-value); + border-right-color: var(--any-value); + } + .border-y-\[var$--any-value$\] { + border-top-color: var(--any-value); + border-bottom-color: var(--any-value); + } + .border-b-\[var$--any-value$\] { + border-bottom-color: var(--any-value); + } + .border-l-\[var$--any-value$\] { + border-left-color: var(--any-value); + } + .border-r-\[var$--any-value$\] { + border-right-color: var(--any-value); + } + .border-t-\[var$--any-value$\] { + border-top-color: var(--any-value); + } + .border-opacity-\[var$--any-value$\] { + --tw-border-opacity: var(--any-value); + } + .bg-\[var$--any-value$\] { + background-color: var(--any-value); + } + .bg-opacity-\[var$--any-value$\] { + --tw-bg-opacity: var(--any-value); + } + .from-\[var$--any-value$\] { + --tw-gradient-from: var(--any-value); + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); + } + .via-\[var$--any-value$\] { + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--any-value), var(--tw-gradient-to); + } + .to-\[var$--any-value$\] { + --tw-gradient-to: var(--any-value); + } + .fill-\[var$--any-value$\] { + fill: var(--any-value); + } + .stroke-\[var$--any-value$\] { + stroke: var(--any-value); + } + .object-\[var$--any-value$\] { + object-position: var(--any-value); + } + .p-\[var$--any-value$\] { + padding: var(--any-value); + } + .px-\[var$--any-value$\] { + padding-left: var(--any-value); + padding-right: var(--any-value); + } + .py-\[var$--any-value$\] { + padding-top: var(--any-value); + padding-bottom: var(--any-value); + } + .pb-\[var$--any-value$\] { + padding-bottom: var(--any-value); + } + .pl-\[var$--any-value$\] { + padding-left: var(--any-value); + } + .pr-\[var$--any-value$\] { + padding-right: var(--any-value); + } + .pt-\[var$--any-value$\] { + padding-top: var(--any-value); + } + .indent-\[var$--any-value$\] { + text-indent: var(--any-value); + } + .align-\[var$--any-value$\] { + vertical-align: var(--any-value); + } + .font-\[var$--any-value$\] { + font-weight: var(--any-value); + } + .leading-\[var$--any-value$\] { + line-height: var(--any-value); + } + .tracking-\[var$--any-value$\] { + letter-spacing: var(--any-value); + } + .text-\[var$--any-value$\] { + color: var(--any-value); + } + .text-opacity-\[var$--any-value$\] { + --tw-text-opacity: var(--any-value); + } + .decoration-\[var$--any-value$\] { + text-decoration-color: var(--any-value); + } + .underline-offset-\[var$--any-value$\] { + text-underline-offset: var(--any-value); + } + .placeholder-\[var$--any-value$\]::placeholder { + color: var(--any-value); + } + .placeholder-opacity-\[var$--any-value$\]::placeholder { + --tw-placeholder-opacity: var(--any-value); + } + .caret-\[var$--any-value$\] { + caret-color: var(--any-value); + } + .accent-\[var$--any-value$\] { + accent-color: var(--any-value); + } + .opacity-\[var$--any-value$\] { + opacity: var(--any-value); + } + .shadow-\[var$--any-value$\] { + --tw-shadow-color: var(--any-value); + --tw-shadow: var(--tw-shadow-colored); + } + .outline-offset-\[var$--any-value$\] { + outline-offset: var(--any-value); + } + .outline-\[var$--any-value$\] { + outline-color: var(--any-value); + } + .ring-\[var$--any-value$\] { + --tw-ring-color: var(--any-value); + } + .ring-opacity-\[var$--any-value$\] { + --tw-ring-opacity: var(--any-value); + } + .ring-offset-\[var$--any-value$\] { + --tw-ring-offset-color: var(--any-value); + } + .blur-\[var$--any-value$\] { + --tw-blur: blur(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .brightness-\[var$--any-value$\] { + --tw-brightness: brightness(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .contrast-\[var$--any-value$\] { + --tw-contrast: contrast(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .drop-shadow-\[var$--any-value$\] { + --tw-drop-shadow: drop-shadow(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .grayscale-\[var$--any-value$\] { + --tw-grayscale: grayscale(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .hue-rotate-\[var$--any-value$\] { + --tw-hue-rotate: hue-rotate(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .invert-\[var$--any-value$\] { + --tw-invert: invert(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .saturate-\[var$--any-value$\] { + --tw-saturate: saturate(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .sepia-\[var$--any-value$\] { + --tw-sepia: sepia(var(--any-value)); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) + var(--tw-drop-shadow); + } + .backdrop-blur-\[var$--any-value$\] { + --tw-backdrop-blur: blur(var(--any-value)); + 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-\[var$--any-value$\] { + --tw-backdrop-brightness: brightness(var(--any-value)); + 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-\[var$--any-value$\] { + --tw-backdrop-contrast: contrast(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-grayscale-\[var$--any-value$\] { + --tw-backdrop-grayscale: grayscale(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-hue-rotate-\[var$--any-value$\] { + --tw-backdrop-hue-rotate: hue-rotate(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-invert-\[var$--any-value$\] { + --tw-backdrop-invert: invert(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-opacity-\[var$--any-value$\] { + --tw-backdrop-opacity: opacity(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-saturate-\[var$--any-value$\] { + --tw-backdrop-saturate: saturate(var(--any-value)); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) + var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) + var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); + } + .backdrop-sepia-\[var$--any-value$\] { + --tw-backdrop-sepia: sepia(var(--any-value)); + 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); + } + .transition-\[var$--any-value$\] { + transition-property: var(--any-value); + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; + } + .delay-\[var$--any-value$\] { + transition-delay: var(--any-value); + } + .duration-\[var$--any-value$\] { + transition-duration: var(--any-value); + } + .ease-\[var$--any-value$\] { + transition-timing-function: var(--any-value); + } + .will-change-\[var$--any-value$\] { + will-change: var(--any-value); + } + .content-\[var$--any-value$\] { + --tw-content: var(--any-value); + content: var(--tw-content); + } + ` + ) }) }) diff --git a/tests/arbitrary-values.oxide.test.css b/tests/arbitrary-values.oxide.test.css new file mode 100644 index 000000000000..34bb93bc686b --- /dev/null +++ b/tests/arbitrary-values.oxide.test.css @@ -0,0 +1,1141 @@ +.inset-\[11px\] { + top: 11px; + right: 11px; + bottom: 11px; + left: 11px; +} +.inset-\[var$--value$\] { + top: var(--value); + right: var(--value); + bottom: var(--value); + left: var(--value); +} +.inset-x-\[11px\] { + left: 11px; + right: 11px; +} +.inset-x-\[var$--value$\] { + left: var(--value); + right: var(--value); +} +.inset-y-\[11px\] { + top: 11px; + bottom: 11px; +} +.inset-y-\[var$--value$\] { + top: var(--value); + bottom: var(--value); +} +.bottom-\[11px\] { + bottom: 11px; +} +.bottom-\[var$--value$\] { + bottom: var(--value); +} +.left-\[11px\] { + left: 11px; +} +.left-\[var$--value$\] { + left: var(--value); +} +.right-\[11px\] { + right: 11px; +} +.right-\[var$--value$\] { + right: var(--value); +} +.top-\[11px\] { + top: 11px; +} +.top-\[var$--value$\] { + top: var(--value); +} +.z-\[123\] { + z-index: 123; +} +.z-\[var$--value$\] { + z-index: var(--value); +} +.order-\[4\] { + order: 4; +} +.order-\[var$--value$\] { + order: var(--value); +} +.col-\[7\] { + grid-column: 7; +} +.col-start-\[7\] { + grid-column-start: 7; +} +.col-end-\[7\] { + grid-column-end: 7; +} +.row-\[7\] { + grid-row: 7; +} +.row-start-\[7\] { + grid-row-start: 7; +} +.row-end-\[7\] { + grid-row-end: 7; +} +.m-\[7px\] { + margin: 7px; +} +.mx-\[7px\] { + margin-left: 7px; + margin-right: 7px; +} +.my-\[7px\] { + margin-top: 7px; + margin-bottom: 7px; +} +.mb-\[7px\] { + margin-bottom: 7px; +} +.ml-\[7px\] { + margin-left: 7px; +} +.mr-\[7px\] { + margin-right: 7px; +} +.mt-\[7px\] { + margin-top: 7px; +} +.mt-\[clamp$30px\2c 100px$\] { + margin-top: clamp(30px, 100px); +} +.aspect-\[16\/9\] { + aspect-ratio: 16/9; +} +.aspect-\[var$--aspect$\] { + aspect-ratio: var(--aspect); +} +.h-\[3\.23rem\] { + height: 3.23rem; +} +.h-\[calc$100\%\+1rem$\] { + height: calc(100% + 1rem); +} +.h-\[var$--height$\] { + height: var(--height); +} +.max-h-\[3\.23rem\] { + max-height: 3.23rem; +} +.max-h-\[calc$100\%\+1rem$\] { + max-height: calc(100% + 1rem); +} +.max-h-\[var$--height$\] { + max-height: var(--height); +} +.min-h-\[3\.23rem\] { + min-height: 3.23rem; +} +.min-h-\[calc$100\%\+1rem$\] { + min-height: calc(100% + 1rem); +} +.min-h-\[var$--height$\] { + min-height: var(--height); +} +.w-\[\'\)\'\] { + width: ')()'; +} +.w-\[\'\]\[\]\'\] { + width: '][]'; +} +.w-\[\'\}\{\}\'\] { + width: '}{}'; +} +.w-\[$\($\)\] { + width: (()); +} +.w-\[\] { + width: (); +} +.w-\[0\] { + width: 0; +} +.w-\[3\.23rem\] { + width: 3.23rem; +} +.w-\[\[\[\]\]\] { + width: [[]]; +} +.w-\[\[\]\] { + width: []; +} +.w-\[calc$100\%\+1rem$\] { + width: calc(100% + 1rem); +} +.w-\[calc$100\%\/3-1rem\*2$\] { + width: calc(100% / 3 - 1rem * 2); +} +.w-\[calc$var\(--10-10px\2c calc\(-20px-\(-30px--40px$\)\)-50px\)\] { + width: calc(var(--10-10px, calc(-20px - (-30px - -40px))) - 50px); +} +.w-\[var$--width$\] { + width: var(--width); +} +.w-\[var$--width\2c calc\(100\%\+1rem$\)\] { + width: var(--width, calc(100% + 1rem)); +} +.w-\[\{\{\}\}\] { + width: { + { + } + } +} +.w-\[\{\}\] { + width: { + } +} +.min-w-\[3\.23rem\] { + min-width: 3.23rem; +} +.min-w-\[calc$1-\(\(12-3$\*0\.5\)\)\] { + min-width: calc(1 - ((12 - 3) * 0.5)); +} +.min-w-\[calc$1-\(var\(--something$\*0\.5\)\)\] { + min-width: calc(1 - (var(--something) * 0.5)); +} +.min-w-\[calc$1-var\(--something$\*0\.5\)\] { + min-width: calc(1 - var(--something) * 0.5); +} +.min-w-\[calc$100\%\+1rem$\] { + min-width: calc(100% + 1rem); +} +.min-w-\[var$--width$\] { + min-width: var(--width); +} +.max-w-\[3\.23rem\] { + max-width: 3.23rem; +} +.max-w-\[calc$100\%\+1rem$\] { + max-width: calc(100% + 1rem); +} +.max-w-\[var$--width$\] { + max-width: var(--width); +} +.flex-\[var$--flex$\] { + flex: var(--flex); +} +.flex-shrink-\[var$--shrink$\] { + flex-shrink: var(--shrink); +} +.shrink-\[var$--shrink$\] { + flex-shrink: var(--shrink); +} +.flex-grow-\[var$--grow$\] { + flex-grow: var(--grow); +} +.grow-\[var$--grow$\] { + flex-grow: var(--grow); +} +.basis-\[var$--basis$\] { + flex-basis: var(--basis); +} +.origin-\[50px_50px\] { + transform-origin: 50px 50px; +} +.translate-x-\[12\%\] { + --tw-translate-x: 12%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.translate-x-\[var$--value$\] { + --tw-translate-x: var(--value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.translate-y-\[12\%\] { + --tw-translate-y: 12%; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.translate-y-\[var$--value$\] { + --tw-translate-y: var(--value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.rotate-\[1\.5turn\] { + --tw-rotate: 1.5turn; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.rotate-\[2\.3rad\] { + --tw-rotate: 2.3rad; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.rotate-\[23deg\] { + --tw-rotate: 23deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.rotate-\[401grad\] { + --tw-rotate: 401grad; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.skew-x-\[3px\] { + --tw-skew-x: 3px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.skew-x-\[var$--value$\] { + --tw-skew-x: var(--value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.skew-y-\[3px\] { + --tw-skew-y: 3px; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.skew-y-\[var$--value$\] { + --tw-skew-y: var(--value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.scale-\[0\.7\] { + --tw-scale-x: 0.7; + --tw-scale-y: 0.7; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.scale-\[var$--value$\] { + --tw-scale-x: var(--value); + --tw-scale-y: var(--value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.scale-x-\[0\.7\] { + --tw-scale-x: 0.7; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.scale-x-\[var$--value$\] { + --tw-scale-x: var(--value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.scale-y-\[0\.7\] { + --tw-scale-y: 0.7; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.scale-y-\[var$--value$\] { + --tw-scale-y: var(--value); + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.animate-\[pong_1s_cubic-bezier$0\2c 0\2c 0\.2\2c 1$_infinite\] { + animation: pong 1s cubic-bezier(0, 0, 0.2, 1) infinite; +} +.animate-\[var$--value$\] { + animation: var(--value); +} +.cursor-\[pointer\] { + cursor: pointer; +} +.cursor-\[url$\'\.\/path_to_hand\.cur\'$_2_2\2c pointer\] { + cursor: url('./path_to_hand.cur') 2 2, pointer; +} +.cursor-\[url$hand\.cur$_2_2\2c pointer\] { + cursor: url(hand.cur) 2 2, pointer; +} +.cursor-\[var$--value$\] { + cursor: var(--value); +} +.scroll-m-\[7px\] { + scroll-margin: 7px; +} +.scroll-mx-\[7px\] { + scroll-margin-left: 7px; + scroll-margin-right: 7px; +} +.scroll-my-\[7px\] { + scroll-margin-top: 7px; + scroll-margin-bottom: 7px; +} +.scroll-mb-\[7px\] { + scroll-margin-bottom: 7px; +} +.scroll-ml-\[7px\] { + scroll-margin-left: 7px; +} +.scroll-mr-\[7px\] { + scroll-margin-right: 7px; +} +.scroll-mt-\[7px\] { + scroll-margin-top: 7px; +} +.scroll-mt-\[var$--scroll-margin$\] { + scroll-margin-top: var(--scroll-margin); +} +.scroll-p-\[7px\] { + scroll-padding: 7px; +} +.scroll-px-\[7px\] { + scroll-padding-left: 7px; + scroll-padding-right: 7px; +} +.scroll-py-\[7px\] { + scroll-padding-top: 7px; + scroll-padding-bottom: 7px; +} +.scroll-pb-\[7px\] { + scroll-padding-bottom: 7px; +} +.scroll-pl-\[7px\] { + scroll-padding-left: 7px; +} +.scroll-pr-\[7px\] { + scroll-padding-right: 7px; +} +.scroll-pt-\[7px\] { + scroll-padding-top: 7px; +} +.scroll-pt-\[var$--scroll-padding$\] { + scroll-padding-top: var(--scroll-padding); +} +.list-\[\'\\1f44d\'\] { + list-style-type: '\1F44D'; +} +.list-\[var$--value$\] { + list-style-type: var(--value); +} +.columns-\[20\] { + columns: 20; +} +.columns-\[var$--columns$\] { + columns: var(--columns); +} +.auto-cols-\[minmax$10px\2c auto$\] { + grid-auto-columns: minmax(10px, auto); +} +.auto-rows-\[minmax$10px\2c auto$\] { + grid-auto-rows: minmax(10px, auto); +} +.grid-cols-\[200px\2c repeat$auto-fill\2c minmax\(15\%\2c 100px$\)\2c 300px\] { + grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; +} +.grid-cols-\[\[linename\]\2c 1fr\2c auto\] { + grid-template-columns: [linename] 1fr auto; +} +.grid-rows-\[200px\2c repeat$auto-fill\2c minmax\(15\%\2c 100px$\)\2c 300px\] { + grid-template-rows: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; +} +.gap-\[20px\] { + gap: 20px; +} +.gap-\[var$--value$\] { + gap: var(--value); +} +.gap-x-\[20px\] { + column-gap: 20px; +} +.gap-x-\[var$--value$\] { + column-gap: var(--value); +} +.gap-y-\[20px\] { + row-gap: 20px; +} +.gap-y-\[var$--value$\] { + row-gap: var(--value); +} +.space-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(20cm * var(--tw-space-x-reverse)); + margin-inline-start: calc(20cm * calc(1 - var(--tw-space-x-reverse))); +} +.space-x-\[calc$20\%-1cm$\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(calc(20% - 1cm) * var(--tw-space-x-reverse)); + margin-inline-start: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-x-reverse))); +} +.space-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(20cm * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(20cm * var(--tw-space-y-reverse)); +} +.space-y-\[calc$20\%-1cm$\] > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(calc(20% - 1cm) * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(calc(20% - 1cm) * var(--tw-space-y-reverse)); +} +.divide-x-\[20cm\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(20cm * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(20cm * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-x-\[calc$20\%-1cm$\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(calc(20% - 1cm) * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-y-\[20cm\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(20cm * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(20cm * var(--tw-divide-y-reverse)); +} +.divide-y-\[calc$20\%-1cm$\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(calc(20% - 1cm) * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(calc(20% - 1cm) * var(--tw-divide-y-reverse)); +} +.divide-\[black\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-divide-opacity)); +} +.divide-\[var$--value$\] > :not([hidden]) ~ :not([hidden]) { + border-color: var(--value); +} +.divide-opacity-\[0\.8\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 0.8; +} +.divide-opacity-\[var$--value$\] > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: var(--value); +} +.rounded-\[11px\] { + border-radius: 11px; +} +.rounded-b-\[var$--radius$\] { + border-bottom-right-radius: var(--radius); + border-bottom-left-radius: var(--radius); +} +.rounded-l-\[var$--radius$\] { + border-top-left-radius: var(--radius); + border-bottom-left-radius: var(--radius); +} +.rounded-r-\[var$--radius$\] { + border-top-right-radius: var(--radius); + border-bottom-right-radius: var(--radius); +} +.rounded-t-\[var$--radius$\] { + border-top-left-radius: var(--radius); + border-top-right-radius: var(--radius); +} +.rounded-bl-\[var$--radius$\] { + border-bottom-left-radius: var(--radius); +} +.rounded-br-\[var$--radius$\] { + border-bottom-right-radius: var(--radius); +} +.rounded-tl-\[var$--radius$\] { + border-top-left-radius: var(--radius); +} +.rounded-tr-\[var$--radius$\] { + border-top-right-radius: var(--radius); +} +.border-\[2\.5px\] { + border-width: 2.5px; +} +.border-\[length\:var$--value$\] { + border-width: var(--value); +} +.border-b-\[2\.5px\] { + border-bottom-width: 2.5px; +} +.border-b-\[length\:var$--value$\] { + border-bottom-width: var(--value); +} +.border-l-\[2\.5px\] { + border-left-width: 2.5px; +} +.border-l-\[length\:var$--value$\] { + border-left-width: var(--value); +} +.border-r-\[2\.5px\] { + border-right-width: 2.5px; +} +.border-r-\[length\:var$--value$\] { + border-right-width: var(--value); +} +.border-t-\[2\.5px\] { + border-top-width: 2.5px; +} +.border-t-\[length\:var$--value$\] { + border-top-width: var(--value); +} +.border-\[\#f00\] { + --tw-border-opacity: 1; + border-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-\[color\:var$--value$\] { + border-color: var(--value); +} +.border-\[red_black\] { + border-color: red black; +} +.border-b-\[\#f00\] { + --tw-border-opacity: 1; + border-bottom-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-b-\[color\:var$--value$\] { + border-bottom-color: var(--value); +} +.border-l-\[\#f00\] { + --tw-border-opacity: 1; + border-left-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-l-\[color\:var$--value$\] { + border-left-color: var(--value); +} +.border-r-\[\#f00\] { + --tw-border-opacity: 1; + border-right-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-r-\[color\:var$--value$\] { + border-right-color: var(--value); +} +.border-t-\[\#f00\] { + --tw-border-opacity: 1; + border-top-color: rgb(255 0 0 / var(--tw-border-opacity)); +} +.border-t-\[color\:var$--value$\] { + border-top-color: var(--value); +} +.border-opacity-\[0\.8\] { + --tw-border-opacity: 0.8; +} +.border-opacity-\[var$--value$\] { + --tw-border-opacity: var(--value); +} +.bg-\[\#0000ffcc\] { + background-color: #0000ffcc; +} +.bg-\[\#0f0\] { + --tw-bg-opacity: 1; + background-color: rgb(0 255 0 / var(--tw-bg-opacity)); +} +.bg-\[\#0f0_var$--value$\] { + background-color: #0f0 var(--value); +} +.bg-\[\#ff0000\] { + --tw-bg-opacity: 1; + background-color: rgb(255 0 0 / var(--tw-bg-opacity)); +} +.bg-\[color\:var$--value1$_var$--value2$\] { + background-color: var(--value1) var(--value2); +} +.bg-\[hsl$0\2c 100\%\2c 50\%$\] { + --tw-bg-opacity: 1; + background-color: hsl(0 100% 50% / var(--tw-bg-opacity)); +} +.bg-\[hsl$0rad\2c 100\%\2c 50\%$\] { + --tw-bg-opacity: 1; + background-color: hsl(0rad 100% 50% / var(--tw-bg-opacity)); +} +.bg-\[hsla$0\2c 100\%\2c 50\%\2c 0\.3$\] { + background-color: hsla(0, 100%, 50%, 0.3); +} +.bg-\[hsla$0turn\2c 100\%\2c 50\%\2c 0\.3$\] { + background-color: hsla(0turn, 100%, 50%, 0.3); +} +.bg-\[rgb$123\2c 123\2c 123$\] { + --tw-bg-opacity: 1; + background-color: rgb(123 123 123 / var(--tw-bg-opacity)); +} +.bg-\[rgb$123\2c _456\2c _123$_black\] { + background-color: rgb(123, 456, 123) black; +} +.bg-\[rgb$123_456_789$\] { + --tw-bg-opacity: 1; + background-color: rgb(123 456 789 / var(--tw-bg-opacity)); +} +.bg-\[rgba$123\2c 123\2c 123\2c 0\.5$\] { + background-color: rgba(123, 123, 123, 0.5); +} +.bg-\[var$--value$\2c var$--value$\] { + background-color: var(--value), var(--value); +} +.bg-\[var$--value1$_var$--value2$\] { + background-color: var(--value1) var(--value2); +} +.bg-opacity-\[0\.11\] { + --tw-bg-opacity: 0.11; +} +.bg-opacity-\[var$--value$\] { + --tw-bg-opacity: var(--value); +} +.bg-\[image\2c var$--value$\] { + background-image: image(), var(--value); +} +.bg-\[image\:var$--value$\2c var$--value$\] { + background-image: var(--value), var(--value); +} +.bg-\[linear-gradient$\#eee\2c + \#fff$\2c + conic-gradient$red\2c + orange\2c + yellow\2c + green\2c + blue$\] { + background-image: linear-gradient(#eee, #fff), conic-gradient(red, orange, yellow, green, blue); +} +.bg-\[linear-gradient$\#eee\2c \#fff$\] { + background-image: linear-gradient(#eee, #fff); +} +.bg-\[linear-gradient$to_left\2c rgb\(var\(--green$\)\2c blue\)\] { + background-image: linear-gradient(to left, rgb(var(--green)), blue); +} +.bg-\[url$\'\/path-to-image\.png\'$\] { + background-image: url('/path-to-image.png'); +} +.bg-\[url\:var$--url$\] { + background-image: var(--url); +} +.from-\[\#da5b66\] { + --tw-gradient-from: #da5b66; + --tw-gradient-to: rgb(218 91 102 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.from-\[var$--color$\] { + --tw-gradient-from: var(--color); + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.via-\[\#da5b66\] { + --tw-gradient-to: rgb(218 91 102 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #da5b66, var(--tw-gradient-to); +} +.via-\[var$--color$\] { + --tw-gradient-to: rgb(255 255 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--color), var(--tw-gradient-to); +} +.to-\[\#da5b66\] { + --tw-gradient-to: #da5b66; +} +.to-\[var$--color$\] { + --tw-gradient-to: var(--color); +} +.bg-\[length\:200px_100px\] { + background-size: 200px 100px; +} +.bg-\[length\:var$--value$\] { + background-size: var(--value); +} +.bg-\[center_top_1rem\] { + background-position: center top 1rem; +} +.bg-\[position\:200px_100px\] { + background-position: 200px 100px; +} +.bg-\[position\:var$--value$\] { + background-position: var(--value); +} +.fill-\[\#da5b66\] { + fill: #da5b66; +} +.fill-\[url$\#icon-gradient$\] { + fill: url(#icon-gradient); +} +.fill-\[var$--value$\] { + fill: var(--value); +} +.stroke-\[\#da5b66\] { + stroke: #da5b66; +} +.stroke-\[color\:var$--value$\] { + stroke: var(--value); +} +.stroke-\[url$\#icon-gradient$\] { + stroke: url(#icon-gradient); +} +.stroke-\[20px\] { + stroke-width: 20px; +} +.stroke-\[length\:var$--value$\] { + stroke-width: var(--value); +} +.object-\[50\%\2c 50\%\] { + object-position: 50% 50%; +} +.object-\[top\2c right\] { + object-position: top right; +} +.object-\[var$--position$\] { + object-position: var(--position); +} +.p-\[7px\] { + padding: 7px; +} +.px-\[7px\] { + padding-left: 7px; + padding-right: 7px; +} +.py-\[7px\] { + padding-top: 7px; + padding-bottom: 7px; +} +.pb-\[7px\] { + padding-bottom: 7px; +} +.pl-\[7px\] { + padding-left: 7px; +} +.pr-\[7px\] { + padding-right: 7px; +} +.pt-\[7px\] { + padding-top: 7px; +} +.pt-\[clamp$30px\2c 100px$\] { + padding-top: clamp(30px, 100px); +} +.indent-\[50\%\] { + text-indent: 50%; +} +.indent-\[var$--indent$\] { + text-indent: var(--indent); +} +.align-\[10em\] { + vertical-align: 10em; +} +.font-\[\'Gill_Sans\'\] { + font-family: 'Gill Sans'; +} +.font-\[\'Some_Font\'\2c \'Some_Other_Font\'\] { + font-family: 'Some Font', 'Some Other Font'; +} +.font-\[\'Some_Font\'\2c sans-serif\] { + font-family: 'Some Font', sans-serif; +} +.font-\[\'Some_Font\'\2c var$--other-font$\] { + font-family: 'Some Font', var(--other-font); +} +.font-\[Georgia\2c serif\] { + font-family: Georgia, serif; +} +.font-\[family-name\:var$--value$\] { + font-family: var(--value); +} +.font-\[sans-serif\2c serif\] { + font-family: sans-serif, serif; +} +.font-\[serif\2c var$--value$\] { + font-family: serif, var(--value); +} +.text-\[0\] { + font-size: 0; +} +.text-\[2\.23rem\] { + font-size: 2.23rem; +} +.text-\[4cqw\] { + font-size: 4cqw; +} +.text-\[length\:var$--font-size$\] { + font-size: var(--font-size); +} +.text-\[min$10vh\2c 100px$\] { + font-size: min(10vh, 100px); +} +.font-\[300\] { + font-weight: 300; +} +.font-\[number\:lighter\] { + font-weight: lighter; +} +.font-\[number\:var$--value$\] { + font-weight: var(--value); +} +.leading-\[var$--leading$\] { + line-height: var(--leading); +} +.tracking-\[var$--tracking$\] { + letter-spacing: var(--tracking); +} +.text-\[black\] { + --tw-text-opacity: 1; + color: rgb(0 0 0 / var(--tw-text-opacity)); +} +.text-\[color\:var$--color$\] { + color: var(--color); +} +.text-\[rgb$123\2c 123\2c 123$\] { + --tw-text-opacity: 1; + color: rgb(123 123 123 / var(--tw-text-opacity)); +} +.text-\[rgb$123\2c _123\2c _123$\] { + --tw-text-opacity: 1; + color: rgb(123 123 123 / var(--tw-text-opacity)); +} +.text-\[rgb$123_123_123$\] { + --tw-text-opacity: 1; + color: rgb(123 123 123 / var(--tw-text-opacity)); +} +.text-opacity-\[0\.8\] { + --tw-text-opacity: 0.8; +} +.text-opacity-\[var$--value$\] { + --tw-text-opacity: var(--value); +} +.decoration-\[black\] { + text-decoration-color: black; +} +.decoration-\[color\:var$--color$\] { + text-decoration-color: var(--color); +} +.decoration-\[rgb$123\2c 123\2c 123$\] { + text-decoration-color: rgb(123, 123, 123); +} +.decoration-\[rgb$123\2c _123\2c _123$\] { + text-decoration-color: rgb(123, 123, 123); +} +.decoration-\[rgb$123_123_123$\] { + text-decoration-color: rgb(123 123 123); +} +.decoration-\[length\:10px\] { + text-decoration-thickness: 10px; +} +.underline-offset-\[10px\] { + text-underline-offset: 10px; +} +.placeholder-\[var$--placeholder$\]::placeholder { + color: var(--placeholder); +} +.placeholder-opacity-\[var$--placeholder-opacity$\]::placeholder { + --tw-placeholder-opacity: var(--placeholder-opacity); +} +.caret-\[black\] { + caret-color: black; +} +.caret-\[var$--value$\] { + caret-color: var(--value); +} +.accent-\[\#bada55\] { + accent-color: #bada55; +} +.accent-\[var$--accent-color$\] { + accent-color: var(--accent-color); +} +.opacity-\[0\.8\] { + opacity: 0.8; +} +.opacity-\[var$--opacity$\] { + opacity: var(--opacity); +} +.shadow-\[0px_1px_2px_black\] { + --tw-shadow: 0px 1px 2px black; + --tw-shadow-colored: 0px 1px 2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.shadow-\[shadow\:var$--value$\] { + --tw-shadow: var(--value); + --tw-shadow-colored: var(--value); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.outline-\[10px\] { + outline-width: 10px; +} +.outline-\[length\:var$--outline$\] { + outline-width: var(--outline); +} +.outline-offset-\[10px\] { + outline-offset: 10px; +} +.outline-\[black\] { + outline-color: black; +} +.outline-\[color\:var$--outline$\] { + outline-color: var(--outline); +} +.ring-\[10px\] { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(10px + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} +.ring-\[length\:$var\(--value$\)\] { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc((var(--value)) + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} +.ring-\[\#76ad65\] { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(118 173 101 / var(--tw-ring-opacity)); +} +.ring-\[color\:var$--value$\] { + --tw-ring-color: var(--value); +} +.ring-opacity-\[var$--ring-opacity$\] { + --tw-ring-opacity: var(--ring-opacity); +} +.ring-offset-\[19rem\] { + --tw-ring-offset-width: 19rem; +} +.ring-offset-\[length\:var$--value$\] { + --tw-ring-offset-width: var(--value); +} +.ring-offset-\[\#76ad65\] { + --tw-ring-offset-color: #76ad65; +} +.ring-offset-\[\#ad672f\] { + --tw-ring-offset-color: #ad672f; +} +.ring-offset-\[color\:var$--value$\] { + --tw-ring-offset-color: var(--value); +} +.blur-\[15px\] { + --tw-blur: blur(15px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.brightness-\[300\%\] { + --tw-brightness: brightness(300%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.contrast-\[2\.4\] { + --tw-contrast: contrast(2.4); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.drop-shadow-\[0px_1px_2px_black\] { + --tw-drop-shadow: drop-shadow(0px 1px 2px black); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.grayscale-\[0\.55\] { + --tw-grayscale: grayscale(0.55); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.hue-rotate-\[0\.8turn\] { + --tw-hue-rotate: hue-rotate(0.8turn); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.invert-\[0\.75\] { + --tw-invert: invert(0.75); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.saturate-\[180\%\] { + --tw-saturate: saturate(180%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.sepia-\[0\.2\] { + --tw-sepia: sepia(0.2); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.backdrop-blur-\[11px\] { + --tw-backdrop-blur: blur(11px); + 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); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-contrast-\[0\.87\] { + --tw-backdrop-contrast: contrast(0.87); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-grayscale-\[0\.42\] { + --tw-backdrop-grayscale: grayscale(0.42); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-hue-rotate-\[1\.57rad\] { + --tw-backdrop-hue-rotate: hue-rotate(1.57rad); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-invert-\[0\.66\] { + --tw-backdrop-invert: invert(0.66); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-opacity-\[22\%\] { + --tw-backdrop-opacity: opacity(22%); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-saturate-\[144\%\] { + --tw-backdrop-saturate: saturate(144%); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-sepia-\[0\.38\] { + --tw-backdrop-sepia: sepia(0.38); + 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); +} +.transition-\[opacity\2c width\] { + transition-property: opacity, width; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.delay-\[var$--delay$\] { + transition-delay: var(--delay); +} +.duration-\[2s\] { + transition-duration: 2s; +} +.duration-\[var$--app-duration$\] { + transition-duration: var(--app-duration); +} +.will-change-\[top\2c left\] { + will-change: top, left; +} +.will-change-\[var$--will-change$\] { + will-change: var(--will-change); +} +.content-\[\'\>\'\] { + --tw-content: '>'; + content: var(--tw-content); +} +.content-\[\'hello\'\] { + --tw-content: 'hello'; + content: var(--tw-content); +} +.content-\[attr$content-before$\] { + --tw-content: attr(content-before); + content: var(--tw-content); +} +@media (min-width: 1024px) { + .lg\:grid-cols-\[200px\2c repeat$auto-fill\2c minmax\(15\%\2c 100px$\)\2c 300px\] { + grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; + } +} diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js index 70ed3a661a4d..d4a143ecb4b1 100644 --- a/tests/arbitrary-values.test.js +++ b/tests/arbitrary-values.test.js @@ -12,7 +12,9 @@ test('arbitrary values', () => { } return run('@tailwind utilities', config).then((result) => { - let expectedPath = path.resolve(__dirname, './arbitrary-values.test.css') + let expectedPath = env.OXIDE + ? path.resolve(__dirname, './arbitrary-values.oxide.test.css') + : path.resolve(__dirname, './arbitrary-values.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') expect(result.css).toMatchFormattedCss(expected) diff --git a/tests/basic-usage.oxide.test.css b/tests/basic-usage.oxide.test.css new file mode 100644 index 000000000000..a968af8aba86 --- /dev/null +++ b/tests/basic-usage.oxide.test.css @@ -0,0 +1,1090 @@ +*, +::before, +::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} +.container { + width: 100%; +} +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +.pointer-events-none { + pointer-events: none; +} +.invisible { + visibility: hidden; +} +.collapse { + visibility: collapse; +} +.absolute { + position: absolute; +} +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} +.inset-x-2 { + left: 0.5rem; + right: 0.5rem; +} +.inset-y-4 { + top: 1rem; + bottom: 1rem; +} +.bottom-12 { + bottom: 3rem; +} +.left-16 { + left: 4rem; +} +.right-8 { + right: 2rem; +} +.top-6 { + top: 1.5rem; +} +.isolate { + isolation: isolate; +} +.isolation-auto { + isolation: auto; +} +.z-30 { + z-index: 30; +} +.order-2 { + order: 2; +} +.order-last { + order: 9999; +} +.col-span-3 { + grid-column: span 3 / span 3; +} +.col-start-1 { + grid-column-start: 1; +} +.col-end-4 { + grid-column-end: 4; +} +.row-span-2 { + grid-row: span 2 / span 2; +} +.row-start-3 { + grid-row-start: 3; +} +.row-end-5 { + grid-row-end: 5; +} +.float-right { + float: right; +} +.clear-left { + clear: left; +} +.m-4 { + margin: 1rem; +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.mb-3 { + margin-bottom: 0.75rem; +} +.ml-4 { + margin-left: 1rem; +} +.mr-1 { + margin-right: 0.25rem; +} +.mt-0 { + margin-top: 0px; +} +.box-border { + box-sizing: border-box; +} +.inline-grid { + display: inline-grid; +} +.hidden { + display: none; +} +.aspect-square { + aspect-ratio: 1 / 1; +} +.aspect-video { + aspect-ratio: 16 / 9; +} +.h-16 { + height: 4rem; +} +.max-h-screen { + max-height: 100vh; +} +.min-h-0 { + min-height: 0px; +} +.w-12 { + width: 3rem; +} +.min-w-min { + min-width: min-content; +} +.max-w-full { + max-width: 100%; +} +.flex-1 { + flex: 1 1 0%; +} +.flex-shrink { + flex-shrink: 1; +} +.flex-shrink-0 { + flex-shrink: 0; +} +.shrink { + flex-shrink: 1; +} +.shrink-0 { + flex-shrink: 0; +} +.flex-grow { + flex-grow: 1; +} +.flex-grow-0 { + flex-grow: 0; +} +.grow { + flex-grow: 1; +} +.grow-0 { + flex-grow: 0; +} +.basis-7 { + flex-basis: 1.75rem; +} +.basis-auto { + flex-basis: auto; +} +.table-fixed { + table-layout: fixed; +} +.border-collapse { + border-collapse: collapse; +} +.border-spacing-4 { + --tw-border-spacing-x: 1rem; + --tw-border-spacing-y: 1rem; + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); +} +.border-spacing-x-6 { + --tw-border-spacing-x: 1.5rem; + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); +} +.border-spacing-y-8 { + --tw-border-spacing-y: 2rem; + border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y); +} +.origin-top-right { + transform-origin: top right; +} +.-translate-x-3 { + --tw-translate-x: -0.75rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.-translate-x-4 { + --tw-translate-x: -1rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.translate-x-5 { + --tw-translate-x: 1.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.translate-y-6 { + --tw-translate-y: 1.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.rotate-3 { + --tw-rotate: 3deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.skew-x-12 { + --tw-skew-x: 12deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.skew-y-12 { + --tw-skew-y: 12deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.scale-95 { + --tw-scale-x: 0.95; + --tw-scale-y: 0.95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.-scale-x-100 { + --tw-scale-x: -1; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.transform-gpu { + transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.transform-none { + transform: none; +} +.animate-none { + animation: none; +} +@keyframes spin { + to { + transform: rotate(360deg); + } +} +.animate-spin { + animation: spin 1s linear infinite; +} +.cursor-pointer { + cursor: pointer; +} +.touch-pan-x { + --tw-pan-x: pan-x; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} +.touch-pan-y { + --tw-pan-y: pan-y; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} +.touch-pan-up { + --tw-pan-y: pan-up; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} +.touch-pinch-zoom { + --tw-pinch-zoom: pinch-zoom; + touch-action: var(--tw-pan-x) var(--tw-pan-y) var(--tw-pinch-zoom); +} +.touch-manipulation { + touch-action: manipulation; +} +.select-none { + user-select: none; +} +.resize-none { + resize: none; +} +.snap-x { + scroll-snap-type: x var(--tw-scroll-snap-strictness); +} +.snap-mandatory { + --tw-scroll-snap-strictness: mandatory; +} +.snap-center { + scroll-snap-align: center; +} +.snap-always { + scroll-snap-stop: always; +} +.scroll-mt-6 { + scroll-margin-top: 1.5rem; +} +.scroll-p-6 { + scroll-padding: 1.5rem; +} +.list-inside { + list-style-position: inside; +} +.list-disc { + list-style-type: disc; +} +.appearance-none { + appearance: none; +} +.columns-1 { + columns: 1; +} +.columns-md { + columns: 28rem; +} +.break-before-page { + break-before: page; +} +.break-inside-avoid-column { + break-inside: avoid-column; +} +.break-after-auto { + break-after: auto; +} +.auto-cols-min { + grid-auto-columns: min-content; +} +.grid-flow-row { + grid-auto-flow: row; +} +.auto-rows-max { + grid-auto-rows: max-content; +} +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} +.grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); +} +.flex-row-reverse { + flex-direction: row-reverse; +} +.flex-wrap { + flex-wrap: wrap; +} +.place-content-start { + place-content: start; +} +.place-items-end { + place-items: end; +} +.content-center { + align-content: center; +} +.items-start { + align-items: flex-start; +} +.justify-center { + justify-content: center; +} +.justify-items-end { + justify-items: end; +} +.gap-4 { + gap: 1rem; +} +.gap-x-2 { + column-gap: 0.5rem; +} +.gap-y-3 { + row-gap: 0.75rem; +} +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} +.space-y-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); +} +.space-y-reverse > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 1; +} +.space-x-reverse > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 1; +} +.divide-x-0 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(0px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(2px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-y-0 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(0px * var(--tw-divide-y-reverse)); +} +.divide-y-4 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(4px * var(--tw-divide-y-reverse)); +} +.divide-dotted > :not([hidden]) ~ :not([hidden]) { + border-style: dotted; +} +.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity)); +} +.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 0.5; +} +.place-self-center { + place-self: center; +} +.self-end { + align-self: flex-end; +} +.justify-self-start { + justify-self: start; +} +.overflow-hidden { + overflow: hidden; +} +.overscroll-contain { + overscroll-behavior: contain; +} +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.overflow-ellipsis { + text-overflow: ellipsis; +} +.whitespace-nowrap { + white-space: nowrap; +} +.break-words { + overflow-wrap: break-word; +} +.rounded-md { + border-radius: 0.375rem; +} +.border { + border-width: 1px; +} +.border-2 { + border-width: 2px; +} +.border-x-4 { + border-left-width: 4px; + border-right-width: 4px; +} +.border-y-4 { + border-top-width: 4px; + border-bottom-width: 4px; +} +.border-b-4 { + border-bottom-width: 4px; +} +.border-t { + border-top-width: 1px; +} +.border-solid { + border-style: solid; +} +.border-hidden { + border-style: hidden; +} +.border-black { + --tw-border-opacity: 1; + border-color: rgb(0 0 0 / var(--tw-border-opacity)); +} +.border-x-black { + --tw-border-opacity: 1; + border-left-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-right-color: rgb(0 0 0 / var(--tw-border-opacity)); +} +.border-y-black { + --tw-border-opacity: 1; + border-top-color: rgb(0 0 0 / var(--tw-border-opacity)); + border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); +} +.border-b-black { + --tw-border-opacity: 1; + border-bottom-color: rgb(0 0 0 / var(--tw-border-opacity)); +} +.border-l-black { + --tw-border-opacity: 1; + border-left-color: rgb(0 0 0 / var(--tw-border-opacity)); +} +.border-r-black { + --tw-border-opacity: 1; + border-right-color: rgb(0 0 0 / var(--tw-border-opacity)); +} +.border-t-black { + --tw-border-opacity: 1; + border-top-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: rgb(34 197 94 / var(--tw-bg-opacity)); +} +.bg-opacity-20 { + --tw-bg-opacity: 0.2; +} +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} +.from-red-300 { + --tw-gradient-from: #fca5a5; + --tw-gradient-to: rgb(252 165 165 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.via-purple-200 { + --tw-gradient-to: rgb(233 213 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to); +} +.to-blue-400 { + --tw-gradient-to: #60a5fa; +} +.decoration-slice { + box-decoration-break: slice; +} +.decoration-clone { + box-decoration-break: clone; +} +.box-decoration-slice { + box-decoration-break: slice; +} +.box-decoration-clone { + box-decoration-break: clone; +} +.bg-cover { + background-size: cover; +} +.bg-local { + background-attachment: local; +} +.bg-clip-border { + background-clip: border-box; +} +.bg-top { + background-position: top; +} +.bg-no-repeat { + background-repeat: no-repeat; +} +.bg-origin-border { + background-origin: border-box; +} +.bg-origin-padding { + background-origin: padding-box; +} +.bg-origin-content { + background-origin: content-box; +} +.fill-current { + fill: currentColor; +} +.stroke-current { + stroke: currentColor; +} +.stroke-2 { + stroke-width: 2; +} +.object-cover { + object-fit: cover; +} +.object-bottom { + object-position: bottom; +} +.p-4 { + padding: 1rem; +} +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.pb-3 { + padding-bottom: 0.75rem; +} +.pl-4 { + padding-left: 1rem; +} +.pr-2 { + padding-right: 0.5rem; +} +.pt-1 { + padding-top: 0.25rem; +} +.text-center { + text-align: center; +} +.-indent-12 { + text-indent: -3rem; +} +.indent-6 { + text-indent: 1.5rem; +} +.align-middle { + vertical-align: middle; +} +.font-sans { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; +} +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} +.font-medium { + font-weight: 500; +} +.uppercase { + text-transform: uppercase; +} +.not-italic { + font-style: normal; +} +.ordinal { + --tw-ordinal: ordinal; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.diagonal-fractions { + --tw-numeric-fraction: diagonal-fractions; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.leading-5 { + line-height: 1.25rem; +} +.leading-relaxed { + line-height: 1.625; +} +.tracking-tight { + letter-spacing: -0.025em; +} +.text-indigo-500 { + --tw-text-opacity: 1; + color: rgb(99 102 241 / var(--tw-text-opacity)); +} +.text-opacity-10 { + --tw-text-opacity: 0.1; +} +.underline { + text-decoration-line: underline; +} +.decoration-red-600 { + text-decoration-color: #dc2626; +} +.decoration-solid { + text-decoration-style: solid; +} +.decoration-1 { + text-decoration-thickness: 1px; +} +.decoration-2 { + text-decoration-thickness: 2px; +} +.underline-offset-1 { + text-underline-offset: 1px; +} +.underline-offset-2 { + text-underline-offset: 2px; +} +.antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.placeholder-green-300::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(134 239 172 / var(--tw-placeholder-opacity)); +} +.placeholder-opacity-60::placeholder { + --tw-placeholder-opacity: 0.6; +} +.caret-red-600 { + caret-color: #dc2626; +} +.accent-red-600 { + accent-color: #dc2626; +} +.opacity-90 { + opacity: 0.9; +} +.bg-blend-darken { + background-blend-mode: darken; +} +.bg-blend-difference { + background-blend-mode: difference; +} +.mix-blend-multiply { + mix-blend-mode: multiply; +} +.mix-blend-saturation { + mix-blend-mode: saturation; +} +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.shadow-black { + --tw-shadow-color: #000; + --tw-shadow: var(--tw-shadow-colored); +} +.shadow-blue-100\/10 { + --tw-shadow-color: rgb(219 234 254 / 0.1); + --tw-shadow: var(--tw-shadow-colored); +} +.shadow-red-500\/25 { + --tw-shadow-color: rgb(239 68 68 / 0.25); + --tw-shadow: var(--tw-shadow-colored); +} +.outline-none { + outline: 2px solid transparent; + outline-offset: 2px; +} +.outline { + outline-style: solid; +} +.outline-dashed { + outline-style: dashed; +} +.outline-4 { + outline-width: 4px; +} +.-outline-offset-2 { + outline-offset: -2px; +} +.outline-offset-2 { + outline-offset: 2px; +} +.outline-black { + outline-color: #000; +} +.ring { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} +.ring-4 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} +.ring-white { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); +} +.ring-opacity-40 { + --tw-ring-opacity: 0.4; +} +.ring-offset-2 { + --tw-ring-offset-width: 2px; +} +.ring-offset-blue-300 { + --tw-ring-offset-color: #93c5fd; +} +.blur-md { + --tw-blur: blur(12px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.brightness-150 { + --tw-brightness: brightness(1.5); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.contrast-50 { + --tw-contrast: contrast(0.5); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.drop-shadow-md { + --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-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.grayscale { + --tw-grayscale: grayscale(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.hue-rotate-60 { + --tw-hue-rotate: hue-rotate(60deg); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.invert { + --tw-invert: invert(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.saturate-200 { + --tw-saturate: saturate(2); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.sepia { + --tw-sepia: sepia(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.filter-none { + filter: none; +} +.backdrop-blur-lg { + --tw-backdrop-blur: blur(16px); + 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(0.5); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-contrast-0 { + --tw-backdrop-contrast: contrast(0); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-grayscale { + --tw-backdrop-grayscale: grayscale(100%); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-hue-rotate-90 { + --tw-backdrop-hue-rotate: hue-rotate(90deg); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-invert { + --tw-backdrop-invert: invert(100%); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-opacity-75 { + --tw-backdrop-opacity: opacity(0.75); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-saturate-150 { + --tw-backdrop-saturate: saturate(1.5); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-sepia { + --tw-backdrop-sepia: sepia(100%); + 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 { + 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-none { + backdrop-filter: none; +} +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.delay-300 { + transition-delay: 300ms; +} +.duration-200 { + transition-duration: 200ms; +} +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} +.will-change-scroll { + will-change: scroll-position; +} +.will-change-transform { + will-change: transform; +} +.content-none { + --tw-content: none; + content: var(--tw-content); +} diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 986838c7b9f0..452753bdb868 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -19,7 +19,9 @@ test('basic usage', () => { ` return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './basic-usage.test.css') + let expectedPath = env.OXIDE + ? path.resolve(__dirname, './basic-usage.oxide.test.css') + : path.resolve(__dirname, './basic-usage.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') expect(result.css).toMatchFormattedCss(expected) diff --git a/tests/raw-content.oxide.test.css b/tests/raw-content.oxide.test.css new file mode 100644 index 000000000000..b97386be61b1 --- /dev/null +++ b/tests/raw-content.oxide.test.css @@ -0,0 +1,778 @@ +.container { + width: 100%; +} +@media (min-width: 640px) { + .container { + max-width: 640px; + } +} +@media (min-width: 768px) { + .container { + max-width: 768px; + } +} +@media (min-width: 1024px) { + .container { + max-width: 1024px; + } +} +@media (min-width: 1280px) { + .container { + max-width: 1280px; + } +} +@media (min-width: 1536px) { + .container { + max-width: 1536px; + } +} +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} +.pointer-events-none { + pointer-events: none; +} +.invisible { + visibility: hidden; +} +.collapse { + visibility: collapse; +} +.absolute { + position: absolute; +} +.inset-0 { + top: 0px; + right: 0px; + bottom: 0px; + left: 0px; +} +.inset-x-2 { + left: 0.5rem; + right: 0.5rem; +} +.inset-y-4 { + top: 1rem; + bottom: 1rem; +} +.bottom-12 { + bottom: 3rem; +} +.left-16 { + left: 4rem; +} +.right-8 { + right: 2rem; +} +.top-6 { + top: 1.5rem; +} +.isolate { + isolation: isolate; +} +.isolation-auto { + isolation: auto; +} +.z-30 { + z-index: 30; +} +.order-2 { + order: 2; +} +.order-last { + order: 9999; +} +.col-span-3 { + grid-column: span 3 / span 3; +} +.col-start-1 { + grid-column-start: 1; +} +.col-end-4 { + grid-column-end: 4; +} +.row-span-2 { + grid-row: span 2 / span 2; +} +.row-start-3 { + grid-row-start: 3; +} +.row-end-5 { + grid-row-end: 5; +} +.float-right { + float: right; +} +.clear-left { + clear: left; +} +.m-4 { + margin: 1rem; +} +.mx-auto { + margin-left: auto; + margin-right: auto; +} +.my-2 { + margin-top: 0.5rem; + margin-bottom: 0.5rem; +} +.mb-3 { + margin-bottom: 0.75rem; +} +.ml-4 { + margin-left: 1rem; +} +.mr-1 { + margin-right: 0.25rem; +} +.mt-0 { + margin-top: 0px; +} +.box-border { + box-sizing: border-box; +} +.inline-grid { + display: inline-grid; +} +.hidden { + display: none; +} +.h-16 { + height: 4rem; +} +.max-h-screen { + max-height: 100vh; +} +.min-h-0 { + min-height: 0px; +} +.w-12 { + width: 3rem; +} +.min-w-min { + min-width: min-content; +} +.max-w-full { + max-width: 100%; +} +.flex-1 { + flex: 1 1 0%; +} +.flex-shrink { + flex-shrink: 1; +} +.flex-shrink-0 { + flex-shrink: 0; +} +.flex-grow { + flex-grow: 1; +} +.flex-grow-0 { + flex-grow: 0; +} +.table-fixed { + table-layout: fixed; +} +.border-collapse { + border-collapse: collapse; +} +.origin-top-right { + transform-origin: top right; +} +.-translate-x-3 { + --tw-translate-x: -0.75rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.-translate-x-4 { + --tw-translate-x: -1rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.translate-x-5 { + --tw-translate-x: 1.25rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.translate-y-6 { + --tw-translate-y: 1.5rem; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.rotate-3 { + --tw-rotate: 3deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.skew-x-12 { + --tw-skew-x: 12deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.skew-y-12 { + --tw-skew-y: 12deg; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.scale-95 { + --tw-scale-x: 0.95; + --tw-scale-y: 0.95; + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.transform { + transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.transform-gpu { + transform: translate3d(var(--tw-translate-x), var(--tw-translate-y), 0) rotate(var(--tw-rotate)) + skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) + scaleY(var(--tw-scale-y)); +} +.animate-none { + animation: none; +} +@keyframes spin { + to { + transform: rotate(360deg); + } +} +.animate-spin { + animation: spin 1s linear infinite; +} +.cursor-pointer { + cursor: pointer; +} +.select-none { + user-select: none; +} +.resize-none { + resize: none; +} +.list-inside { + list-style-position: inside; +} +.list-disc { + list-style-type: disc; +} +.appearance-none { + appearance: none; +} +.auto-cols-min { + grid-auto-columns: min-content; +} +.grid-flow-row { + grid-auto-flow: row; +} +.auto-rows-max { + grid-auto-rows: max-content; +} +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} +.grid-rows-3 { + grid-template-rows: repeat(3, minmax(0, 1fr)); +} +.flex-row-reverse { + flex-direction: row-reverse; +} +.flex-wrap { + flex-wrap: wrap; +} +.place-content-start { + place-content: start; +} +.place-items-end { + place-items: end; +} +.content-center { + align-content: center; +} +.items-start { + align-items: flex-start; +} +.justify-center { + justify-content: center; +} +.justify-items-end { + justify-items: end; +} +.gap-4 { + gap: 1rem; +} +.gap-x-2 { + column-gap: 0.5rem; +} +.gap-y-3 { + row-gap: 0.75rem; +} +.space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(1rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(1rem * calc(1 - var(--tw-space-x-reverse))); +} +.space-y-3 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); +} +.space-y-reverse > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 1; +} +.space-x-reverse > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 1; +} +.divide-x-0 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(0px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(0px * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-x-reverse: 0; + border-inline-end-width: calc(2px * var(--tw-divide-x-reverse)); + border-inline-start-width: calc(2px * calc(1 - var(--tw-divide-x-reverse))); +} +.divide-y-0 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(0px * var(--tw-divide-y-reverse)); +} +.divide-y-4 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-y-reverse: 0; + border-top-width: calc(4px * calc(1 - var(--tw-divide-y-reverse))); + border-bottom-width: calc(4px * var(--tw-divide-y-reverse)); +} +.divide-dotted > :not([hidden]) ~ :not([hidden]) { + border-style: dotted; +} +.divide-gray-200 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-divide-opacity)); +} +.divide-opacity-50 > :not([hidden]) ~ :not([hidden]) { + --tw-divide-opacity: 0.5; +} +.place-self-center { + place-self: center; +} +.self-end { + align-self: flex-end; +} +.justify-self-start { + justify-self: start; +} +.overflow-hidden { + overflow: hidden; +} +.overscroll-contain { + overscroll-behavior: contain; +} +.scroll-smooth { + scroll-behavior: smooth; +} +.truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} +.overflow-ellipsis { + text-overflow: ellipsis; +} +.whitespace-nowrap { + white-space: nowrap; +} +.break-words { + overflow-wrap: break-word; +} +.rounded-md { + border-radius: 0.375rem; +} +.border { + border-width: 1px; +} +.border-2 { + border-width: 2px; +} +.border-solid { + border-style: solid; +} +.border-black { + --tw-border-opacity: 1; + 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: rgb(34 197 94 / var(--tw-bg-opacity)); +} +.bg-opacity-20 { + --tw-bg-opacity: 0.2; +} +.bg-gradient-to-r { + background-image: linear-gradient(to right, var(--tw-gradient-stops)); +} +.from-red-300 { + --tw-gradient-from: #fca5a5; + --tw-gradient-to: rgb(252 165 165 / 0); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} +.via-purple-200 { + --tw-gradient-to: rgb(233 213 255 / 0); + --tw-gradient-stops: var(--tw-gradient-from), #e9d5ff, var(--tw-gradient-to); +} +.to-blue-400 { + --tw-gradient-to: #60a5fa; +} +.decoration-slice { + box-decoration-break: slice; +} +.decoration-clone { + box-decoration-break: clone; +} +.bg-cover { + background-size: cover; +} +.bg-local { + background-attachment: local; +} +.bg-clip-border { + background-clip: border-box; +} +.bg-top { + background-position: top; +} +.bg-no-repeat { + background-repeat: no-repeat; +} +.bg-origin-border { + background-origin: border-box; +} +.bg-origin-padding { + background-origin: padding-box; +} +.bg-origin-content { + background-origin: content-box; +} +.fill-current { + fill: currentColor; +} +.stroke-current { + stroke: currentColor; +} +.stroke-2 { + stroke-width: 2; +} +.object-cover { + object-fit: cover; +} +.object-bottom { + object-position: bottom; +} +.p-4 { + padding: 1rem; +} +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} +.pb-3 { + padding-bottom: 0.75rem; +} +.pl-4 { + padding-left: 1rem; +} +.pr-2 { + padding-right: 0.5rem; +} +.pt-1 { + padding-top: 0.25rem; +} +.text-center { + text-align: center; +} +.align-middle { + vertical-align: middle; +} +.font-sans { + font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, + 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol', 'Noto Color Emoji'; +} +.text-2xl { + font-size: 1.5rem; + line-height: 2rem; +} +.font-medium { + font-weight: 500; +} +.uppercase { + text-transform: uppercase; +} +.not-italic { + font-style: normal; +} +.ordinal { + --tw-ordinal: ordinal; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.tabular-nums { + --tw-numeric-spacing: tabular-nums; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.diagonal-fractions { + --tw-numeric-fraction: diagonal-fractions; + font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) + var(--tw-numeric-spacing) var(--tw-numeric-fraction); +} +.leading-5 { + line-height: 1.25rem; +} +.leading-relaxed { + line-height: 1.625; +} +.tracking-tight { + letter-spacing: -0.025em; +} +.text-indigo-500 { + --tw-text-opacity: 1; + color: rgb(99 102 241 / var(--tw-text-opacity)); +} +.text-opacity-10 { + --tw-text-opacity: 0.1; +} +.underline { + text-decoration-line: underline; +} +.antialiased { + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.placeholder-green-300::placeholder { + --tw-placeholder-opacity: 1; + color: rgb(134 239 172 / var(--tw-placeholder-opacity)); +} +.placeholder-opacity-60::placeholder { + --tw-placeholder-opacity: 0.6; +} +.opacity-90 { + opacity: 0.9; +} +.bg-blend-darken { + background-blend-mode: darken; +} +.bg-blend-difference { + background-blend-mode: difference; +} +.mix-blend-multiply { + mix-blend-mode: multiply; +} +.mix-blend-saturation { + mix-blend-mode: saturation; +} +.shadow { + --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), + 0 4px 6px -4px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.ring { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} +.ring-4 { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) + var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) + var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} +.ring-white { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity)); +} +.ring-opacity-40 { + --tw-ring-opacity: 0.4; +} +.ring-offset-2 { + --tw-ring-offset-width: 2px; +} +.ring-offset-blue-300 { + --tw-ring-offset-color: #93c5fd; +} +.blur-md { + --tw-blur: blur(12px); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.brightness-150 { + --tw-brightness: brightness(1.5); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.contrast-50 { + --tw-contrast: contrast(0.5); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.drop-shadow-md { + --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-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.grayscale { + --tw-grayscale: grayscale(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.hue-rotate-60 { + --tw-hue-rotate: hue-rotate(60deg); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.invert { + --tw-invert: invert(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.saturate-200 { + --tw-saturate: saturate(2); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.sepia { + --tw-sepia: sepia(100%); + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) + var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} +.filter-none { + filter: none; +} +.backdrop-blur-lg { + --tw-backdrop-blur: blur(16px); + 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(0.5); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-contrast-0 { + --tw-backdrop-contrast: contrast(0); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-grayscale { + --tw-backdrop-grayscale: grayscale(100%); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-hue-rotate-90 { + --tw-backdrop-hue-rotate: hue-rotate(90deg); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-invert { + --tw-backdrop-invert: invert(100%); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-opacity-75 { + --tw-backdrop-opacity: opacity(0.75); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-saturate-150 { + --tw-backdrop-saturate: saturate(1.5); + backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) + var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) + var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); +} +.backdrop-sepia { + --tw-backdrop-sepia: sepia(100%); + 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 { + 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-none { + backdrop-filter: none; +} +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, + opacity, box-shadow, transform, filter, backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.transition-all { + transition-property: all; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} +.delay-300 { + transition-delay: 300ms; +} +.duration-200 { + transition-duration: 200ms; +} +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} diff --git a/tests/raw-content.test.js b/tests/raw-content.test.js index 199acc1206cc..c863bbb0c3bd 100644 --- a/tests/raw-content.test.js +++ b/tests/raw-content.test.js @@ -2,6 +2,7 @@ import fs from 'fs' import path from 'path' import { run, css } from './util/run' +import { env } from '../src/lib/sharedState' it('raw content', () => { let config = { @@ -15,7 +16,9 @@ it('raw content', () => { ` return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './raw-content.test.css') + let expectedPath = env.OXIDE + ? path.resolve(__dirname, './raw-content.oxide.test.css') + : path.resolve(__dirname, './raw-content.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') expect(result.css).toMatchFormattedCss(expected) diff --git a/tests/variants.oxide.test.css b/tests/variants.oxide.test.css new file mode 100644 index 000000000000..3b6387342faa --- /dev/null +++ b/tests/variants.oxide.test.css @@ -0,0 +1,954 @@ +*, +::before, +::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; +} +.first-letter\:text-2xl::first-letter { + font-size: 1.5rem; + line-height: 2rem; +} +.first-letter\:text-red-500::first-letter { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); +} +.first-line\:bg-yellow-300::first-line { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); +} +.first-line\:underline::first-line { + text-decoration-line: underline; +} +.marker\:text-lg *::marker { + font-size: 1.125rem; + line-height: 1.75rem; +} +.marker\:text-red-500 *::marker { + color: rgb(239 68 68); +} +.marker\:text-lg::marker { + font-size: 1.125rem; + line-height: 1.75rem; +} +.marker\:text-red-500::marker { + color: rgb(239 68 68); +} +.selection\:bg-blue-500 *::selection { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} +.selection\:text-white *::selection { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.selection\:bg-blue-500::selection { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} +.selection\:text-white::selection { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.file\:bg-blue-500::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgb(59 130 246 / var(--tw-bg-opacity)); +} +.file\:text-white::file-selector-button { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} +.placeholder\:font-bold::placeholder { + font-weight: 700; +} +.placeholder\:text-red-500::placeholder { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity)); +} +.backdrop\:shadow-md::backdrop { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.before\:block::before { + content: var(--tw-content); + display: block; +} +.before\:bg-red-500::before { + content: var(--tw-content); + --tw-bg-opacity: 1; + background-color: rgb(239 68 68 / var(--tw-bg-opacity)); +} +.after\:flex::after { + content: var(--tw-content); + display: flex; +} +.after\:uppercase::after { + content: var(--tw-content); + text-transform: uppercase; +} +.first\:shadow-md:first-child { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.open\:bg-red-200[open] { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} +.default\:shadow-md:default { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.optional\:shadow-md:optional { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +@keyframes spin { + to { + transform: rotate(360deg); + } +} +.hover\:animate-spin:hover { + animation: spin 1s linear infinite; +} +.hover\:shadow-md:hover { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.file\:hover\:bg-blue-600:hover::file-selector-button { + --tw-bg-opacity: 1; + background-color: rgb(37 99 235 / var(--tw-bg-opacity)); +} +.open\:hover\:bg-red-200:hover[open] { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} +.focus\:shadow-md:focus { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.focus\:hover\:shadow-md:hover:focus { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.enabled\:shadow-md:enabled { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group[open] .group-open\:bg-red-200 { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} +.group:default .group-default\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:optional .group-optional\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group[open]:hover .group-open\:group-hover\:space-x-2 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-inline-end: calc(0.5rem * var(--tw-space-x-reverse)); + margin-inline-start: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); +} +.group:focus .group-focus\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group[open]:focus .group-open\:group-focus\:bg-red-200 { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} +.group:focus:hover .group-focus\:group-hover\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.group:enabled .group-enabled\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:optional ~ .peer-optional\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +.peer:enabled ~ .peer-enabled\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (prefers-contrast: more) { + .contrast-more\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +@media (prefers-contrast: less) { + .contrast-less\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +.dark .dark\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); +} +@media print { + .print\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +@media (min-width: 640px) { + .sm\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } +} +@media (min-width: 1024px) { + @keyframes spin { + to { + transform: rotate(360deg); + } + } + .lg\:animate-spin { + animation: spin 1s linear infinite; + } + .lg\:shadow-md { + --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + 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 rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); + --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), + 0 2px 4px -2px var(--tw-shadow-color); + box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), + var(--tw-shadow); + } + } +} +@media (orientation: portrait) { + .portrait\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} +@media (orientation: landscape) { + .landscape\:bg-yellow-300 { + --tw-bg-opacity: 1; + background-color: rgb(253 224 71 / var(--tw-bg-opacity)); + } +} diff --git a/tests/variants.test.js b/tests/variants.test.js index 7ed5dc5c2f20..6490d9a461ad 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -3,6 +3,7 @@ import path from 'path' import postcss from 'postcss' import { run, css, html, defaults } from './util/run' +import { env } from '../src/lib/sharedState' test('variants', () => { let config = { @@ -18,7 +19,9 @@ test('variants', () => { ` return run(input, config).then((result) => { - let expectedPath = path.resolve(__dirname, './variants.test.css') + let expectedPath = env.OXIDE + ? path.resolve(__dirname, './variants.oxide.test.css') + : path.resolve(__dirname, './variants.test.css') let expected = fs.readFileSync(expectedPath, 'utf8') expect(result.css).toMatchFormattedCss(expected) From 1525c150042d672e2aaefb9b20aa5ae9a837810a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 16 Jan 2023 18:50:15 +0100 Subject: [PATCH 14/14] drop oxide specific test job The normal `npm run test` will already include the non-oxide and oxide version when running tests. --- .github/workflows/nodejs.yml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 0a2212e2e6cb..e4aebfef0151 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -61,12 +61,9 @@ jobs: - name: Build Tailwind CSS run: npx turbo run oxide:build --filter=// - - name: Test (default) + - name: Test run: npx turbo run test --filter=// - - name: Test (oxide) - run: OXIDE=1 npx turbo run test --filter=// - lint: runs-on: ubuntu-latest