wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Remove @property fallbacks for Firefox (#15622)

Browse source 
This PR removes the `@property` fallbacks added in #13655. This is
possible because we're targeting a minimum Firefox version of 128 which
[includes support for \`@property\`
rules](https://developer.mozilla.org/de/docs/Web/CSS/@property).

<img width="1284" alt="Screenshot 2025-01-14 at 11 36 44"
src="https://github.com/user-attachments/assets/ae070781-35c1-4165-be51-baa63f28db5b"
/>
This commit is contained in:
Philipp Spiess 2025-01-14 15:51:44 +01:00 • committed by GitHub
parent da2da51284
commit 2de644b20e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 1 additions and 899 deletions
Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -43,6 +43,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Remove `--container-prose` in favor of a deprecated `--max-width-prose` theme variable so that `*-prose` is only available for max-width utilities and only for backward compatibility ([#15439](https://github.com/tailwindlabs/tailwindcss/pull/15439))
- Use Vite post-processor APIs for processing Svelte `<style>` blocks ([#15436](https://github.com/tailwindlabs/tailwindcss/pull/15436))
- Remove `@property` fallback rules for Firefox ([#15622](https://github.com/tailwindlabs/tailwindcss/pull/15622))
## [4.0.0-beta.8] - 2024-12-17

21
integrations/cli/index.test.ts
View file

@ -530,13 +530,6 @@ test(
--tw-content: "src/nested/index.html";
content: var(--tw-content);
}
@supports (-moz-orient: inline) {
@layer base {
*, ::before, ::after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -775,13 +768,6 @@ test(
--tw-content: 'project-e/nested/index.html';
content: var(--tw-content);
}
@supports (-moz-orient: inline) {
@layer base {
*, ::before, ::after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -981,13 +967,6 @@ test(
--tw-content: "pages/nested/foo.html";
content: var(--tw-content);
}
@supports (-moz-orient: inline) {
@layer base {
*, ::before, ::after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;

21
integrations/postcss/index.test.ts
View file

@ -761,13 +761,6 @@ test(
--tw-content: "src/nested/index.html";
content: var(--tw-content);
}
@supports (-moz-orient: inline) {
@layer base {
*, ::before, ::after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -997,13 +990,6 @@ test(
--tw-content: 'project-d/src/index.html';
content: var(--tw-content);
}
@supports (-moz-orient: inline) {
@layer base {
*, ::before, ::after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -1227,13 +1213,6 @@ test(
--tw-content: "pages/nested/foo.html";
content: var(--tw-content);
}
@supports (-moz-orient: inline) {
@layer base {
*, ::before, ::after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;

8
packages/@tailwindcss-postcss/src/__snapshots__/index.test.ts.snap
View file

@ -630,14 +630,6 @@ exports[`\`@import 'tailwindcss'\` is replaced with the generated CSS 1`] = `
}
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-font-weight: initial;
}
}
}
@keyframes spin {
to {
transform: rotate(360deg);

19
packages/tailwindcss/src/__snapshots__/index.test.ts.snap
View file

@ -387,25 +387,6 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
}
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
@keyframes spin {
to {
transform: rotate(360deg);

72
packages/tailwindcss/src/__snapshots__/utilities.test.ts.snap
View file

@ -118,14 +118,6 @@ exports[`border-* 1`] = `
border-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -251,14 +243,6 @@ exports[`border-b-* 1`] = `
border-bottom-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -384,14 +368,6 @@ exports[`border-e-* 1`] = `
border-inline-end-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -517,14 +493,6 @@ exports[`border-l-* 1`] = `
border-left-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -650,14 +618,6 @@ exports[`border-r-* 1`] = `
border-right-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -783,14 +743,6 @@ exports[`border-s-* 1`] = `
border-inline-start-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -916,14 +868,6 @@ exports[`border-t-* 1`] = `
border-top-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -1049,14 +993,6 @@ exports[`border-x-* 1`] = `
border-inline-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -1182,14 +1118,6 @@ exports[`border-y-* 1`] = `
border-block-color: #0000;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;

43
packages/tailwindcss/src/ast.ts
View file

@ -240,8 +240,6 @@ export function walkDepth(
export function optimizeAst(ast: AstNode[]) {
let atRoots: AstNode[] = []
let seenAtProperties = new Set<string>()
let propertyFallbacksRoot: Declaration[] = []
let propertyFallbacksUniversal: Declaration[] = []
function transform(
node: AstNode,
@ -272,28 +270,6 @@ export function optimizeAst(ast: AstNode[]) {
return
}
// Collect fallbacks for `@property` rules for Firefox support
// We turn these into rules on `:root` or `*` and some pseudo-elements
// based on the value of `inherits``
let property = node.params
let initialValue = null
let inherits = false
for (let prop of node.nodes) {
if (prop.kind !== 'declaration') continue
if (prop.property === 'initial-value') {
initialValue = prop.value
} else if (prop.property === 'inherits') {
inherits = prop.value === 'true'
}
}
if (inherits) {
propertyFallbacksRoot.push(decl(property, initialValue ?? 'initial'))
} else {
propertyFallbacksUniversal.push(decl(property, initialValue ?? 'initial'))
}
seenAtProperties.add(node.params)
let copy = { ...node, nodes: [] }
@ -351,25 +327,6 @@ export function optimizeAst(ast: AstNode[]) {
transform(node, newAst, 0)
}
// Fallbacks
{
let fallbackAst = []
if (propertyFallbacksRoot.length > 0) {
fallbackAst.push(rule(':root', propertyFallbacksRoot))
}
if (propertyFallbacksUniversal.length > 0) {
fallbackAst.push(rule('*, ::before, ::after, ::backdrop', propertyFallbacksUniversal))
}
if (fallbackAst.length > 0) {
newAst.push(
atRule('@supports', '(-moz-orient: inline)', [atRule('@layer', 'base', fallbackAst)]),
)
}
}
return newAst.concat(atRoots)
}

7
packages/tailwindcss/src/compat/config.test.ts
View file

@ -352,13 +352,6 @@ describe('theme callbacks', () => {
--tw-leading: 201rem;
line-height: 201rem;
}
@supports (-moz-orient: inline) {
@layer base {
*, ::before, ::after, ::backdrop {
--tw-leading: initial;
}
}
}
@property --tw-leading {
syntax: "*";
inherits: false;

61
packages/tailwindcss/src/index.test.ts
View file

@ -285,16 +285,6 @@ describe('@apply', () => {
}
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
@keyframes spin {
to {
transform: rotate(360deg);
@ -369,14 +359,6 @@ describe('@apply', () => {
content: var(--tw-content);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -582,14 +564,6 @@ describe('variant stacking', () => {
}
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -755,14 +729,6 @@ describe('sorting', () => {
margin-inline-end: calc(var(--spacing-2) * calc(1 - var(--tw-space-x-reverse)));
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-space-x-reverse: 0;
}
}
}
@property --tw-space-x-reverse {
syntax: "*";
inherits: false;
@ -1318,14 +1284,6 @@ describe('Parsing themes values from CSS', () => {
font-weight: var(--font-weight-bold);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-font-weight: initial;
}
}
}
@property --tw-font-weight {
syntax: "*";
inherits: false
@ -1365,25 +1323,6 @@ describe('Parsing themes values from CSS', () => {
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
@property --tw-shadow {
syntax: "*";
inherits: false;

623
packages/tailwindcss/src/utilities.test.ts
View file

@ -188,25 +188,6 @@ test('inset', async () => {
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
@property --tw-shadow {
syntax: "*";
inherits: false;
@ -3639,15 +3620,6 @@ test('border-spacing', async () => {
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
}
}
}
@property --tw-border-spacing-x {
syntax: "<length>";
inherits: false;
@ -3697,15 +3669,6 @@ test('border-spacing-x', async () => {
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
}
}
}
@property --tw-border-spacing-x {
syntax: "<length>";
inherits: false;
@ -3755,15 +3718,6 @@ test('border-spacing-y', async () => {
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
}
}
}
@property --tw-border-spacing-x {
syntax: "<length>";
inherits: false;
@ -3985,16 +3939,6 @@ test('translate', async () => {
translate: var(--tw-translate-x) var(--tw-translate-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@ -4058,16 +4002,6 @@ test('translate-x', async () => {
translate: var(--tw-translate-x) var(--tw-translate-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@ -4135,16 +4069,6 @@ test('translate-x', async () => {
translate: var(--tw-translate-x) var(--tw-translate-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@ -4206,16 +4130,6 @@ test('translate-y', async () => {
translate: var(--tw-translate-x) var(--tw-translate-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@ -4283,16 +4197,6 @@ test('translate-y', async () => {
translate: var(--tw-translate-x) var(--tw-translate-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@ -4337,16 +4241,6 @@ test('translate-z', async () => {
translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@ -4387,16 +4281,6 @@ test('translate-3d', async () => {
translate: var(--tw-translate-x) var(--tw-translate-y) var(--tw-translate-z);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-translate-z: 0;
}
}
}
@property --tw-translate-x {
syntax: "*";
inherits: false;
@ -4468,18 +4352,6 @@ test('rotate-x', async () => {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-rotate-x: rotateX(0);
--tw-rotate-y: rotateY(0);
--tw-rotate-z: rotateZ(0);
--tw-skew-x: skewX(0);
--tw-skew-y: skewY(0);
}
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -4546,18 +4418,6 @@ test('rotate-y', async () => {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-rotate-x: rotateX(0);
--tw-rotate-y: rotateY(0);
--tw-rotate-z: rotateZ(0);
--tw-skew-x: skewX(0);
--tw-skew-y: skewY(0);
}
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -4624,18 +4484,6 @@ test('rotate-z', async () => {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-rotate-x: rotateX(0);
--tw-rotate-y: rotateY(0);
--tw-rotate-z: rotateZ(0);
--tw-skew-x: skewX(0);
--tw-skew-y: skewY(0);
}
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -4699,18 +4547,6 @@ test('skew', async () => {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-rotate-x: rotateX(0);
--tw-rotate-y: rotateY(0);
--tw-rotate-z: rotateZ(0);
--tw-skew-x: skewX(0);
--tw-skew-y: skewY(0);
}
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -4770,18 +4606,6 @@ test('skew-x', async () => {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-rotate-x: rotateX(0);
--tw-rotate-y: rotateY(0);
--tw-rotate-z: rotateZ(0);
--tw-skew-x: skewX(0);
--tw-skew-y: skewY(0);
}
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -4841,18 +4665,6 @@ test('skew-y', async () => {
transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z) var(--tw-skew-x) var(--tw-skew-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-rotate-x: rotateX(0);
--tw-rotate-y: rotateY(0);
--tw-rotate-z: rotateZ(0);
--tw-skew-x: skewX(0);
--tw-skew-y: skewY(0);
}
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -4920,16 +4732,6 @@ test('scale', async () => {
scale: 2 1.5 3;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
@ -4968,16 +4770,6 @@ test('scale-3d', async () => {
scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
@ -5016,16 +4808,6 @@ test('scale-x', async () => {
scale: var(--tw-scale-x) var(--tw-scale-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
@ -5057,16 +4839,6 @@ test('scale-x', async () => {
scale: var(--tw-scale-x) var(--tw-scale-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
@ -5117,16 +4889,6 @@ test('scale-y', async () => {
scale: var(--tw-scale-x) var(--tw-scale-y);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
@ -5175,16 +4937,6 @@ test('scale-z', async () => {
scale: var(--tw-scale-x) var(--tw-scale-y) var(--tw-scale-z);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
@ -5245,18 +4997,6 @@ test('transform', async () => {
transform: none;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-rotate-x: rotateX(0);
--tw-rotate-y: rotateY(0);
--tw-rotate-z: rotateZ(0);
--tw-skew-x: skewX(0);
--tw-skew-y: skewY(0);
}
}
}
@property --tw-rotate-x {
syntax: "*";
inherits: false;
@ -5765,16 +5505,6 @@ test('touch-pan', async () => {
touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-pan-x: initial;
--tw-pan-y: initial;
--tw-pinch-zoom: initial;
}
}
}
@property --tw-pan-x {
syntax: "*";
inherits: false
@ -5815,16 +5545,6 @@ test('touch-pinch-zoom', async () => {
touch-action: var(--tw-pan-x, ) var(--tw-pan-y, ) var(--tw-pinch-zoom, );
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-pan-x: initial;
--tw-pan-y: initial;
--tw-pinch-zoom: initial;
}
}
}
@property --tw-pan-x {
syntax: "*";
inherits: false
@ -5930,14 +5650,6 @@ test('scroll-snap-type', async () => {
scroll-snap-type: y var(--tw-scroll-snap-strictness);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scroll-snap-strictness: proximity;
}
}
}
@property --tw-scroll-snap-strictness {
syntax: "*";
inherits: false;
@ -5968,14 +5680,6 @@ test('--tw-scroll-snap-strictness', async () => {
--tw-scroll-snap-strictness: proximity;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-scroll-snap-strictness: proximity;
}
}
}
@property --tw-scroll-snap-strictness {
syntax: "*";
inherits: false;
@ -7870,14 +7574,6 @@ test('space-x', async () => {
margin-inline-end: calc(4px * calc(1 - var(--tw-space-x-reverse)));
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-space-x-reverse: 0;
}
}
}
@property --tw-space-x-reverse {
syntax: "*";
inherits: false;
@ -7921,14 +7617,6 @@ test('space-y', async () => {
margin-block-end: calc(4px * calc(1 - var(--tw-space-y-reverse)));
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-space-y-reverse: 0;
}
}
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
@ -7944,14 +7632,6 @@ test('space-x-reverse', async () => {
--tw-space-x-reverse: 1;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-space-x-reverse: 0;
}
}
}
@property --tw-space-x-reverse {
syntax: "*";
inherits: false;
@ -7967,14 +7647,6 @@ test('space-y-reverse', async () => {
--tw-space-y-reverse: 1;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-space-y-reverse: 0;
}
}
}
@property --tw-space-y-reverse {
syntax: "*";
inherits: false;
@ -8021,15 +7693,6 @@ test('divide-x', async () => {
border-inline-end-width: calc(4px * calc(1 - var(--tw-divide-x-reverse)));
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-divide-x-reverse: 0;
--tw-border-style: solid;
}
}
}
@property --tw-divide-x-reverse {
syntax: "*";
inherits: false;
@ -8080,15 +7743,6 @@ test('divide-x with custom default border width', async () => {
border-inline-end-width: calc(2px * calc(1 - var(--tw-divide-x-reverse)));
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-divide-x-reverse: 0;
--tw-border-style: solid;
}
}
}
@property --tw-divide-x-reverse {
syntax: "*";
inherits: false;
@ -8145,15 +7799,6 @@ test('divide-y', async () => {
border-bottom-width: calc(4px * calc(1 - var(--tw-divide-y-reverse)));
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
}
}
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
@ -8205,15 +7850,6 @@ test('divide-y with custom default border width', async () => {
border-bottom-width: calc(2px * calc(1 - var(--tw-divide-y-reverse)));
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-divide-y-reverse: 0;
--tw-border-style: solid;
}
}
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
@ -8235,14 +7871,6 @@ test('divide-x-reverse', async () => {
--tw-divide-x-reverse: 1;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-divide-x-reverse: 0;
}
}
}
@property --tw-divide-x-reverse {
syntax: "*";
inherits: false;
@ -8258,14 +7886,6 @@ test('divide-y-reverse', async () => {
--tw-divide-y-reverse: 1;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-divide-y-reverse: 0;
}
}
}
@property --tw-divide-y-reverse {
syntax: "*";
inherits: false;
@ -10317,14 +9937,6 @@ test('border with custom default border width', async () => {
border-width: 2px;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-border-style: solid;
}
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
@ -11178,22 +10790,6 @@ test('from', async () => {
--tw-gradient-from-position: var(--my-position);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-gradient-position: initial;
--tw-gradient-from: #0000;
--tw-gradient-via: #0000;
--tw-gradient-to: #0000;
--tw-gradient-stops: initial;
--tw-gradient-via-stops: initial;
--tw-gradient-from-position: 0%;
--tw-gradient-via-position: 50%;
--tw-gradient-to-position: 100%;
}
}
}
@property --tw-gradient-position {
syntax: "*";
inherits: false
@ -11425,22 +11021,6 @@ test('via', async () => {
--tw-gradient-via-position: var(--my-position);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-gradient-position: initial;
--tw-gradient-from: #0000;
--tw-gradient-via: #0000;
--tw-gradient-to: #0000;
--tw-gradient-stops: initial;
--tw-gradient-via-stops: initial;
--tw-gradient-from-position: 0%;
--tw-gradient-via-position: 50%;
--tw-gradient-to-position: 100%;
}
}
}
@property --tw-gradient-position {
syntax: "*";
inherits: false
@ -11658,22 +11238,6 @@ test('to', async () => {
--tw-gradient-to-position: var(--my-position);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-gradient-position: initial;
--tw-gradient-from: #0000;
--tw-gradient-via: #0000;
--tw-gradient-to: #0000;
--tw-gradient-stops: initial;
--tw-gradient-via-stops: initial;
--tw-gradient-from-position: 0%;
--tw-gradient-via-position: 50%;
--tw-gradient-to-position: 100%;
}
}
}
@property --tw-gradient-position {
syntax: "*";
inherits: false
@ -13071,14 +12635,6 @@ test('font', async () => {
font-weight: var(--font-weight-bold);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-font-weight: initial;
}
}
}
@property --tw-font-weight {
syntax: "*";
inherits: false
@ -13804,22 +13360,6 @@ test('filter', async () => {
filter: none;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-blur: initial;
--tw-brightness: initial;
--tw-contrast: initial;
--tw-grayscale: initial;
--tw-hue-rotate: initial;
--tw-invert: initial;
--tw-opacity: initial;
--tw-saturate: initial;
--tw-sepia: initial;
}
}
}
@property --tw-blur {
syntax: "*";
inherits: false
@ -14181,22 +13721,6 @@ test('backdrop-filter', async () => {
backdrop-filter: none;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-backdrop-blur: initial;
--tw-backdrop-brightness: initial;
--tw-backdrop-contrast: initial;
--tw-backdrop-grayscale: initial;
--tw-backdrop-hue-rotate: initial;
--tw-backdrop-invert: initial;
--tw-backdrop-opacity: initial;
--tw-backdrop-saturate: initial;
--tw-backdrop-sepia: initial;
}
}
}
@property --tw-backdrop-blur {
syntax: "*";
inherits: false
@ -14527,14 +14051,6 @@ test('duration', async () => {
transition-duration: .3s;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-duration: initial;
}
}
}
@property --tw-duration {
syntax: "*";
inherits: false
@ -14586,14 +14102,6 @@ test('ease', async () => {
transition-timing-function: var(--ease-out);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-ease: initial;
}
}
}
@property --tw-ease {
syntax: "*";
inherits: false
@ -14713,17 +14221,6 @@ test('contain', async () => {
contain: var(--tw-contain-size, ) var(--tw-contain-layout, ) var(--tw-contain-paint, ) var(--tw-contain-style, );
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-contain-size: initial;
--tw-contain-layout: initial;
--tw-contain-paint: initial;
--tw-contain-style: initial;
}
}
}
@property --tw-contain-size {
syntax: "*";
inherits: false
@ -14766,14 +14263,6 @@ test('content', async () => {
content: var(--tw-content);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -14842,14 +14331,6 @@ test('leading', async () => {
line-height: var(--leading-tight);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-leading: initial;
}
}
}
@property --tw-leading {
syntax: "*";
inherits: false
@ -14906,14 +14387,6 @@ test('tracking', async () => {
letter-spacing: var(--tracking-wide);
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-tracking: initial;
}
}
}
@property --tw-tracking {
syntax: "*";
inherits: false
@ -15010,18 +14483,6 @@ test('font-variant-numeric', async () => {
font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-ordinal: initial;
--tw-slashed-zero: initial;
--tw-numeric-figure: initial;
--tw-numeric-spacing: initial;
--tw-numeric-fraction: initial;
}
}
}
@property --tw-ordinal {
syntax: "*";
inherits: false
@ -15252,14 +14713,6 @@ test('outline', async () => {
outline-style: solid;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-outline-style: solid;
}
}
}
@property --tw-outline-style {
syntax: "*";
inherits: false;
@ -15816,25 +15269,6 @@ test('shadow', async () => {
--tw-shadow-color: transparent;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
@property --tw-shadow {
syntax: "*";
inherits: false;
@ -16059,25 +15493,6 @@ test('inset-shadow', async () => {
--tw-inset-shadow-color: transparent;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
@property --tw-shadow {
syntax: "*";
inherits: false;
@ -16320,25 +15735,6 @@ test('ring', async () => {
--tw-ring-inset: inset;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
@property --tw-shadow {
syntax: "*";
inherits: false;
@ -16591,25 +15987,6 @@ test('inset-ring', async () => {
--tw-inset-ring-color: transparent;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-shadow: 0 0 #0000;
--tw-shadow-color: initial;
--tw-inset-shadow: 0 0 #0000;
--tw-inset-shadow-color: initial;
--tw-ring-color: initial;
--tw-ring-shadow: 0 0 #0000;
--tw-inset-ring-color: initial;
--tw-inset-ring-shadow: 0 0 #0000;
--tw-ring-inset: initial;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-offset-shadow: 0 0 #0000;
}
}
}
@property --tw-shadow {
syntax: "*";
inherits: false;

24
packages/tailwindcss/src/variants.test.ts
View file

@ -111,14 +111,6 @@ test('before', async () => {
display: flex;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -135,14 +127,6 @@ test('after', async () => {
display: flex;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;
@ -2314,14 +2298,6 @@ test('variant order', async () => {
display: flex;
}
@supports (-moz-orient: inline) {
@layer base {
*, :before, :after, ::backdrop {
--tw-content: "";
}
}
}
@property --tw-content {
syntax: "*";
inherits: false;