From ef2ebb28d5f8cc4bf4cd1ba75a82f29fb2edf87e Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 9 Jun 2023 20:37:36 +0200 Subject: [PATCH] Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist (#11402) * exclude `Features.LogicalProperties` lightningcss feature We don't want this to automatically apply since we have dedicated logical property based utilities already. We also have a feature flag to toggle some utilities to make use of logical property based ones. This feature should be opt-in to prevent backwards compatibility (e.g.: RTL sites that _did_ use a mr-4 explicitly). * update default browserslist * explicitly include/exclude Lightning CSS features * update tests based on new browserslist and include/exclude features from Lightning CSS * update integration tests * prefer user browserslist, fallback to built-in browserslist * always include Nesting If a custom browserslist config is used, then we don't explicitly set the include/exclude features from Lightning CSS (except for nesting, we always want to process nesting) * ensure to fallback to the current working directory * update changelog --- CHANGELOG.md | 1 + .../postcss-cli/tests/integration.test.js | 34 +- .../rollup-sass/tests/integration.test.js | 4 +- integrations/rollup/tests/integration.test.js | 4 +- integrations/vite/tests/integration.test.js | 4 +- .../webpack-4/tests/integration.test.js | 4 +- .../webpack-5/tests/integration.test.js | 4 +- package.json | 7 +- src/cli/build/plugin.js | 23 +- src/plugin.js | 31 +- tests/any-type.test.js | 37 ++ tests/apply.test.js | 67 +-- tests/arbitrary-properties.test.js | 2 +- tests/arbitrary-values.test.css | 74 ++- tests/arbitrary-variants.test.js | 8 +- tests/basic-usage.test.css | 154 +++++- tests/blocklist.test.js | 2 +- tests/collapse-adjacent-rules.test.js | 10 +- tests/collapse-duplicate-declarations.test.js | 1 + tests/containerPlugin.test.js | 60 +-- tests/custom-plugins.test.js | 34 +- tests/custom-separator.test.js | 2 +- tests/customConfig.test.js | 16 +- tests/detect-nesting.test.js | 2 +- tests/getVariants.test.js | 4 +- tests/import-syntax.test.js | 12 +- tests/important-boolean.test.js | 12 +- tests/important-modifier-prefix.test.js | 14 +- tests/important-modifier.test.js | 14 +- tests/important-selector.test.js | 21 +- tests/kitchen-sink.test.js | 104 +++-- tests/layer-at-rules.test.js | 2 +- tests/match-variants.test.js | 62 +-- tests/min-max-screen-variants.test.js | 70 +-- tests/modify-selectors.test.js | 6 +- tests/oxide-svelte.test.css | 2 +- tests/parseObjectStyles.test.js | 16 +- tests/plugins/fontSize.test.js | 2 +- tests/prefix.test.js | 14 +- tests/raw-content.test.css | 55 ++- tests/resolve-defaults-at-rules.test.js | 179 ++++++- tests/responsive-and-variants-atrules.test.js | 2 +- tests/source-maps.test.js | 442 +++++++++++------- tests/syntax-svelte.test.js | 4 +- tests/tailwind-screens.test.js | 4 +- tests/util/defaults.js | 101 +++- tests/variant-grouping.test.skip.js | 10 +- tests/variants.test.css | 146 +++++- tests/variants.test.js | 40 +- 49 files changed, 1367 insertions(+), 556 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 20d0eced0bcb..785ab7d9f78d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317)) - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318)) - Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320)) +- Explicitly configure Lightning CSS features, and prefer user browserslist over default browserslist ([#11402](https://github.com/tailwindlabs/tailwindcss/pull/11402)) ### Changed diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js index 1144ab59d2af..aefd47214369 100644 --- a/integrations/postcss-cli/tests/integration.test.js +++ b/integrations/postcss-cli/tests/integration.test.js @@ -137,7 +137,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-medium { font-weight: 500; } @@ -148,23 +148,23 @@ describe('watcher', () => { await writeInputFile( '../tailwind.config.js', javascript` - module.exports = { - content: ['./src/index.html'], - theme: { - extend: { - screens: { - md: '800px' - }, - fontWeight: { - bold: 'bold' - } + module.exports = { + content: ['./src/index.html'], + theme: { + extend: { + screens: { + md: '800px' }, + fontWeight: { + bold: 'bold' + } }, - corePlugins: { - preflight: false, - }, - plugins: [], - } + }, + corePlugins: { + preflight: false, + }, + plugins: [], + } ` ) await runningProcess.onStderr(ready) @@ -174,7 +174,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (width >= 800px) { + @media (min-width: 800px) { .md\:font-medium { font-weight: 500; } diff --git a/integrations/rollup-sass/tests/integration.test.js b/integrations/rollup-sass/tests/integration.test.js index f4702b951d07..90a3831ff268 100644 --- a/integrations/rollup-sass/tests/integration.test.js +++ b/integrations/rollup-sass/tests/integration.test.js @@ -136,7 +136,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-medium { font-weight: 500; } @@ -173,7 +173,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (width >= 800px) { + @media (min-width: 800px) { .md\:font-medium { font-weight: 500; } diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js index 5ebd91ba8300..6a35285e35ef 100644 --- a/integrations/rollup/tests/integration.test.js +++ b/integrations/rollup/tests/integration.test.js @@ -224,7 +224,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-medium { font-weight: 500; } @@ -261,7 +261,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (width >= 800px) { + @media (min-width: 800px) { .md\:font-medium { font-weight: 500; } diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js index 90ec78ccc2aa..b0a4f6c79f3f 100644 --- a/integrations/vite/tests/integration.test.js +++ b/integrations/vite/tests/integration.test.js @@ -255,7 +255,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-medium { font-weight: 500; } @@ -292,7 +292,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (width >= 800px) { + @media (min-width: 800px) { .md\:font-medium { font-weight: 500; } diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js index e962a5402010..ae7011edd747 100644 --- a/integrations/webpack-4/tests/integration.test.js +++ b/integrations/webpack-4/tests/integration.test.js @@ -225,7 +225,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-medium { font-weight: 500; } @@ -263,7 +263,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (width >= 800px) { + @media (min-width: 800px) { .md\:font-medium { font-weight: 500; } diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js index 487012c4b75f..c1f0a0629083 100644 --- a/integrations/webpack-5/tests/integration.test.js +++ b/integrations/webpack-5/tests/integration.test.js @@ -225,7 +225,7 @@ describe('watcher', () => { .font-bold { font-weight: 700; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-medium { font-weight: 500; } @@ -263,7 +263,7 @@ describe('watcher', () => { .font-bold { font-weight: bold; } - @media (width >= 800px) { + @media (min-width: 800px) { .md\:font-medium { font-weight: 500; } diff --git a/package.json b/package.json index df3995be35d9..ea34439376ae 100644 --- a/package.json +++ b/package.json @@ -87,10 +87,9 @@ "sucrase": "^3.32.0" }, "browserslist": [ - "> 1%", - "not edge <= 18", - "not ie 11", - "not op_mini all" + "chrome >= 103", + "firefox >= 102", + "safari >= 14" ], "jest": { "testTimeout": 30000, diff --git a/src/cli/build/plugin.js b/src/cli/build/plugin.js index e83311937aa4..968bd3c889dd 100644 --- a/src/cli/build/plugin.js +++ b/src/cli/build/plugin.js @@ -6,7 +6,7 @@ import fs from 'fs' import postcss from 'postcss' import postcssrc from 'postcss-load-config' import browserslist from 'browserslist' -import lightning from 'lightningcss' +import lightning, { Features } from 'lightningcss' import { lilconfig } from 'lilconfig' import loadPlugins from 'postcss-load-config/src/plugins' // Little bit scary, looking at private/internal API import loadOptions from 'postcss-load-config/src/options' // Little bit scary, looking at private/internal API @@ -28,16 +28,35 @@ import { flagEnabled } from '../../featureFlags' async function lightningcss(result, { map = true, minify = true } = {}) { try { + let includeFeatures = Features.Nesting + let excludeFeatures = 0 + + let resolvedBrowsersListConfig = browserslist.findConfig( + result.opts.from ?? process.cwd() + )?.defaults + let defaultBrowsersListConfig = pkg.browserslist + let browsersListConfig = resolvedBrowsersListConfig ?? defaultBrowsersListConfig + + if (browsersListConfig.join(',') === defaultBrowsersListConfig.join(',')) { + includeFeatures |= + Features.ColorFunction | Features.OklabColors | Features.LabColors | Features.P3Colors + + excludeFeatures |= + Features.HexAlphaColors | Features.LogicalProperties | Features.SpaceSeparatedColorNotation + } + let transformed = lightning.transform({ filename: result.opts.from || 'input.css', code: Buffer.from(result.css, 'utf-8'), minify, sourceMap: result.map === undefined ? map : !!result.map, inputSourceMap: result.map ? result.map.toString() : undefined, - targets: lightning.browserslistToTargets(browserslist(pkg.browserslist)), + targets: lightning.browserslistToTargets(browserslist(browsersListConfig)), drafts: { nesting: true, }, + include: includeFeatures, + exclude: excludeFeatures, }) return Object.assign(result, { diff --git a/src/plugin.js b/src/plugin.js index 849d95e2ab2f..70222f3196a6 100644 --- a/src/plugin.js +++ b/src/plugin.js @@ -1,5 +1,5 @@ import postcss from 'postcss' -import lightningcss from 'lightningcss' +import lightningcss, { Features } from 'lightningcss' import browserslist from 'browserslist' import setupTrackingContext from './lib/setupTrackingContext' import processTailwindFeatures from './processTailwindFeatures' @@ -45,20 +45,35 @@ module.exports = function tailwindcss(configOrPath) { let intermediateResult = result.root.toResult({ map: map ? { inline: true } : false, }) + let intermediateMap = intermediateResult.map?.toJSON?.() ?? map try { + let includeFeatures = Features.Nesting + let excludeFeatures = 0 + + let resolvedBrowsersListConfig = browserslist.findConfig( + result.opts.from ?? process.cwd() + )?.defaults + let defaultBrowsersListConfig = require('../package.json').browserslist + let browsersListConfig = resolvedBrowsersListConfig ?? defaultBrowsersListConfig + + if (browsersListConfig.join(',') === defaultBrowsersListConfig.join(',')) { + includeFeatures |= + Features.ColorFunction | Features.OklabColors | Features.LabColors | Features.P3Colors + + excludeFeatures |= + Features.HexAlphaColors | + Features.LogicalProperties | + Features.SpaceSeparatedColorNotation + } + let transformed = lightningcss.transform({ filename: result.opts.from, code: Buffer.from(intermediateResult.css), minify: false, sourceMap: !!intermediateMap, - targets: - typeof process !== 'undefined' && process.env.JEST_WORKER_ID - ? { chrome: 111 << 16 } - : lightningcss.browserslistToTargets( - browserslist(require('../package.json').browserslist) - ), + targets: lightningcss.browserslistToTargets(browserslist(browsersListConfig)), drafts: { nesting: true, customMedia: true, @@ -66,6 +81,8 @@ module.exports = function tailwindcss(configOrPath) { nonStandard: { deepSelectorCombinator: true, }, + include: includeFeatures, + exclude: excludeFeatures, }) let code = transformed.code.toString() diff --git a/tests/any-type.test.js b/tests/any-type.test.js index 34844f2c2fa9..c9cce9c7a387 100644 --- a/tests/any-type.test.js +++ b/tests/any-type.test.js @@ -577,6 +577,7 @@ test('any types are set on correct plugins', () => { --tw-text-opacity: var(--any-value); } .decoration-\[var\(--any-value\)\] { + -webkit-text-decoration-color: var(--any-value); text-decoration-color: var(--any-value); } .underline-offset-\[var\(--any-value\)\] { @@ -672,6 +673,10 @@ test('any types are set on correct plugins', () => { } .backdrop-blur-\[var\(--any-value\)\] { --tw-backdrop-blur: blur(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) @@ -679,6 +684,10 @@ test('any types are set on correct plugins', () => { } .backdrop-brightness-\[var\(--any-value\)\] { --tw-backdrop-brightness: brightness(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) @@ -686,6 +695,10 @@ test('any types are set on correct plugins', () => { } .backdrop-contrast-\[var\(--any-value\)\] { --tw-backdrop-contrast: contrast(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) @@ -693,6 +706,10 @@ test('any types are set on correct plugins', () => { } .backdrop-grayscale-\[var\(--any-value\)\] { --tw-backdrop-grayscale: grayscale(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) @@ -700,6 +717,10 @@ test('any types are set on correct plugins', () => { } .backdrop-hue-rotate-\[var\(--any-value\)\] { --tw-backdrop-hue-rotate: hue-rotate(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) @@ -707,6 +728,10 @@ test('any types are set on correct plugins', () => { } .backdrop-invert-\[var\(--any-value\)\] { --tw-backdrop-invert: invert(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) @@ -714,6 +739,10 @@ test('any types are set on correct plugins', () => { } .backdrop-opacity-\[var\(--any-value\)\] { --tw-backdrop-opacity: opacity(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) @@ -721,6 +750,10 @@ test('any types are set on correct plugins', () => { } .backdrop-saturate-\[var\(--any-value\)\] { --tw-backdrop-saturate: saturate(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) @@ -728,6 +761,10 @@ test('any types are set on correct plugins', () => { } .backdrop-sepia-\[var\(--any-value\)\] { --tw-backdrop-sepia: sepia(var(--any-value)); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) diff --git a/tests/apply.test.js b/tests/apply.test.js index e7627fb1357f..e0c324bf974f 100644 --- a/tests/apply.test.js +++ b/tests/apply.test.js @@ -181,12 +181,12 @@ test('@apply', () => { .variants:focus { font-weight: 500; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .variants { font-weight: 300; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .variants:focus { font-weight: 900; } @@ -197,12 +197,12 @@ test('@apply', () => { .only-variants:focus { font-weight: 500; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .only-variants { font-weight: 300; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .only-variants:focus { font-weight: 900; } @@ -210,7 +210,7 @@ test('@apply', () => { .group:hover .apply-group-variant { text-align: center; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .group:hover .apply-group-variant { text-align: left; } @@ -221,7 +221,7 @@ test('@apply', () => { :is(.dark .apply-dark-variant:hover) { text-align: right; } - @media (width >= 1024px) { + @media (min-width: 1024px) { :is(.dark .apply-dark-variant) { text-align: left; } @@ -230,12 +230,12 @@ test('@apply', () => { .apply-custom-utility:hover { custom: stuff; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .apply-custom-utility { custom: stuff; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .apply-custom-utility:focus { custom: stuff; } @@ -255,7 +255,7 @@ test('@apply', () => { .selectors-variants:active { text-align: right; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .multiple-variants:focus, .selectors-variants:focus { text-align: left; @@ -265,7 +265,7 @@ test('@apply', () => { .group:hover .selectors-group { text-align: center; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .group:hover .multiple-group, .group:hover .selectors-group { text-align: left; @@ -321,12 +321,12 @@ test('@apply', () => { .recursive-apply-a { font-weight: 900; } - @media (width >= 640px) { + @media (min-width: 640px) { .recursive-apply-a { font-weight: 100; } } - @media (width >= 640px) { + @media (min-width: 640px) { .recursive-apply-b { font-weight: 100; } @@ -334,17 +334,17 @@ test('@apply', () => { .recursive-apply-b { font-weight: 600; } - @media (width >= 768px) { + @media (min-width: 768px) { .recursive-apply-b { font-weight: 200; } } - @media (width >= 640px) { + @media (min-width: 640px) { .recursive-apply-c { font-weight: 100; } } - @media (width >= 768px) { + @media (min-width: 768px) { .recursive-apply-c { font-weight: 200; } @@ -352,7 +352,7 @@ test('@apply', () => { .recursive-apply-c { font-weight: 700; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .recursive-apply-c { font-weight: 300; } @@ -369,13 +369,13 @@ test('@apply', () => { padding-left: 0.5rem; padding-right: 0.5rem; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .add-sibling-properties { padding-left: 2.5rem; padding-right: 2.5rem; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .add-sibling-properties:focus { padding-left: 0.25rem; padding-right: 0.25rem; @@ -390,13 +390,13 @@ test('@apply', () => { font-size: 1.5rem; line-height: 2rem; } - @media (width >= 640px) { + @media (min-width: 640px) { h1 { font-size: 1.875rem; line-height: 2.25rem; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { h1 { font-size: 1.5rem; line-height: 2rem; @@ -406,13 +406,13 @@ test('@apply', () => { font-size: 1.5rem; line-height: 2rem; } - @media (width >= 1024px) { + @media (min-width: 1024px) { h2 { font-size: 1.5rem; line-height: 2rem; } } - @media (width >= 640px) { + @media (min-width: 640px) { h2 { font-size: 1.5rem; line-height: 2rem; @@ -701,27 +701,27 @@ test('@applying classes from outside a @layer respects the source order', async .container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -1467,13 +1467,13 @@ describe('multiple instances', () => { font-size: 1.25rem; line-height: 1.75rem; } - @media (width >= 1024px) { + @media (min-width: 1024px) { h2 { font-size: 1.875rem; line-height: 2.25rem; } } - @media (width >= 640px) { + @media (min-width: 640px) { h2 { font-size: 1.5rem; line-height: 2rem; @@ -2021,18 +2021,27 @@ it('pseudo elements inside apply are moved outside of :is() or :has()', () => { :is([dir='rtl'] :is(.dark .baz:hover)):before { background-color: #000; } + :-webkit-any([dir='rtl'] :-webkit-any(.dark .qux))::-webkit-file-upload-button:hover { + background-color: #000; + } :is([dir='rtl'] :is(.dark .qux))::file-selector-button:hover { background-color: #000; } :is([dir='rtl'] :is(.dark .steve):hover):before { background-color: #000; } + :-webkit-any([dir='rtl'] :-webkit-any(.dark .bob))::-webkit-file-upload-button:hover { + background-color: #000; + } :is([dir='rtl'] :is(.dark .bob))::file-selector-button:hover { background-color: #000; } :has([dir='rtl'] .foo:hover):before { background-color: #000; } + :has([dir='rtl'] .bar)::-webkit-file-upload-button:hover { + background-color: #000; + } :has([dir='rtl'] .bar)::file-selector-button:hover { background-color: #000; } diff --git a/tests/arbitrary-properties.test.js b/tests/arbitrary-properties.test.js index c9ae197b99c3..17f0bcf1fb63 100644 --- a/tests/arbitrary-properties.test.js +++ b/tests/arbitrary-properties.test.js @@ -75,7 +75,7 @@ test('arbitrary properties with modifiers', () => { expect(result.css).toMatchFormattedCss(css` ${defaults} @media (prefers-color-scheme: dark) { - @media (width >= 1024px) { + @media (min-width: 1024px) { .dark\:lg\:hover\:\[paint-order\:markers\]:hover { paint-order: markers; } diff --git a/tests/arbitrary-values.test.css b/tests/arbitrary-values.test.css index 3b70e9363298..ca434ed13c31 100644 --- a/tests/arbitrary-values.test.css +++ b/tests/arbitrary-values.test.css @@ -134,13 +134,13 @@ min-height: var(--height); } .w-\[\'\)\(\)\'\] { - width: ')()'; + width: ")()"; } .w-\[\'\]\[\]\'\] { - width: '][]'; + width: "][]"; } .w-\[\'\}\{\}\'\] { - width: '}{}'; + width: "}{}"; } .w-\[\(\(\)\)\] { width: (()); @@ -176,10 +176,14 @@ width: var(--width, calc(100% + 1rem)); } .w-\[\{\{\}\}\] { - width: {{}} + width: { + { + } + } } .w-\[\{\}\] { - width: {} + width: { + } } .min-w-\[3\.23rem\] { min-width: 3.23rem; @@ -345,10 +349,10 @@ cursor: pointer; } .cursor-\[url\(\'\.\/path_to_hand\.cur\'\)_2_2\,pointer\] { - cursor: url('./path_to_hand.cur') 2 2, pointer; + cursor: url("./path_to_hand.cur") 2 2, pointer; } .cursor-\[url\(hand\.cur\)_2_2\,pointer\] { - cursor: url('hand.cur') 2 2, pointer; + cursor: url("hand.cur") 2 2, pointer; } .cursor-\[var\(--value\)\] { cursor: var(--value); @@ -406,13 +410,13 @@ scroll-padding-top: var(--scroll-padding); } .list-\[\'\\1f44d\'\] { - list-style-type: '👍'; + list-style-type: "👍"; } .list-\[var\(--value\)\] { list-style-type: var(--value); } .list-image-\[url\(\.\/my-image\.png\)\] { - list-style-image: url('./my-image.png'); + list-style-image: url("./my-image.png"); } .list-image-\[var\(--value\)\] { list-style-image: var(--value); @@ -685,7 +689,7 @@ background-image: repeating-conic-gradient(#f8f9fa 0% 25%, #fff 0% 50%); } .bg-\[url\(\'\/path-to-image\.png\'\)\] { - background-image: url('/path-to-image.png'); + background-image: url("/path-to-image.png"); } .bg-\[url\:var\(--url\)\] { background-image: var(--url); @@ -735,7 +739,7 @@ fill: #da5b66; } .fill-\[url\(\#icon-gradient\)\] { - fill: url('#icon-gradient'); + fill: url("#icon-gradient"); } .fill-\[var\(--value\)\] { fill: var(--value); @@ -747,7 +751,7 @@ stroke: var(--value); } .stroke-\[url\(\#icon-gradient\)\] { - stroke: url('#icon-gradient'); + stroke: url("#icon-gradient"); } .stroke-\[20px\] { stroke-width: 20px; @@ -809,7 +813,7 @@ font-family: Some Font, sans-serif; } .font-\[\'Some_Font\'\,var\(--other-font\)\] { - font-family: 'Some Font', var(--other-font); + font-family: "Some Font", var(--other-font); } .font-\[Georgia\,serif\] { font-family: Georgia, serif; @@ -876,6 +880,7 @@ text-decoration-color: #000; } .decoration-\[color\:var\(--color\)\] { + -webkit-text-decoration-color: var(--color); text-decoration-color: var(--color); } .decoration-\[rgb\(123\,123\,123\)\], @@ -1026,54 +1031,90 @@ } .backdrop-blur-\[11px\] { --tw-backdrop-blur: blur(11px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-brightness-\[1\.23\] { --tw-backdrop-brightness: brightness(1.23); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-contrast-\[0\.87\] { --tw-backdrop-contrast: contrast(0.87); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-grayscale-\[0\.42\] { --tw-backdrop-grayscale: grayscale(0.42); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-hue-rotate-\[1\.57rad\] { --tw-backdrop-hue-rotate: hue-rotate(89.9544deg); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-invert-\[0\.66\] { --tw-backdrop-invert: invert(0.66); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-opacity-\[22\%\] { --tw-backdrop-opacity: opacity(22%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-saturate-\[144\%\] { --tw-backdrop-saturate: saturate(144%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-sepia-\[0\.38\] { --tw-backdrop-sepia: sepia(0.38); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); @@ -1099,19 +1140,20 @@ will-change: var(--will-change); } .content-\[\'\>\'\] { - --tw-content: '>'; + --tw-content: ">"; content: var(--tw-content); } .content-\[\'hello\'\] { - --tw-content: 'hello'; + --tw-content: "hello"; content: var(--tw-content); } .content-\[attr\(content-before\)\] { --tw-content: attr(content-before); content: var(--tw-content); } -@media (width >= 1024px) { +@media (min-width: 1024px) { .lg\:grid-cols-\[200px\,repeat\(auto-fill\,minmax\(15\%\,100px\)\)\,300px\] { grid-template-columns: 200px repeat(auto-fill, minmax(15%, 100px)) 300px; } } + diff --git a/tests/arbitrary-variants.test.js b/tests/arbitrary-variants.test.js index 3bb8133c8b6d..ed8e9388c77b 100644 --- a/tests/arbitrary-variants.test.js +++ b/tests/arbitrary-variants.test.js @@ -65,7 +65,7 @@ test('arbitrary variants with modifiers', () => { expect(result.css).toMatchFormattedCss(css` ${defaults} @media (prefers-color-scheme: dark) { - @media (width >= 1024px) { + @media (min-width: 1024px) { .dark\:lg\:hover\:\[\&\>\*\]\:underline > :hover { text-decoration-line: underline; } @@ -121,7 +121,7 @@ test('arbitrary variants are sorted after other variants', () => { .underline { text-decoration-line: underline; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\:underline { text-decoration-line: underline; } @@ -1190,7 +1190,7 @@ it('should output responsive variants + stacked variants in the right order', () return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\:p-1 { padding: 0.25rem; } @@ -1201,7 +1201,7 @@ it('should output responsive variants + stacked variants in the right order', () .\[\&_ul\]\:flex-col ul { flex-direction: column; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:\[\&_ul\]\:flex-row ul { flex-direction: row; } diff --git a/tests/basic-usage.test.css b/tests/basic-usage.test.css index 6efad7540ebd..24a414b45a9b 100644 --- a/tests/basic-usage.test.css +++ b/tests/basic-usage.test.css @@ -1,6 +1,103 @@ *, :before, -:after, +: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-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --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: #3b82f680; + --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: ; +} +::-webkit-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-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --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: #3b82f680; + --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; @@ -53,27 +150,27 @@ .container { width: 100%; } -@media (width >= 640px) { +@media (min-width: 640px) { .container { max-width: 640px; } } -@media (width >= 768px) { +@media (min-width: 768px) { .container { max-width: 768px; } } -@media (width >= 1024px) { +@media (min-width: 1024px) { .container { max-width: 1024px; } } -@media (width >= 1280px) { +@media (min-width: 1280px) { .container { max-width: 1280px; } } -@media (width >= 1536px) { +@media (min-width: 1536px) { .container { max-width: 1536px; } @@ -427,6 +524,7 @@ touch-action: manipulation; } .select-none { + -webkit-user-select: none; user-select: none; } .resize-none { @@ -460,6 +558,7 @@ list-style-image: none; } .appearance-none { + -webkit-appearance: none; appearance: none; } .columns-1 { @@ -1020,69 +1119,110 @@ } .backdrop-blur-lg { --tw-backdrop-blur: blur(16px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(0.5); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-contrast-0 { --tw-backdrop-contrast: contrast(0); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-hue-rotate-90 { --tw-backdrop-hue-rotate: hue-rotate(90deg); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-invert { --tw-backdrop-invert: invert(100%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-opacity-75 { --tw-backdrop-opacity: opacity(0.75); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-saturate-150 { --tw-backdrop-saturate: saturate(1.5); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-sepia { --tw-backdrop-sepia: sepia(100%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter-none { + -webkit-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; + opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } diff --git a/tests/blocklist.test.js b/tests/blocklist.test.js index 78958ca0cb22..e9915350f9e7 100644 --- a/tests/blocklist.test.js +++ b/tests/blocklist.test.js @@ -27,7 +27,7 @@ it('can block classes matched literally', () => { .my-custom-class { color: red; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:hover\:text-sm:hover { font-size: 0.875rem; line-height: 1.25rem; diff --git a/tests/collapse-adjacent-rules.test.js b/tests/collapse-adjacent-rules.test.js index b0f668157e00..69c471686536 100644 --- a/tests/collapse-adjacent-rules.test.js +++ b/tests/collapse-adjacent-rules.test.js @@ -106,7 +106,7 @@ test('collapse adjacent rules', () => { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .some-apply-thing { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -114,7 +114,7 @@ test('collapse adjacent rules', () => { } } @supports (foo: bar) { - @media (width >= 768px) { + @media (min-width: 768px) { .some-apply-thing { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -122,7 +122,7 @@ test('collapse adjacent rules', () => { } } } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:text-center { text-align: center; } @@ -130,7 +130,7 @@ test('collapse adjacent rules', () => { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:text-center { text-align: center; } @@ -138,7 +138,7 @@ test('collapse adjacent rules', () => { font-weight: 700; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\:text-center { text-align: center; } diff --git a/tests/collapse-duplicate-declarations.test.js b/tests/collapse-duplicate-declarations.test.js index c75cc81dc3b3..d36d2e83a7bf 100644 --- a/tests/collapse-duplicate-declarations.test.js +++ b/tests/collapse-duplicate-declarations.test.js @@ -163,6 +163,7 @@ it('should work on a real world example', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` .h-available { + height: 100vh; height: -webkit-fill-available; } `) diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js index 8db24fe8a4d0..4b334e90c25d 100644 --- a/tests/containerPlugin.test.js +++ b/tests/containerPlugin.test.js @@ -8,27 +8,27 @@ test('options are not required', () => { .container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -52,12 +52,12 @@ test('screens can be passed explicitly', () => { .container { width: 100%; } - @media (width >= 400px) { + @media (min-width: 400px) { .container { max-width: 400px; } } - @media (width >= 500px) { + @media (min-width: 500px) { .container { max-width: 500px; } @@ -81,12 +81,12 @@ test('screens are ordered ascending by min-width', () => { .container { width: 100%; } - @media (width >= 400px) { + @media (min-width: 400px) { .container { max-width: 400px; } } - @media (width >= 500px) { + @media (min-width: 500px) { .container { max-width: 500px; } @@ -114,12 +114,12 @@ test('screens are deduplicated by min-width', () => { .container { width: 100%; } - @media (width >= 576px) { + @media (min-width: 576px) { .container { max-width: 576px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } @@ -145,27 +145,27 @@ test('the container can be centered by default', () => { margin-left: auto; margin-right: auto; } - @media (width >= 640px) { + @media (min-width: 640px) { .container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -191,27 +191,27 @@ test('horizontal padding can be included by default', () => { padding-left: 2rem; padding-right: 2rem; } - @media (width >= 640px) { + @media (min-width: 640px) { .container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -248,26 +248,26 @@ test('responsive horizontal padding can be included by default', () => { padding-left: 1rem; padding-right: 1rem; } - @media (width >= 576px) { + @media (min-width: 576px) { .container { max-width: 576px; padding-left: 2rem; padding-right: 2rem; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 992px) { + @media (min-width: 992px) { .container { max-width: 992px; padding-left: 4rem; padding-right: 4rem; } } - @media (width >= 1200px) { + @media (min-width: 1200px) { .container { max-width: 1200px; padding-left: 5rem; @@ -299,12 +299,12 @@ test('setting all options at once', () => { padding-left: 2rem; padding-right: 2rem; } - @media (width >= 400px) { + @media (min-width: 400px) { .container { max-width: 400px; } } - @media (width >= 500px) { + @media (min-width: 500px) { .container { max-width: 500px; } @@ -325,16 +325,16 @@ test('container can use variants', () => { return run('@tailwind components', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\:hover\:container:hover { width: 100%; } - @media (width >= 400px) { + @media (min-width: 400px) { .lg\:hover\:container:hover { max-width: 400px; } } - @media (width >= 500px) { + @media (min-width: 500px) { .lg\:hover\:container:hover { max-width: 500px; } diff --git a/tests/custom-plugins.test.js b/tests/custom-plugins.test.js index 2c754d231de4..ac3547317133 100644 --- a/tests/custom-plugins.test.js +++ b/tests/custom-plugins.test.js @@ -436,17 +436,17 @@ test('plugins can create components with media queries with object syntax', () = .custom-container { width: 100%; } - @media (width >= 100px) { + @media (min-width: 100px) { .custom-container { max-width: 100px; } } - @media (width >= 200px) { + @media (min-width: 200px) { .custom-container { max-width: 200px; } } - @media (width >= 300px) { + @media (min-width: 300px) { .custom-container { max-width: 300px; } @@ -497,7 +497,7 @@ test('media queries can be defined multiple times using objects-in-array syntax' .custom-container { width: 100%; } - @media (width >= 100px) { + @media (min-width: 100px) { .custom-container { max-width: 100px; } @@ -506,7 +506,7 @@ test('media queries can be defined multiple times using objects-in-array syntax' padding: 1rem 0.5rem; display: block; } - @media (width >= 100px) { + @media (min-width: 100px) { .btn { display: inline-block; } @@ -557,7 +557,7 @@ test('plugins can create nested rules', () => { .btn-blue:hover { background-color: #00008b; } - @media (width >= 500px) { + @media (min-width: 500px) { .btn-blue:hover { background-color: orange; } @@ -634,22 +634,22 @@ test('plugins can access the current config', () => { .custom-container { width: 100%; } - @media (width >= 576px) { + @media (min-width: 576px) { .custom-container { max-width: 576px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .custom-container { max-width: 768px; } } - @media (width >= 992px) { + @media (min-width: 992px) { .custom-container { max-width: 992px; } } - @media (width >= 1200px) { + @media (min-width: 1200px) { .custom-container { max-width: 1200px; } @@ -1254,7 +1254,7 @@ test('plugins can be created using the `createPlugin` function', () => { .hover\:test-sm:hover { test-property: 1rem; } - @media (width >= 400px) { + @media (min-width: 400px) { .sm\:test-sm { test-property: 1rem; } @@ -1319,7 +1319,7 @@ test('plugins with extra options can be created using the `createPlugin.withOpti .hover\:banana-sm:hover { test-property: 1rem; } - @media (width >= 400px) { + @media (min-width: 400px) { .sm\:banana-sm { test-property: 1rem; } @@ -1356,7 +1356,7 @@ test('plugins should cache correctly', () => { .banana { position: absolute; } - @media (width >= 400px) { + @media (min-width: 400px) { .sm\:banana { position: absolute; } @@ -1367,7 +1367,7 @@ test('plugins should cache correctly', () => { .apple { position: absolute; } - @media (width >= 400px) { + @media (min-width: 400px) { .sm\:apple { position: absolute; } @@ -1436,7 +1436,7 @@ test('plugins created using `createPlugin.withOptions` do not need to be invoked .hover\:banana-sm:hover { test-property: 1rem; } - @media (width >= 400px) { + @media (min-width: 400px) { .sm\:banana-sm { test-property: 1rem; } @@ -1493,7 +1493,7 @@ test('the configFunction parameter is optional when using the `createPlugin.with .hover\:banana-sm:hover { test-property: 1px; } - @media (width >= 400px) { + @media (min-width: 400px) { .sm\:banana-sm { test-property: 1px; } @@ -1534,7 +1534,7 @@ test('keyframes are not escaped', () => { .foo-\[abc\] { animation: 1s infinite abc; } - @media (width >= 768px) { + @media (min-width: 768px) { @keyframes def { 25.001% { color: #000; diff --git a/tests/custom-separator.test.js b/tests/custom-separator.test.js index 715238d64612..3b1708dfbfba 100644 --- a/tests/custom-separator.test.js +++ b/tests/custom-separator.test.js @@ -33,7 +33,7 @@ test('custom separator', () => { :is(.dark .dark_focus_text-left:focus) { text-align: left; } - @media (width >= 768px) { + @media (min-width: 768px) { .md_hover_text-right:hover { text-align: right; } diff --git a/tests/customConfig.test.js b/tests/customConfig.test.js index e6c6f79ca6ae..b8f459144587 100644 --- a/tests/customConfig.test.js +++ b/tests/customConfig.test.js @@ -12,7 +12,7 @@ test('it uses the values from the custom config file', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 400px) { + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; } @@ -33,7 +33,7 @@ test('custom config can be passed as an object', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 400px) { + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; } @@ -49,7 +49,7 @@ test('custom config path can be passed using `config` property in an object', () return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 400px) { + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; } @@ -72,7 +72,7 @@ test('custom config can be passed under the `config` property', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 400px) { + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; } @@ -97,7 +97,7 @@ test('tailwind.config.cjs is picked up by default', () => { return run('@tailwind utilities').then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 400px) { + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; } @@ -123,7 +123,7 @@ test('tailwind.config.js is picked up by default', () => { return run('@tailwind utilities').then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 400px) { + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; } @@ -149,7 +149,7 @@ test('tailwind.config.cjs is picked up by default when passing an empty object', return run('@tailwind utilities', {}).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 400px) { + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; } @@ -175,7 +175,7 @@ test('tailwind.config.js is picked up by default when passing an empty object', return run('@tailwind utilities', {}).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 400px) { + @media (min-width: 400px) { .mobile\:font-bold { font-weight: 700; } diff --git a/tests/detect-nesting.test.js b/tests/detect-nesting.test.js index 555a80129436..08eeacf98464 100644 --- a/tests/detect-nesting.test.js +++ b/tests/detect-nesting.test.js @@ -88,7 +88,7 @@ it('should not warn when nesting a single rule inside a media query', () => { let input = css` @tailwind utilities; - @media (width >= 768px) { + @media (min-width: 768px) { .nested { } } diff --git a/tests/getVariants.test.js b/tests/getVariants.test.js index af34fd0e3c87..114d80824df6 100644 --- a/tests/getVariants.test.js +++ b/tests/getVariants.test.js @@ -86,7 +86,7 @@ it('should provide selectors for custom plugins that do a combination of paralle return [ ` @supports (foo: ${modifier}) { - @media (width <= 400px) { + @media (max-width: 400px) { &:hover } } @@ -103,7 +103,7 @@ it('should provide selectors for custom plugins that do a combination of paralle let variant = variants.find((v) => v.name === 'foo') expect(variant.selectors({ modifier: 'bar', value: 'baz' })).toEqual([ - '@supports (foo: bar) { @media (width <= 400px) { &:hover } }', + '@supports (foo: bar) { @media (max-width: 400px) { &:hover } }', '.bar\\/baz &:focus', ]) }) diff --git a/tests/import-syntax.test.js b/tests/import-syntax.test.js index a089cb955169..99f5163f7306 100644 --- a/tests/import-syntax.test.js +++ b/tests/import-syntax.test.js @@ -40,27 +40,27 @@ test('using @import instead of @tailwind', () => { .container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -72,7 +72,7 @@ test('using @import instead of @tailwind', () => { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:hover\:text-center:hover { text-align: center; } diff --git a/tests/important-boolean.test.js b/tests/important-boolean.test.js index de1eb3e3eb50..d66f21edc6f3 100644 --- a/tests/important-boolean.test.js +++ b/tests/important-boolean.test.js @@ -80,27 +80,27 @@ test('important boolean', () => { .container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -148,7 +148,7 @@ test('important boolean', () => { :is(.dark .dark\:focus\:text-left:focus) { text-align: left !important; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:hover\:text-right:hover { text-align: right !important; } diff --git a/tests/important-modifier-prefix.test.js b/tests/important-modifier-prefix.test.js index 370c09dc2f34..2c6a8bb62642 100644 --- a/tests/important-modifier-prefix.test.js +++ b/tests/important-modifier-prefix.test.js @@ -31,27 +31,27 @@ test('important modifier with prefix', () => { .\!tw-container { width: 100% !important; } - @media (width >= 640px) { + @media (min-width: 640px) { .\!tw-container { max-width: 640px !important; } } - @media (width >= 768px) { + @media (min-width: 768px) { .\!tw-container { max-width: 768px !important; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .\!tw-container { max-width: 1024px !important; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .\!tw-container { max-width: 1280px !important; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .\!tw-container { max-width: 1536px !important; } @@ -62,12 +62,12 @@ test('important modifier with prefix', () => { .hover\:\!tw-text-center:hover { text-align: center !important; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\:\!tw-opacity-50 { opacity: 0.5 !important; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\:focus\:disabled\:\!tw-float-right:disabled:focus { float: right !important; } diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js index 44b07fbfd824..fe4e14b335fe 100644 --- a/tests/important-modifier.test.js +++ b/tests/important-modifier.test.js @@ -53,27 +53,27 @@ test('important modifier', () => { .\!container { width: 100% !important; } - @media (width >= 640px) { + @media (min-width: 640px) { .\!container { max-width: 640px !important; } } - @media (width >= 768px) { + @media (min-width: 768px) { .\!container { max-width: 768px !important; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .\!container { max-width: 1024px !important; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .\!container { max-width: 1280px !important; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .\!container { max-width: 1536px !important; } @@ -94,12 +94,12 @@ test('important modifier', () => { .hover\:\!text-center:hover { text-align: center !important; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\:\!opacity-50 { opacity: 0.5 !important; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .xl\:focus\:disabled\:\!float-right:disabled:focus { float: right !important; } diff --git a/tests/important-selector.test.js b/tests/important-selector.test.js index b9dc92b3af28..1ec20922cb37 100644 --- a/tests/important-selector.test.js +++ b/tests/important-selector.test.js @@ -78,27 +78,27 @@ test('important selector', () => { .container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -150,11 +150,18 @@ test('important selector', () => { #app :is(.dark .dark\:focus\:text-left:focus) { text-align: left; } - @media (width >= 768px) { + @media (min-width: 768px) { #app .md\:hover\:text-right:hover { text-align: right; } } + #app + :-webkit-any( + [dir='rtl'] + :-webkit-any(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100) + )::-webkit-file-upload-button:hover { + background-color: #000; + } #app :is( [dir='rtl'] :is(.dark .hover\:\[\&\:\:file-selector-button\]\:rtl\:dark\:bg-black\/100) @@ -165,7 +172,7 @@ test('important selector', () => { }) }) -test('pseudo-elements are appended after the `:is()`', () => { +test('pseudo-elements are appended after the `:-webkit-any()`', () => { let config = { important: '#app', darkMode: 'class', diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index 2763db668bd8..b025f8625b1b 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -243,7 +243,7 @@ test('it works', () => { Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .screen-test { color: purple; } @@ -261,7 +261,7 @@ test('it works', () => { .apply-test:hover:focus { font-weight: 700; } - @media (width >= 640px) { + @media (min-width: 640px) { .apply-test { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); @@ -274,27 +274,27 @@ test('it works', () => { .apply-components { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .apply-components { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .apply-components { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .apply-components { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .apply-components { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .apply-components { max-width: 1536px; } @@ -311,7 +311,7 @@ test('it works', () => { .apply-with-existing:hover { font-weight: 400; } - @media (width >= 640px) { + @media (min-width: 640px) { .apply-with-existing:hover { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); @@ -344,7 +344,7 @@ test('it works', () => { --tw-bg-opacity: 1; background-color: rgb(34 197 94 / var(--tw-bg-opacity)); } - @media (width >= 640px) { + @media (min-width: 640px) { @media (prefers-reduced-motion: no-preference) { .group:active .crazy-example:focus { opacity: 0.1; @@ -365,27 +365,27 @@ test('it works', () => { .container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .container { max-width: 1536px; } @@ -401,11 +401,22 @@ test('it works', () => { } *, :before, - :after, + :after { + padding: 5px; + } + *, + :before, + :after { + padding: 5px; + } + ::-webkit-backdrop { + padding: 5px; + } ::backdrop { padding: 5px; } .foo .bg-black { + -webkit-appearance: none; appearance: none; } .inset-6 { @@ -573,93 +584,103 @@ test('it works', () => { } *, :before, - :after, + :after { + margin: 10px; + } + *, + :before, + :after { + margin: 10px; + } + ::-webkit-backdrop { + margin: 10px; + } ::backdrop { margin: 10px; } .hover\:container:hover { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .hover\:container:hover { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .hover\:container:hover { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .hover\:container:hover { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .hover\:container:hover { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .hover\:container:hover { max-width: 1536px; } } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .sm\:container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .sm\:container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .sm\:container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .sm\:container { max-width: 1536px; } } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .md\:container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .md\:container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .md\:container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .md\:container { max-width: 1536px; } @@ -724,7 +745,7 @@ test('it works', () => { @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; + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -735,7 +756,7 @@ test('it works', () => { @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; + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -743,7 +764,7 @@ test('it works', () => { :is(.dark .dark\:custom-util) { background: #abcdef; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:text-center { text-align: center; } @@ -761,7 +782,7 @@ test('it works', () => { } } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:text-center { text-align: center; } @@ -783,7 +804,8 @@ test('it works', () => { @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; + stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, + backdrop-filter; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -791,18 +813,18 @@ test('it works', () => { background: #abcdef !important; } } - @media (width >= 640px) { + @media (min-width: 640px) { .md\:sm\:text-center { text-align: center; } } } - @media (width >= 1280px) and (width <= 1535px) { + @media (min-width: 1280px) and (max-width: 1535px) { .range\:text-right { text-align: right; } } - @media (width >= 640px) and (width <= 767px), (width <= 868px) { + @media (min-width: 640px) and (max-width: 767px), (max-width: 868px) { .multi\:text-left { text-align: left; } diff --git a/tests/layer-at-rules.test.js b/tests/layer-at-rules.test.js index 1c4604835f09..ac1b11bd5ede 100644 --- a/tests/layer-at-rules.test.js +++ b/tests/layer-at-rules.test.js @@ -309,7 +309,7 @@ it('should keep `@supports` rules inside `@layer`s', () => { .test { --tw-test: 1; } - @supports (backdrop-filter: blur(1px)) { + @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .test { --tw-test: 0.9; } diff --git a/tests/match-variants.test.js b/tests/match-variants.test.js index 0c9034eee6e8..2923b10c0dc2 100644 --- a/tests/match-variants.test.js +++ b/tests/match-variants.test.js @@ -244,12 +244,12 @@ it('should be possible to sort variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 500px) { + @media (min-width: 500px) { .testmin-\[500px\]\:underline { text-decoration-line: underline; } } - @media (width >= 700px) { + @media (min-width: 700px) { .testmin-\[700px\]\:italic { font-style: italic; } @@ -290,17 +290,17 @@ it('should be possible to compare arbitrary variants and hardcoded variants', () return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 500px) { + @media (min-width: 500px) { .testmin-\[500px\]\:italic { font-style: italic; } } - @media (width >= 600px) { + @media (min-width: 600px) { .testmin-example\:italic { font-style: italic; } } - @media (width >= 700px) { + @media (min-width: 700px) { .testmin-\[700px\]\:italic { font-style: italic; } @@ -351,25 +351,25 @@ it('should be possible to sort stacked arbitrary variants correctly', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\[100px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (width <= 350px) { + @media (max-width: 350px) { .testmin-\[100px\]\:testmax-\[350px\]\:underline { text-decoration-line: underline; } } - @media (width <= 300px) { + @media (max-width: 300px) { .testmin-\[100px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } } } - @media (width >= 150px) { - @media (width <= 400px) { + @media (min-width: 150px) { + @media (max-width: 400px) { .testmin-\[150px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } @@ -415,8 +415,8 @@ it('should maintain sort from other variants, if sort functions of arbitrary var return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 100px) { - @media (width <= 200px) { + @media (min-width: 100px) { + @media (max-width: 200px) { .testmin-\[100px\]\:testmax-\[200px\]\:hover\:underline:hover, .testmin-\[100px\]\:testmax-\[200px\]\:focus\:underline:focus { text-decoration-line: underline; @@ -464,25 +464,25 @@ it('should sort arbitrary variants left to right (1)', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\[100px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (width <= 300px) { + @media (max-width: 300px) { .testmin-\[100px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } } } - @media (width >= 200px) { - @media (width <= 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { .testmin-\[200px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (width <= 300px) { + @media (max-width: 300px) { .testmin-\[200px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } @@ -529,26 +529,26 @@ it('should sort arbitrary variants left to right (2)', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width <= 400px) { - @media (width >= 100px) { + @media (max-width: 400px) { + @media (min-width: 100px) { .testmax-\[400px\]\:testmin-\[100px\]\:underline { text-decoration-line: underline; } } - @media (width >= 200px) { + @media (min-width: 200px) { .testmax-\[400px\]\:testmin-\[200px\]\:underline { text-decoration-line: underline; } } } - @media (width <= 300px) { - @media (width >= 100px) { + @media (max-width: 300px) { + @media (min-width: 100px) { .testmax-\[300px\]\:testmin-\[100px\]\:underline { text-decoration-line: underline; } } - @media (width >= 200px) { + @media (min-width: 200px) { .testmax-\[300px\]\:testmin-\[200px\]\:underline { text-decoration-line: underline; } @@ -603,28 +603,28 @@ it('should guarantee that we are not passing values from other variants to the w return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 100px) { - @media (width <= 400px) { + @media (min-width: 100px) { + @media (max-width: 400px) { .testmin-\[100px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (width <= 300px) { + @media (max-width: 300px) { .testmin-\[100px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } } } - @media (width >= 200px) { - @media (width <= 400px) { + @media (min-width: 200px) { + @media (max-width: 400px) { .testmin-\[200px\]\:testmax-\[400px\]\:underline { text-decoration-line: underline; } } - @media (width <= 300px) { + @media (max-width: 300px) { .testmin-\[200px\]\:testmax-\[300px\]\:underline { text-decoration-line: underline; } diff --git a/tests/min-max-screen-variants.test.js b/tests/min-max-screen-variants.test.js index b6ea5d254516..beab47ac0999 100644 --- a/tests/min-max-screen-variants.test.js +++ b/tests/min-max-screen-variants.test.js @@ -34,32 +34,32 @@ it('sorts min and max correctly relative to screens and each other', async () => .font-bold { font-weight: 700; } - @media (width <= 800px) { + @media (max-width: 800px) { .max-\[800px\]\:font-bold { font-weight: 700; } } - @media (width <= 700px) { + @media (max-width: 700px) { .max-\[700px\]\:font-bold { font-weight: 700; } } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 700px) { + @media (min-width: 700px) { .min-\[700px\]\:font-bold { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } } - @media (width >= 800px) { + @media (min-width: 800px) { .min-\[800px\]\:font-bold { font-weight: 700; } @@ -95,12 +95,12 @@ it('works when using min variants screens config is empty and variants all use t .font-bold { font-weight: 700; } - @media (width >= 700px) { + @media (min-width: 700px) { .min-\[700px\]\:font-bold { font-weight: 700; } } - @media (width >= 800px) { + @media (min-width: 800px) { .min-\[800px\]\:font-bold { font-weight: 700; } @@ -136,12 +136,12 @@ it('works when using max variants screens config is empty and variants all use t .font-bold { font-weight: 700; } - @media (width <= 800px) { + @media (max-width: 800px) { .max-\[800px\]\:font-bold { font-weight: 700; } } - @media (width <= 700px) { + @media (max-width: 700px) { .max-\[700px\]\:font-bold { font-weight: 700; } @@ -176,32 +176,32 @@ it('converts simple min-width screens for max variant', () => { .font-bold { font-weight: 700; } - @media not all and (width >= 1024px) { + @media not all and (min-width: 1024px) { .max-lg\:font-bold { font-weight: 700; } } - @media (width <= 700px) { + @media (max-width: 700px) { .max-\[700px\]\:font-bold { font-weight: 700; } } - @media not all and (width >= 640px) { + @media not all and (min-width: 640px) { .max-sm\:font-bold { font-weight: 700; } } - @media (width <= 300px) { + @media (max-width: 300px) { .max-\[300px\]\:font-bold { font-weight: 700; } } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } @@ -236,22 +236,22 @@ it('does not have keyed screens for min variant', () => { .font-bold { font-weight: 700; } - @media (width >= 300px) { + @media (min-width: 300px) { .min-\[300px\]\:font-bold { font-weight: 700; } } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 700px) { + @media (min-width: 700px) { .min-\[700px\]\:font-bold { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } @@ -292,12 +292,12 @@ it('warns when using min variants with complex screen configs', async () => { .font-bold { font-weight: 700; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } @@ -336,12 +336,12 @@ it('warns when using min variants with simple configs containing mixed units', a .font-bold { font-weight: 700; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 48rem) { + @media (min-width: 48rem) { .md\:font-bold { font-weight: 700; } @@ -380,12 +380,12 @@ it('warns when using min variants with mixed units (with screens config)', async .font-bold { font-weight: 700; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } @@ -422,7 +422,7 @@ it('warns when using min variants with mixed units (with no screens config)', as .font-bold { font-weight: 700; } - @media (width >= 700px) { + @media (min-width: 700px) { .min-\[700px\]\:font-bold { font-weight: 700; } @@ -464,12 +464,12 @@ it('warns when using max variants with complex screen configs', async () => { .font-bold { font-weight: 700; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } @@ -508,12 +508,12 @@ it('warns when using max variants with simple configs containing mixed units', a .font-bold { font-weight: 700; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 48rem) { + @media (min-width: 48rem) { .md\:font-bold { font-weight: 700; } @@ -552,12 +552,12 @@ it('warns when using max variants with mixed units (with screens config)', async .font-bold { font-weight: 700; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:font-bold { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } @@ -594,7 +594,7 @@ it('warns when using max variants with mixed units (with no screens config)', as .font-bold { font-weight: 700; } - @media (width <= 700px) { + @media (max-width: 700px) { .max-\[700px\]\:font-bold { font-weight: 700; } @@ -631,7 +631,7 @@ it('warns when using min and max variants with mixed units (with no screens conf .font-bold { font-weight: 700; } - @media (width <= 700rem) { + @media (max-width: 700rem) { .max-\[700rem\]\:font-bold { font-weight: 700; } diff --git a/tests/modify-selectors.test.js b/tests/modify-selectors.test.js index aef52b8a43a4..e6ce3cf147c6 100644 --- a/tests/modify-selectors.test.js +++ b/tests/modify-selectors.test.js @@ -69,7 +69,7 @@ test('modify selectors', () => { .foo .foo\:visited\:markdown:visited > p { margin-top: 12px; } - @media (width >= 1024px) { + @media (min-width: 1024px) { .foo .lg\:foo\:disabled\:markdown:disabled > p { margin-top: 12px; } @@ -78,12 +78,12 @@ test('modify selectors', () => { .foo .foo\:hover\:font-bold:hover { font-weight: 700; } - @media (width >= 640px) { + @media (min-width: 640px) { .foo .sm\:foo\:font-bold { font-weight: 700; } } - @media (width >= 768px) { + @media (min-width: 768px) { .foo .md\:foo\:focus\:font-bold:focus { font-weight: 700; } diff --git a/tests/oxide-svelte.test.css b/tests/oxide-svelte.test.css index d4889d746734..ef36fec7769b 100644 --- a/tests/oxide-svelte.test.css +++ b/tests/oxide-svelte.test.css @@ -102,7 +102,7 @@ --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } -@media (width >= 1024px) { +@media (min-width: 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); diff --git a/tests/parseObjectStyles.test.js b/tests/parseObjectStyles.test.js index 1771b58b7ef3..c1a602038649 100644 --- a/tests/parseObjectStyles.test.js +++ b/tests/parseObjectStyles.test.js @@ -82,7 +82,7 @@ test('it parses nested pseudo-selectors', () => { test('it parses top-level media queries', () => { let result = parseObjectStyles({ - '@media (width >= 200px)': { + '@media (min-width: 200px)': { '.foo': { backgroundColor: 'orange', }, @@ -90,7 +90,7 @@ test('it parses top-level media queries', () => { }) expect(toCss(result)).toMatchFormattedCss(css` - @media (width >= 200px) { + @media (min-width: 200px) { .foo { background-color: orange; } @@ -104,7 +104,7 @@ test('it parses nested media queries', () => { backgroundColor: 'red', color: 'white', padding: '1rem', - '@media (width >= 200px)': { + '@media (min-width: 200px)': { backgroundColor: 'orange', }, }, @@ -116,7 +116,7 @@ test('it parses nested media queries', () => { color: white; padding: 1rem; } - @media (width >= 200px) { + @media (min-width: 200px) { .foo { background-color: orange; } @@ -157,7 +157,7 @@ test('it parses pseudo-selectors in nested media queries', () => { color: 'white', padding: '1rem', '&:hover': { - '@media (width >= 200px)': { + '@media (min-width: 200px)': { backgroundColor: 'orange', }, }, @@ -170,7 +170,7 @@ test('it parses pseudo-selectors in nested media queries', () => { color: white; padding: 1rem; } - @media (width >= 200px) { + @media (min-width: 200px) { .foo:hover { background-color: orange; } @@ -232,7 +232,7 @@ test('it parses nested multi-class selectors in media queries', () => { backgroundColor: 'red', color: 'white', padding: '1rem', - '@media (width >= 200px)': { + '@media (min-width: 200px)': { '&.bar': { backgroundColor: 'orange', }, @@ -246,7 +246,7 @@ test('it parses nested multi-class selectors in media queries', () => { color: white; padding: 1rem; } - @media (width >= 200px) { + @media (min-width: 200px) { .foo.bar { background-color: orange; } diff --git a/tests/plugins/fontSize.test.js b/tests/plugins/fontSize.test.js index 4b0099936a1b..99f67eaf6fd8 100644 --- a/tests/plugins/fontSize.test.js +++ b/tests/plugins/fontSize.test.js @@ -168,7 +168,7 @@ test('font-size utilities can include a line-height modifier', () => { font-size: 12px; line-height: 21px; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:text-\[19px\]\/8 { font-size: 19px; line-height: 32px; diff --git a/tests/prefix.test.js b/tests/prefix.test.js index 1306481e3252..c9c0e5f258ac 100644 --- a/tests/prefix.test.js +++ b/tests/prefix.test.js @@ -94,27 +94,27 @@ test('prefix', () => { .tw-container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .tw-container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .tw-container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .tw-container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .tw-container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .tw-container { max-width: 1536px; } @@ -168,7 +168,7 @@ test('prefix', () => { :is(.tw-dark .dark\:focus\:tw-text-left:focus) { text-align: left; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:tw--ml-5 { margin-left: -1.25rem; } @@ -440,7 +440,7 @@ test('prefix with negative values and variants in the safelist', async () => { .hover\:tw--top-1:hover { top: -0.25rem; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:hover\:-tw-top-1:hover, .sm\:hover\:tw--top-1:hover { top: -0.25rem; diff --git a/tests/raw-content.test.css b/tests/raw-content.test.css index f93deda00e5a..cc43ad4c4084 100644 --- a/tests/raw-content.test.css +++ b/tests/raw-content.test.css @@ -1,27 +1,27 @@ .container { width: 100%; } -@media (width >= 640px) { +@media (min-width: 640px) { .container { max-width: 640px; } } -@media (width >= 768px) { +@media (min-width: 768px) { .container { max-width: 768px; } } -@media (width >= 1024px) { +@media (min-width: 1024px) { .container { max-width: 1024px; } } -@media (width >= 1280px) { +@media (min-width: 1280px) { .container { max-width: 1280px; } } -@media (width >= 1536px) { +@media (min-width: 1536px) { .container { max-width: 1536px; } @@ -265,6 +265,7 @@ cursor: pointer; } .select-none { + -webkit-user-select: none; user-select: none; } .resize-none { @@ -277,6 +278,7 @@ list-style-type: disc; } .appearance-none { + -webkit-appearance: none; appearance: none; } .auto-cols-min { @@ -701,69 +703,110 @@ } .backdrop-blur-lg { --tw-backdrop-blur: blur(16px); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-brightness-50 { --tw-backdrop-brightness: brightness(0.5); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-contrast-0 { --tw-backdrop-contrast: contrast(0); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-grayscale { --tw-backdrop-grayscale: grayscale(100%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-hue-rotate-90 { --tw-backdrop-hue-rotate: hue-rotate(90deg); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-invert { --tw-backdrop-invert: invert(100%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-opacity-75 { --tw-backdrop-opacity: opacity(0.75); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-saturate-150 { --tw-backdrop-saturate: saturate(1.5); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-sepia { --tw-backdrop-sepia: sepia(100%); + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter { + -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) + var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) + var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) + var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .backdrop-filter-none { + -webkit-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; + opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; transition-duration: 0.15s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } diff --git a/tests/resolve-defaults-at-rules.test.js b/tests/resolve-defaults-at-rules.test.js index 0ecb4cdc5f40..18424e7127c1 100644 --- a/tests/resolve-defaults-at-rules.test.js +++ b/tests/resolve-defaults-at-rules.test.js @@ -16,7 +16,24 @@ test('basic utilities', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --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; + } + ::-webkit-backdrop { + --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; + } ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; @@ -66,7 +83,24 @@ test('with pseudo-class variants', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --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; + } + ::-webkit-backdrop { + --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; + } ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; @@ -114,7 +148,24 @@ test('with pseudo-element variants', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --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; + } + ::-webkit-backdrop { + --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; + } ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; @@ -158,7 +209,24 @@ test('with multi-class variants', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --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; + } + ::-webkit-backdrop { + --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; + } ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; @@ -202,7 +270,24 @@ test('with multi-class pseudo-element variants', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --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; + } + ::-webkit-backdrop { + --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; + } ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; @@ -252,7 +337,24 @@ test('with multi-class pseudo-element and pseudo-class variants', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --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; + } + ::-webkit-backdrop { + --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; + } ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; @@ -338,7 +440,24 @@ test('with apply', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --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; + } + ::-webkit-backdrop { + --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; + } ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; @@ -374,7 +493,7 @@ test('with apply', async () => { skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } - @media (width >= 768px) { + @media (min-width: 768px) { .media-queries { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) @@ -506,7 +625,7 @@ test('with borders', async () => { --tw-border-opacity: 1; border-color: rgb(239 68 68 / var(--tw-border-opacity)); } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:border-2 { border-width: 2px; } @@ -531,7 +650,26 @@ test('with shadows', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #3b82f680; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + } + ::-webkit-backdrop { + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: #3b82f680; + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + } ::backdrop { --tw-ring-inset: ; --tw-ring-offset-width: 0px; @@ -559,7 +697,7 @@ test('with shadows', async () => { .ring-black\/25 { --tw-ring-color: #00000040; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:shadow-xl { --tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a; --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), @@ -588,7 +726,24 @@ test('when no utilities that need the defaults are used', async () => { expect(result.css).toMatchFormattedCss(css` *, :before, - :after, + :after { + --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; + } + ::-webkit-backdrop { + --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; + } ::backdrop { --tw-translate-x: 0; --tw-translate-y: 0; diff --git a/tests/responsive-and-variants-atrules.test.js b/tests/responsive-and-variants-atrules.test.js index 8eea80729f6f..4d4a0f507b9e 100644 --- a/tests/responsive-and-variants-atrules.test.js +++ b/tests/responsive-and-variants-atrules.test.js @@ -121,7 +121,7 @@ test('responsive and variants atrules', () => { .both-at-root { color: pink; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:focus\:responsive-in-components:focus { color: #00f; } diff --git a/tests/source-maps.test.js b/tests/source-maps.test.js index 88aa59deda7e..4cfcd62d8e9a 100644 --- a/tests/source-maps.test.js +++ b/tests/source-maps.test.js @@ -109,179 +109,279 @@ test('preflight + base have source maps', async () => { "27:2-11 -> 27:2-11", "28:0 -> 28:0", "2:4 -> 30:0", - "31:2-35 -> 31:2-35", - "32:0 -> 32:0", - "2:4 -> 34:0", - "35:2-20 -> 35:2-20", - "36:2-22 -> 36:2-22", - "37:0 -> 37:0", - "2:4 -> 39:0", - "40:2-16 -> 40:2-16", - "41:2-26 -> 41:2-26", - "42:0 -> 42:0", - "2:4 -> 44:0", - "45:2-21 -> 45:2-21", - "46:0 -> 46:0", - "2:4 -> 48:0", - "49:2-109 -> 49:2-109", - "50:2-16 -> 50:2-16", - "51:0 -> 51:0", - "2:4 -> 53:0", - "54:2-16 -> 54:2-16", - "55:0 -> 55:0", - "2:4 -> 57:0", - "58:2-26 -> 58:2-26", - "59:2-16 -> 59:2-16", - "60:2-16 -> 60:2-16", - "61:2-20 -> 61:2-20", - "62:0 -> 62:0", - "2:4 -> 64:0", - "65:2-16 -> 65:2-16", - "66:0 -> 66:0", - "2:4 -> 68:0", - "69:2-12 -> 69:2-12", - "70:0 -> 70:0", - "2:4 -> 72:0", - "73:2-16 -> 73:2-16", - "74:2-23 -> 74:2-23", - "75:2-27 -> 75:2-27", - "76:0 -> 76:0", - "2:4 -> 78:0", - "79:2-32 -> 79:2-32", - "80:2-34 -> 80:2-34", - "81:2-22 -> 81:2-22", - "82:2-17 -> 82:2-17", + "31:2-43 -> 31:2-43", + "32:2-35 -> 32:2-35", + "33:0 -> 33:0", + "2:4 -> 35:0", + "36:2-20 -> 36:2-20", + "37:2-22 -> 37:2-22", + "38:0 -> 38:0", + "2:4 -> 40:0", + "41:2-16 -> 41:2-16", + "42:2-34 -> 42:2-34", + "43:2-26 -> 43:2-26", + "44:0 -> 44:0", + "2:4 -> 46:0", + "47:2-21 -> 47:2-21", + "48:0 -> 48:0", + "2:4 -> 50:0", + "51:2-109 -> 51:2-109", + "52:2-16 -> 52:2-16", + "53:0 -> 53:0", + "2:4 -> 55:0", + "56:2-16 -> 56:2-16", + "57:0 -> 57:0", + "2:4 -> 59:0", + "60:2-26 -> 60:2-26", + "61:2-16 -> 61:2-16", + "62:2-16 -> 62:2-16", + "63:2-20 -> 63:2-20", + "64:0 -> 64:0", + "2:4 -> 66:0", + "67:2-16 -> 67:2-16", + "68:0 -> 68:0", + "2:4 -> 70:0", + "71:2-12 -> 71:2-12", + "72:0 -> 72:0", + "2:4 -> 74:0", + "75:2-16 -> 75:2-16", + "76:2-23 -> 76:2-23", + "77:2-27 -> 77:2-27", + "78:0 -> 78:0", + "2:4 -> 80:0", + "81:2-32 -> 81:2-32", + "82:2-34 -> 82:2-34", "83:2-22 -> 83:2-22", - "84:2-22 -> 84:2-22", - "85:2-16 -> 85:2-16", - "86:2-11 -> 86:2-11", - "87:2-12 -> 87:2-12", - "88:0 -> 88:0", - "2:4 -> 90:0", - "91:2-22 -> 91:2-22", - "92:0 -> 92:0", - "2:4 -> 94:0", - "95:2-28 -> 95:2-28", - "96:2-25 -> 96:2-25", - "97:2-24 -> 97:2-24", - "98:0 -> 98:0", - "2:4 -> 100:0", - "101:2-15 -> 101:2-15", - "102:0 -> 102:0", - "2:4 -> 104:0", - "105:2-18 -> 105:2-18", - "106:0 -> 106:0", - "2:4 -> 108:0", - "109:2-26 -> 109:2-26", - "110:0 -> 110:0", - "2:4 -> 112:0", - "113:2-14 -> 113:2-14", - "114:0 -> 114:0", - "2:4 -> 116:0", - "117:2-31 -> 117:2-31", - "118:2-22 -> 118:2-22", - "119:0 -> 119:0", - "2:4 -> 121:0", - "122:2-26 -> 122:2-26", - "123:0 -> 123:0", - "2:4 -> 125:0", - "126:2-28 -> 126:2-28", - "127:2-15 -> 127:2-15", - "128:0 -> 128:0", - "2:4 -> 130:0", - "131:2-20 -> 131:2-20", - "132:0 -> 132:0", - "2:4 -> 134:0", - "135:2-11 -> 135:2-11", - "136:0 -> 136:0", - "2:4 -> 138:0", - "139:2-11 -> 139:2-11", - "140:2-12 -> 140:2-12", - "141:0 -> 141:0", - "2:4 -> 143:0", - "144:2-12 -> 144:2-12", - "145:0 -> 145:0", - "2:4 -> 147:0", - "148:2-11 -> 148:2-11", - "149:2-12 -> 149:2-12", - "150:2-18 -> 150:2-18", - "151:0 -> 151:0", - "2:4 -> 153:0", - "154:2-12 -> 154:2-12", - "155:0 -> 155:0", - "2:4 -> 157:0", - "158:2-18 -> 158:2-18", - "159:0 -> 159:0", - "2:4 -> 161:0", - "162:2-12 -> 162:2-12", - "163:2-16 -> 163:2-16", - "164:0 -> 164:0", - "2:4 -> 166:0", - "167:2-17 -> 167:2-17", - "168:0 -> 168:0", - "2:4 -> 170:0", - "171:2-17 -> 171:2-17", - "172:0 -> 172:0", - "2:4 -> 174:0", - "175:2-24 -> 175:2-24", - "176:2-16 -> 176:2-16", - "177:0 -> 177:0", - "2:4 -> 179:0", - "180:2-17 -> 180:2-17", - "181:2-14 -> 181:2-14", - "182:0 -> 182:0", - "2:4 -> 184:0", - "185:2-15 -> 185:2-15", - "186:0 -> 186:0", - "2:4 -> 188:0", - "189:2-26 -> 189:2-26", - "190:2-26 -> 190:2-26", - "191:2-21 -> 191:2-21", - "192:2-21 -> 192:2-21", - "193:2-16 -> 193:2-16", - "194:2-16 -> 194:2-16", + "84:2-17 -> 84:2-17", + "85:2-22 -> 85:2-22", + "86:2-22 -> 86:2-22", + "87:2-16 -> 87:2-16", + "88:2-11 -> 88:2-11", + "89:2-12 -> 89:2-12", + "90:0 -> 90:0", + "2:4 -> 92:0", + "93:2-22 -> 93:2-22", + "94:0 -> 94:0", + "2:4 -> 96:0", + "97:2-28 -> 97:2-28", + "98:2-25 -> 98:2-25", + "99:2-24 -> 99:2-24", + "100:0 -> 100:0", + "2:4 -> 102:0", + "103:2-15 -> 103:2-15", + "104:0 -> 104:0", + "2:4 -> 106:0", + "107:2-18 -> 107:2-18", + "108:0 -> 108:0", + "2:4 -> 110:0", + "111:2-26 -> 111:2-26", + "112:0 -> 112:0", + "2:4 -> 114:0", + "115:2-14 -> 115:2-14", + "116:0 -> 116:0", + "2:4 -> 118:0", + "119:2-31 -> 119:2-31", + "120:2-22 -> 120:2-22", + "121:0 -> 121:0", + "2:4 -> 123:0", + "124:2-26 -> 124:2-26", + "125:0 -> 125:0", + "2:4 -> 127:0", + "128:2-28 -> 128:2-28", + "129:2-15 -> 129:2-15", + "130:0 -> 130:0", + "2:4 -> 132:0", + "133:2-20 -> 133:2-20", + "134:0 -> 134:0", + "2:4 -> 136:0", + "137:2-11 -> 137:2-11", + "138:0 -> 138:0", + "2:4 -> 140:0", + "141:2-11 -> 141:2-11", + "142:2-12 -> 142:2-12", + "143:0 -> 143:0", + "2:4 -> 145:0", + "146:2-12 -> 146:2-12", + "147:0 -> 147:0", + "2:4 -> 149:0", + "150:2-11 -> 150:2-11", + "151:2-12 -> 151:2-12", + "152:2-18 -> 152:2-18", + "153:0 -> 153:0", + "2:4 -> 155:0", + "156:2-12 -> 156:2-12", + "157:0 -> 157:0", + "2:4 -> 159:0", + "160:2-18 -> 160:2-18", + "161:0 -> 161:0", + "2:4 -> 163:0", + "164:2-12 -> 164:2-12", + "165:2-16 -> 165:2-16", + "166:0 -> 166:0", + "2:4 -> 168:0", + "169:2-17 -> 169:2-17", + "170:0 -> 170:0", + "2:4 -> 172:0", + "173:2-17 -> 173:2-17", + "174:0 -> 174:0", + "2:4 -> 176:0", + "177:2-24 -> 177:2-24", + "178:2-16 -> 178:2-16", + "179:0 -> 179:0", + "2:4 -> 181:0", + "182:2-17 -> 182:2-17", + "183:2-14 -> 183:2-14", + "184:0 -> 184:0", + "2:4 -> 186:0", + "187:2-15 -> 187:2-15", + "188:0 -> 188:0", + "2:4 -> 190:0", + "191:2-26 -> 191:2-26", + "192:2-26 -> 192:2-26", + "193:2-21 -> 193:2-21", + "194:2-21 -> 194:2-21", "195:2-16 -> 195:2-16", - "196:2-17 -> 196:2-17", - "197:2-17 -> 197:2-17", - "198:2-14 -> 198:2-14", - "199:2-14 -> 199:2-14", - "200:2-19 -> 200:2-19", - "201:2-40 -> 201:2-40", - "202:2-31 -> 202:2-31", - "203:2-30 -> 203:2-30", - "204:2-29 -> 204:2-29", - "205:2-16 -> 205:2-16", - "206:2-21 -> 206:2-21", - "207:2-23 -> 207:2-23", - "208:2-24 -> 208:2-24", - "209:2-25 -> 209:2-25", - "210:2-19 -> 210:2-19", - "211:2-29 -> 211:2-29", - "212:2-30 -> 212:2-30", - "213:2-28 -> 213:2-28", - "214:2-36 -> 214:2-36", - "215:2-29 -> 215:2-29", - "216:2-24 -> 216:2-24", - "217:2-32 -> 217:2-32", - "218:2-13 -> 218:2-13", - "219:2-19 -> 219:2-19", - "220:2-17 -> 220:2-17", - "221:2-18 -> 221:2-18", - "222:2-19 -> 222:2-19", - "223:2-15 -> 223:2-15", - "224:2-17 -> 224:2-17", - "225:2-14 -> 225:2-14", - "226:2-20 -> 226:2-20", - "227:2-22 -> 227:2-22", - "228:2-28 -> 228:2-28", - "229:2-26 -> 229:2-26", - "230:2-27 -> 230:2-27", - "231:2-28 -> 231:2-28", - "232:2-24 -> 232:2-24", - "233:2-25 -> 233:2-25", - "234:2-26 -> 234:2-26", - "235:2-23 -> 235:2-23", - "236:0 -> 236:0", + "196:2-16 -> 196:2-16", + "197:2-16 -> 197:2-16", + "198:2-17 -> 198:2-17", + "199:2-17 -> 199:2-17", + "200:2-14 -> 200:2-14", + "201:2-14 -> 201:2-14", + "202:2-19 -> 202:2-19", + "203:2-40 -> 203:2-40", + "204:2-31 -> 204:2-31", + "205:2-30 -> 205:2-30", + "206:2-29 -> 206:2-29", + "207:2-16 -> 207:2-16", + "208:2-21 -> 208:2-21", + "209:2-23 -> 209:2-23", + "210:2-24 -> 210:2-24", + "211:2-25 -> 211:2-25", + "212:2-19 -> 212:2-19", + "213:2-29 -> 213:2-29", + "214:2-30 -> 214:2-30", + "215:2-28 -> 215:2-28", + "216:2-36 -> 216:2-36", + "217:2-29 -> 217:2-29", + "218:2-24 -> 218:2-24", + "219:2-32 -> 219:2-32", + "220:2-13 -> 220:2-13", + "221:2-19 -> 221:2-19", + "222:2-17 -> 222:2-17", + "223:2-18 -> 223:2-18", + "224:2-19 -> 224:2-19", + "225:2-15 -> 225:2-15", + "226:2-17 -> 226:2-17", + "227:2-14 -> 227:2-14", + "228:2-20 -> 228:2-20", + "229:2-22 -> 229:2-22", + "230:2-28 -> 230:2-28", + "231:2-26 -> 231:2-26", + "232:2-27 -> 232:2-27", + "233:2-28 -> 233:2-28", + "234:2-24 -> 234:2-24", + "235:2-25 -> 235:2-25", + "236:2-26 -> 236:2-26", + "237:2-23 -> 237:2-23", + "238:0 -> 238:0", + "2:4 -> 240:0", + "241:2-26 -> 241:2-26", + "242:2-26 -> 242:2-26", + "243:2-21 -> 243:2-21", + "244:2-21 -> 244:2-21", + "245:2-16 -> 245:2-16", + "246:2-16 -> 246:2-16", + "247:2-16 -> 247:2-16", + "248:2-17 -> 248:2-17", + "249:2-17 -> 249:2-17", + "250:2-14 -> 250:2-14", + "251:2-14 -> 251:2-14", + "252:2-19 -> 252:2-19", + "253:2-40 -> 253:2-40", + "254:2-31 -> 254:2-31", + "255:2-30 -> 255:2-30", + "256:2-29 -> 256:2-29", + "257:2-16 -> 257:2-16", + "258:2-21 -> 258:2-21", + "259:2-23 -> 259:2-23", + "260:2-24 -> 260:2-24", + "261:2-25 -> 261:2-25", + "262:2-19 -> 262:2-19", + "263:2-29 -> 263:2-29", + "264:2-30 -> 264:2-30", + "265:2-28 -> 265:2-28", + "266:2-36 -> 266:2-36", + "267:2-29 -> 267:2-29", + "268:2-24 -> 268:2-24", + "269:2-32 -> 269:2-32", + "270:2-13 -> 270:2-13", + "271:2-19 -> 271:2-19", + "272:2-17 -> 272:2-17", + "273:2-18 -> 273:2-18", + "274:2-19 -> 274:2-19", + "275:2-15 -> 275:2-15", + "276:2-17 -> 276:2-17", + "277:2-14 -> 277:2-14", + "278:2-20 -> 278:2-20", + "279:2-22 -> 279:2-22", + "280:2-28 -> 280:2-28", + "281:2-26 -> 281:2-26", + "282:2-27 -> 282:2-27", + "283:2-28 -> 283:2-28", + "284:2-24 -> 284:2-24", + "285:2-25 -> 285:2-25", + "286:2-26 -> 286:2-26", + "287:2-23 -> 287:2-23", + "288:0 -> 288:0", + "2:4 -> 290:0", + "291:2-26 -> 291:2-26", + "292:2-26 -> 292:2-26", + "293:2-21 -> 293:2-21", + "294:2-21 -> 294:2-21", + "295:2-16 -> 295:2-16", + "296:2-16 -> 296:2-16", + "297:2-16 -> 297:2-16", + "298:2-17 -> 298:2-17", + "299:2-17 -> 299:2-17", + "300:2-14 -> 300:2-14", + "301:2-14 -> 301:2-14", + "302:2-19 -> 302:2-19", + "303:2-40 -> 303:2-40", + "304:2-31 -> 304:2-31", + "305:2-30 -> 305:2-30", + "306:2-29 -> 306:2-29", + "307:2-16 -> 307:2-16", + "308:2-21 -> 308:2-21", + "309:2-23 -> 309:2-23", + "310:2-24 -> 310:2-24", + "311:2-25 -> 311:2-25", + "312:2-19 -> 312:2-19", + "313:2-29 -> 313:2-29", + "314:2-30 -> 314:2-30", + "315:2-28 -> 315:2-28", + "316:2-36 -> 316:2-36", + "317:2-29 -> 317:2-29", + "318:2-24 -> 318:2-24", + "319:2-32 -> 319:2-32", + "320:2-13 -> 320:2-13", + "321:2-19 -> 321:2-19", + "322:2-17 -> 322:2-17", + "323:2-18 -> 323:2-18", + "324:2-19 -> 324:2-19", + "325:2-15 -> 325:2-15", + "326:2-17 -> 326:2-17", + "327:2-14 -> 327:2-14", + "328:2-20 -> 328:2-20", + "329:2-22 -> 329:2-22", + "330:2-28 -> 330:2-28", + "331:2-26 -> 331:2-26", + "332:2-27 -> 332:2-27", + "333:2-28 -> 333:2-28", + "334:2-24 -> 334:2-24", + "335:2-25 -> 335:2-25", + "336:2-26 -> 336:2-26", + "337:2-23 -> 337:2-23", + "338:0 -> 338:0", ] `) }) diff --git a/tests/syntax-svelte.test.js b/tests/syntax-svelte.test.js index d354eee42570..b6df41f13d85 100644 --- a/tests/syntax-svelte.test.js +++ b/tests/syntax-svelte.test.js @@ -20,7 +20,7 @@ test('it detects svelte based on the file extension', () => { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); @@ -66,7 +66,7 @@ test('using raw with svelte extension', () => { --tw-bg-opacity: 1; background-color: rgb(239 68 68 / var(--tw-bg-opacity)); } - @media (width >= 1024px) { + @media (min-width: 1024px) { .lg\:hover\:bg-blue-500:hover { --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); diff --git a/tests/tailwind-screens.test.js b/tests/tailwind-screens.test.js index 91eb93c6e309..009c02bc3762 100644 --- a/tests/tailwind-screens.test.js +++ b/tests/tailwind-screens.test.js @@ -19,7 +19,7 @@ test('class variants are inserted at `@tailwind variants`', async () => { .hover\:font-bold:hover { font-weight: 700; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } @@ -50,7 +50,7 @@ test('`@tailwind screens` works as an alias for `@tailwind variants`', async () .hover\:font-bold:hover { font-weight: 700; } - @media (width >= 768px) { + @media (min-width: 768px) { .md\:font-bold { font-weight: 700; } diff --git a/tests/util/defaults.js b/tests/util/defaults.js index bea97d338154..77749244c782 100644 --- a/tests/util/defaults.js +++ b/tests/util/defaults.js @@ -9,7 +9,106 @@ export function defaults({ defaultRingColor = `#3b82f680` } = {}) { return css` *, :before, - :after, + :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-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --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: ${defaultRingColor}; + --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: ; + } + + ::-webkit-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-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --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: ${defaultRingColor}; + --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; diff --git a/tests/variant-grouping.test.skip.js b/tests/variant-grouping.test.skip.js index 156d4a5cfc65..aba113783009 100644 --- a/tests/variant-grouping.test.skip.js +++ b/tests/variant-grouping.test.skip.js @@ -38,7 +38,7 @@ it('should be possible to group variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 768px) { + @media (min-width: 768px) { .md\:\(underline\2c italic\) { font-style: italic; text-decoration-line: underline; @@ -97,7 +97,7 @@ it('should be possible to group multiple variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 768px) { + @media (min-width: 768px) { @media (prefers-color-scheme: dark) { .md\:dark\:\(underline\2c italic\) { font-style: italic; @@ -123,7 +123,7 @@ it('should be possible to group nested grouped variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 768px) { + @media (min-width: 768px) { .md\:\(underline\2c italic\2c hover\:\(uppercase\2c font-bold\)\) { font-style: italic; text-decoration-line: underline; @@ -155,7 +155,7 @@ it('should be possible to use nested multiple grouped variants', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 768px) { + @media (min-width: 768px) { .md\:\(text-black\2c dark\:\(text-white\2c hover\:focus\:text-gray-100\)\) { --tw-text-opacity: 1; color: rgb(0 0 0 / var(--tw-text-opacity)); @@ -195,7 +195,7 @@ it('should be possible to mix and match nesting and different variant combinatio return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (width >= 768px) { + @media (min-width: 768px) { .md\:\[\&\>\*\]\:\(text-black\2c dark\:\(text-white\2c hover\:\[\@supports\(color\:green\)\]\:\[\&\:nth-child\(2n\=1\)\]\:text-gray-100\)\) diff --git a/tests/variants.test.css b/tests/variants.test.css index 57291001abf8..3832e0ddb9a5 100644 --- a/tests/variants.test.css +++ b/tests/variants.test.css @@ -1,6 +1,103 @@ *, :before, -:after, +: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-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --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: #3b82f680; + --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: ; +} +::-webkit-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-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --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: #3b82f680; + --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; @@ -51,17 +148,31 @@ --tw-backdrop-sepia: ; } .first-letter\:flex:first-letter, -.first-line\:flex:first-line, -.marker\:flex ::marker, -.marker\:flex::marker, +.first-line\:flex:first-line { + display: flex; +} +.marker\:flex ::marker { + display: flex; +} +.marker\:flex::marker { + display: flex; +} .selection\:flex ::selection, .selection\:flex::selection { display: flex; } +.file\:flex::-webkit-file-upload-button { + display: flex; +} .file\:flex::file-selector-button { display: flex; } -.placeholder\:flex::placeholder, +.placeholder\:flex::placeholder { + display: flex; +} +.backdrop\:flex::-webkit-backdrop { + display: flex; +} .backdrop\:flex::backdrop { display: flex; } @@ -105,13 +216,20 @@ .hover\:flex:hover { display: flex; } +.file\:hover\:flex:hover::-webkit-file-upload-button { + display: flex; +} .file\:hover\:flex:hover::file-selector-button { display: flex; } .open\:hover\:flex:hover[open], .focus\:flex:focus, -.focus\:hover\:flex:hover:focus, -.focus-visible\:flex:focus-visible, +.focus\:hover\:flex:hover:focus { + display: flex; +} +.focus-visible\:flex:focus-visible { + display: flex; +} .active\:flex:active, .enabled\:flex:enabled, .disabled\:flex:disabled, @@ -189,10 +307,6 @@ :-webkit-any([dir='rtl'] .rtl\:flex) { display: flex; } -.open\:hover\:flex:hover[open], -.focus\:flex:focus, -.focus\:hover\:flex:hover:focus, -.focus-visible\:flex:focus-visible, .active\:flex:active, .enabled\:flex:enabled, .disabled\:flex:disabled, @@ -300,31 +414,31 @@ display: flex; } } -@media (width >= 640px) { +@media (min-width: 640px) { .sm\:flex, .sm\:active\:flex:active { display: flex; } } -@media (width >= 768px) { +@media (min-width: 768px) { .md\:flex, .group:focus .md\:group-focus\:flex { display: flex; } } -@media (width >= 1024px) { +@media (min-width: 1024px) { .lg\:flex, :is(.dark .lg\:dark\:flex) { display: flex; } } -@media (width >= 1280px) { +@media (min-width: 1280px) { .xl\:flex, :is(.dark .xl\:dark\:disabled\:flex:disabled) { display: flex; } } -@media (width >= 1536px) { +@media (min-width: 1536px) { .\32 xl\:flex { display: flex; } diff --git a/tests/variants.test.js b/tests/variants.test.js index 1e88aa4e17af..f2a2de075acd 100644 --- a/tests/variants.test.js +++ b/tests/variants.test.js @@ -37,9 +37,15 @@ test('order matters and produces different behaviour', () => { return run('@tailwind utilities', config).then((result) => { expect(result.css).toMatchFormattedCss(css` + .file\:hover\:\[--value\:2\]:hover::-webkit-file-upload-button { + --value: 2; + } .file\:hover\:\[--value\:2\]:hover::file-selector-button { --value: 2; } + .hover\:file\:\[--value\:1\]::-webkit-file-upload-button:hover { + --value: 1; + } .hover\:file\:\[--value\:1\]::file-selector-button:hover { --value: 1; } @@ -318,7 +324,7 @@ test('custom addVariant with more complex media query params', () => { return run('@tailwind components;@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media screen and (width <= 600px) { + @media screen and (max-width: 600px) { .magic\:text-center { text-align: center; } @@ -491,7 +497,7 @@ it('should be possible to use responsive modifiers that are defined with special return run('@tailwind utilities', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (width <= 399px) { + @media (max-width: 399px) { .\ { return expect(result.css).toMatchFormattedCss(css` - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:underline { text-decoration-line: underline; } @@ -538,31 +544,31 @@ it('variants for utilities should not be produced in a file without a utilities return run('@tailwind components', config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:container { width: 100%; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:container { max-width: 640px; } } - @media (width >= 768px) { + @media (min-width: 768px) { .sm\:container { max-width: 768px; } } - @media (width >= 1024px) { + @media (min-width: 1024px) { .sm\:container { max-width: 1024px; } } - @media (width >= 1280px) { + @media (min-width: 1280px) { .sm\:container { max-width: 1280px; } } - @media (width >= 1536px) { + @media (min-width: 1536px) { .sm\:container { max-width: 1536px; } @@ -622,7 +628,7 @@ it('appends variants to the correct place when using postcss documents', () => { .underline { text-decoration-line: underline; } - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:underline { text-decoration-line: underline; } @@ -654,7 +660,7 @@ it('variants support multiple, grouped selectors (html)', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:base1 .foo, .sm\:base1 .bar, .sm\:base2 .bar .base2-foo { @@ -687,7 +693,7 @@ it('variants support multiple, grouped selectors (apply)', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (width >= 640px) { + @media (min-width: 640px) { .baz .foo, .baz .bar { color: red; @@ -716,7 +722,7 @@ it('variants only picks the used selectors in a group (html)', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (width >= 640px) { + @media (min-width: 640px) { .sm\:b { color: red; } @@ -747,7 +753,7 @@ it('variants only picks the used selectors in a group (apply)', () => { return run(input, config).then((result) => { return expect(result.css).toMatchFormattedCss(css` - @media (width >= 640px) { + @media (min-width: 640px) { .baz { color: red; } @@ -915,7 +921,7 @@ test('class inside pseudo-class function :has', () => { html:has(.hover\:foo:hover) { color: green; } - @media (width >= 640px) { + @media (min-width: 640px) { :where(.sm\:foo) { color: red; } @@ -995,7 +1001,7 @@ test('variants with slashes in them work', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (aspect-ratio >= 1 / 10) { + @media (min-aspect-ratio: 1 / 10) { .ar-1\/10\:flex { display: flex; } @@ -1031,7 +1037,7 @@ test('variants with slashes support modifiers', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @media (aspect-ratio >= 1 / 10) and (foo: 20) { + @media (min-aspect-ratio: 1 / 10) and (foo: 20) { .ar-1\/10\/20\:flex { display: flex; }