diff --git a/CHANGELOG.md b/CHANGELOG.md index e2cf69322edc..0a83ed2ea95b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - _Experimental_: Add `details-content` variant ([#15319](https://github.com/tailwindlabs/tailwindcss/pull/15319)) - _Experimental_: Add `inverted-colors` variant ([#11693](https://github.com/tailwindlabs/tailwindcss/pull/11693)) +- _Experimental_: Add `scripting`, `scripting-none`, and `scripting-initial` variants ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128)) - _Experimental_: Add `user-valid` and `user-invalid` variants ([#12370](https://github.com/tailwindlabs/tailwindcss/pull/12370)) - _Experimental_: Add `wrap-anywhere`, `wrap-break-word`, and `wrap-normal` utilities ([#12128](https://github.com/tailwindlabs/tailwindcss/pull/12128)) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 04aeb792cd1c..ba6dd4141425 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -8449,6 +8449,9 @@ exports[`getVariants 1`] = ` "print", "forced-colors", "inverted-colors", + "scripting-initial", + "scripting-none", + "scripting", ], }, { @@ -9184,5 +9187,26 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "scripting-initial", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "scripting-none", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "scripting", + "selectors": [Function], + "values": [], + }, ] `; diff --git a/packages/tailwindcss/src/feature-flags.ts b/packages/tailwindcss/src/feature-flags.ts index ccba9055ef7a..5852e95b2072 100644 --- a/packages/tailwindcss/src/feature-flags.ts +++ b/packages/tailwindcss/src/feature-flags.ts @@ -1,4 +1,5 @@ export const enableDetailsContent = process.env.FEATURES_ENV !== 'stable' export const enableInvertedColors = process.env.FEATURES_ENV !== 'stable' +export const enableScripting = process.env.FEATURES_ENV !== 'stable' export const enableUserValid = process.env.FEATURES_ENV !== 'stable' export const enableWrapAnywhere = process.env.FEATURES_ENV !== 'stable' diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 989ba83b08af..84c2a4ef3071 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -1926,6 +1926,36 @@ test('inverted-colors', async () => { `) }) +test('scripting-initial', async () => { + expect(await run(['scripting-initial:flex'])).toMatchInlineSnapshot(` + "@media (scripting: initial-only) { + .scripting-initial\\:flex { + display: flex; + } + }" + `) +}) + +test('scripting-none', async () => { + expect(await run(['scripting-none:flex'])).toMatchInlineSnapshot(` + "@media (scripting: none) { + .scripting-none\\:flex { + display: flex; + } + }" + `) +}) + +test('scripting', async () => { + expect(await run(['scripting:flex'])).toMatchInlineSnapshot(` + "@media (scripting: enabled) { + .scripting\\:flex { + display: flex; + } + }" + `) +}) + test('nth', async () => { expect( await run([ diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 7d7df8cd03d0..3967c52034aa 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -12,7 +12,12 @@ import { type StyleRule, } from './ast' import { type Variant } from './candidate' -import { enableDetailsContent, enableInvertedColors, enableUserValid } from './feature-flags' +import { + enableDetailsContent, + enableInvertedColors, + enableScripting, + enableUserValid, +} from './feature-flags' import type { Theme } from './theme' import { compareBreakpoints } from './utils/compare-breakpoints' import { DefaultMap } from './utils/default-map' @@ -1150,6 +1155,12 @@ export function createVariants(theme: Theme): Variants { staticVariant('inverted-colors', ['@media (inverted-colors: inverted)']) } + if (enableScripting) { + staticVariant('scripting-initial', ['@media (scripting: initial-only)']) + staticVariant('scripting-none', ['@media (scripting: none)']) + staticVariant('scripting', ['@media (scripting: enabled)']) + } + return variants }