archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity
tailwindcss/tests/any-type.test.js
Robin Malfait 94d6e7299a
Implement fallback plugins when arbitrary values result in css from multiple plugins (#9376) 
* use test with non-any type plugin

* choose backgroundSize over backgroundPosition

Ensure that `backgroundColor` can take any value

* add tests to verify fallback plugins

* implement fallback plugins

Whenever an arbitrary value results in css from multiple plugins we
first try to resolve a falback plugin.

The fallback mechanism works like this:

- If A has type `any` and B has type `color`, then B should win.

  > This is because `A` will match *anything*, but the more precise type
    should win instead. E.g.: `backgroundColor` has the type `any` so
    `bg-[100px_200px]` would match both the `backgroundColor` and
    `backgroundSize` but `backgroundSize` matched because of a specific
    type and not because of the `any` type.
- If A has type `length` and B has type `[length, { disambiguate: true }]`, then B should win.
  > This is because `B` marked the `length` as the plugin that should
    win in case a clash happens.

* Add any type to a handful of plugins

Needs tests tho

* Add any type to `border-{x,y,t,r,b,l}` plugins

* Add test for any type

* Split on multiple lines

* fixup

* add tests for implicit `any` types

* rename `disambiguate` to `preferOnConflict`

* update tests to reflect `any` types a bit better

* update changelog

* annotate any-type test with a bit more information

Just for future debugging reasons!

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-09-29 17:26:27 +02:00

762 lines
31 KiB
JavaScript
Raw Blame History

import { run, html, css } from './util/run'
// 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
// you, silly) introduced a new plugin that conflicts with an existing plugin that has (either
// implicit or explicit) an `any` type.
//
// Now it is your job to decide which one should win, and mark that one with
// ```diff
// - 'any'
// + ['any', { preferOnConflict: true }]
// ```
// in the corePlugins.js file.
//
// You probably want to let the original one win for backwards compatible reasons.
//
// Good luck!
test('any types are set on correct plugins', () => {
let config = {
content: [
{
raw: html`
<div class="inset-[var(--any-value)]"></div>
<div class="inset-x-[var(--any-value)]"></div>
<div class="inset-y-[var(--any-value)]"></div>
<div class="top-[var(--any-value)]"></div>
<div class="right-[var(--any-value)]"></div>
<div class="bottom-[var(--any-value)]"></div>
<div class="left-[var(--any-value)]"></div>
<div class="z-[var(--any-value)]"></div>
<div class="order-[var(--any-value)]"></div>
<div class="col-[var(--any-value)]"></div>
<div class="col-start-[var(--any-value)]"></div>
<div class="col-end-[var(--any-value)]"></div>
<div class="row-[var(--any-value)]"></div>
<div class="row-start-[var(--any-value)]"></div>
<div class="row-end-[var(--any-value)]"></div>
<div class="m-[var(--any-value)]"></div>
<div class="mx-[var(--any-value)]"></div>
<div class="my-[var(--any-value)]"></div>
<div class="mt-[var(--any-value)]"></div>
<div class="mr-[var(--any-value)]"></div>
<div class="mb-[var(--any-value)]"></div>
<div class="ml-[var(--any-value)]"></div>
<div class="aspect-[var(--any-value)]"></div>
<div class="h-[var(--any-value)]"></div>
<div class="max-h-[var(--any-value)]"></div>
<div class="min-h-[var(--any-value)]"></div>
<div class="w-[var(--any-value)]"></div>
<div class="max-w-[var(--any-value)]"></div>
<div class="min-w-[var(--any-value)]"></div>
<div class="flex-[var(--any-value)]"></div>
<div class="flex-shrink-[var(--any-value)]"></div>
<div class="shrink-[var(--any-value)]"></div>
<div class="flex-grow-[var(--any-value)]"></div>
<div class="grow-[var(--any-value)]"></div>
<div class="basis-[var(--any-value)]"></div>
<div class="border-spacing-[var(--any-value)]"></div>
<div class="border-spacing-x-[var(--any-value)]"></div>
<div class="border-spacing-y-[var(--any-value)]"></div>
<div class="origin-[var(--any-value)]"></div>
<div class="translate-x-[var(--any-value)]"></div>
<div class="translate-y-[var(--any-value)]"></div>
<div class="rotate-[var(--any-value)]"></div>
<div class="skew-[var(--any-value)]"></div>
<div class="scale-[var(--any-value)]"></div>
<div class="scale-x-[var(--any-value)]"></div>
<div class="scale-y-[var(--any-value)]"></div>
<div class="animate-[var(--any-value)]"></div>
<div class="cursor-[var(--any-value)]"></div>
<div class="scroll-m-[var(--any-value)]"></div>
<div class="scroll-mx-[var(--any-value)]"></div>
<div class="scroll-my-[var(--any-value)]"></div>
<div class="scroll-mt-[var(--any-value)]"></div>
<div class="scroll-mr-[var(--any-value)]"></div>
<div class="scroll-mb-[var(--any-value)]"></div>
<div class="scroll-ml-[var(--any-value)]"></div>
<div class="scroll-p-[var(--any-value)]"></div>
<div class="scroll-px-[var(--any-value)]"></div>
<div class="scroll-py-[var(--any-value)]"></div>
<div class="scroll-pt-[var(--any-value)]"></div>
<div class="scroll-pr-[var(--any-value)]"></div>
<div class="scroll-pb-[var(--any-value)]"></div>
<div class="scroll-pl-[var(--any-value)]"></div>
<div class="list-[var(--any-value)]"></div>
<div class="columns-[var(--any-value)]"></div>
<div class="auto-cols-[var(--any-value)]"></div>
<div class="auto-rows-[var(--any-value)]"></div>
<div class="grid-cols-[var(--any-value)]"></div>
<div class="grid-rows-[var(--any-value)]"></div>
<div class="gap-[var(--any-value)]"></div>
<div class="gap-x-[var(--any-value)]"></div>
<div class="gap-y-[var(--any-value)]"></div>
<div class="space-x-[var(--any-value)]"></div>
<div class="space-y-[var(--any-value)]"></div>
<div class="divide-[var(--any-value)]"></div>
<div class="divide-y-[var(--any-value)]"></div>
<div class="divide-y-[var(--any-value)]"></div>
<div class="divide-opacity-[var(--any-value)]"></div>
<div class="rounded-[var(--any-value)]"></div>
<div class="rounded-t-[var(--any-value)]"></div>
<div class="rounded-r-[var(--any-value)]"></div>
<div class="rounded-b-[var(--any-value)]"></div>
<div class="rounded-l-[var(--any-value)]"></div>
<div class="rounded-tl-[var(--any-value)]"></div>
<div class="rounded-tr-[var(--any-value)]"></div>
<div class="rounded-br-[var(--any-value)]"></div>
<div class="rounded-bl-[var(--any-value)]"></div>
<div class="border-[var(--any-value)]"></div>
<div class="border-x-[var(--any-value)]"></div>
<div class="border-y-[var(--any-value)]"></div>
<div class="border-t-[var(--any-value)]"></div>
<div class="border-r-[var(--any-value)]"></div>
<div class="border-b-[var(--any-value)]"></div>
<div class="border-l-[var(--any-value)]"></div>
<div class="border-opacity-[var(--any-value)]"></div>
<div class="bg-[var(--any-value)]"></div>
<div class="bg-opacity-[var(--any-value)]"></div>
<div class="from-[var(--any-value)]"></div>
<div class="via-[var(--any-value)]"></div>
<div class="to-[var(--any-value)]"></div>
<div class="fill-[var(--any-value)]"></div>
<div class="stroke-[var(--any-value)]"></div>
<div class="object-[var(--any-value)]"></div>
<div class="p-[var(--any-value)]"></div>
<div class="px-[var(--any-value)]"></div>
<div class="py-[var(--any-value)]"></div>
<div class="pt-[var(--any-value)]"></div>
<div class="pr-[var(--any-value)]"></div>
<div class="pb-[var(--any-value)]"></div>
<div class="pl-[var(--any-value)]"></div>
<div class="indent-[var(--any-value)]"></div>
<div class="align-[var(--any-value)]"></div>
<div class="text-[var(--any-value)]"></div>
<div class="font-[var(--any-value)]"></div>
<div class="leading-[var(--any-value)]"></div>
<div class="tracking-[var(--any-value)]"></div>
<div class="text-opacity-[var(--any-value)]"></div>
<div class="decoration-[var(--any-value)]"></div>
<div class="underline-offset-[var(--any-value)]"></div>
<div class="placeholder-[var(--any-value)]"></div>
<div class="placeholder-opacity-[var(--any-value)]"></div>
<div class="caret-[var(--any-value)]"></div>
<div class="accent-[var(--any-value)]"></div>
<div class="opacity-[var(--any-value)]"></div>
<div class="shadow-[var(--any-value)]"></div>
<div class="outline-[var(--any-value)]"></div>
<div class="outline-offset-[var(--any-value)]"></div>
<div class="ring-[var(--any-value)]"></div>
<div class="ring-opacity-[var(--any-value)]"></div>
<div class="ring-offset-[var(--any-value)]"></div>
<div class="blur-[var(--any-value)]"></div>
<div class="brightness-[var(--any-value)]"></div>
<div class="contrast-[var(--any-value)]"></div>
<div class="drop-shadow-[var(--any-value)]"></div>
<div class="grayscale-[var(--any-value)]"></div>
<div class="hue-rotate-[var(--any-value)]"></div>
<div class="invert-[var(--any-value)]"></div>
<div class="saturate-[var(--any-value)]"></div>
<div class="sepia-[var(--any-value)]"></div>
<div class="backdrop-blur-[var(--any-value)]"></div>
<div class="backdrop-brightness-[var(--any-value)]"></div>
<div class="backdrop-contrast-[var(--any-value)]"></div>
<div class="backdrop-grayscale-[var(--any-value)]"></div>
<div class="backdrop-hue-rotate-[var(--any-value)]"></div>
<div class="backdrop-invert-[var(--any-value)]"></div>
<div class="backdrop-opacity-[var(--any-value)]"></div>
<div class="backdrop-saturate-[var(--any-value)]"></div>
<div class="backdrop-sepia-[var(--any-value)]"></div>
<div class="transition-[var(--any-value)]"></div>
<div class="delay-[var(--any-value)]"></div>
<div class="duration-[var(--any-value)]"></div>
<div class="ease-[var(--any-value)]"></div>
<div class="will-change-[var(--any-value)]"></div>
<div class="content-[var(--any-value)]"></div>
`,
},
],
corePlugins: { preflight: false },
}
let input = css`
@tailwind utilities;
`
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);
}
.top-\[var\(--any-value\)\] {
top: var(--any-value);
}
.right-\[var\(--any-value\)\] {
right: var(--any-value);
}
.bottom-\[var\(--any-value\)\] {
bottom: var(--any-value);
}
.left-\[var\(--any-value\)\] {
left: 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);
}
.mt-\[var\(--any-value\)\] {
margin-top: var(--any-value);
}
.mr-\[var\(--any-value\)\] {
margin-right: var(--any-value);
}
.mb-\[var\(--any-value\)\] {
margin-bottom: var(--any-value);
}
.ml-\[var\(--any-value\)\] {
margin-left: 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-mt-\[var\(--any-value\)\] {
scroll-margin-top: var(--any-value);
}
.scroll-mr-\[var\(--any-value\)\] {
scroll-margin-right: 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-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-pt-\[var\(--any-value\)\] {
scroll-padding-top: var(--any-value);
}
.scroll-pr-\[var\(--any-value\)\] {
scroll-padding-right: 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);
}
.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-t-\[var\(--any-value\)\] {
border-top-left-radius: var(--any-value);
border-top-right-radius: var(--any-value);
}
.rounded-r-\[var\(--any-value\)\] {
border-top-right-radius: var(--any-value);
border-bottom-right-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-tl-\[var\(--any-value\)\] {
border-top-left-radius: var(--any-value);
}
.rounded-tr-\[var\(--any-value\)\] {
border-top-right-radius: var(--any-value);
}
.rounded-br-\[var\(--any-value\)\] {
border-bottom-right-radius: var(--any-value);
}
.rounded-bl-\[var\(--any-value\)\] {
border-bottom-left-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-t-\[var\(--any-value\)\] {
border-top-color: var(--any-value);
}
.border-r-\[var\(--any-value\)\] {
border-right-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-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);
}
.pt-\[var\(--any-value\)\] {
padding-top: var(--any-value);
}
.pr-\[var\(--any-value\)\] {
padding-right: var(--any-value);
}
.pb-\[var\(--any-value\)\] {
padding-bottom: var(--any-value);
}
.pl-\[var\(--any-value\)\] {
padding-left: 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);
}
`)
})
})
Reference in New Issue View Git Blame Copy Permalink