From 5c399b47d691d5fcbdf98cae5f107e4dcc0cb13f Mon Sep 17 00:00:00 2001 From: Luke Warlow Date: Wed, 17 Apr 2024 23:04:59 +0200 Subject: [PATCH 1/2] add `scripting` variants --- .../__snapshots__/intellisense.test.ts.snap | 16 +++++++++++++++ packages/tailwindcss/src/variants.test.ts | 20 +++++++++++++++++++ packages/tailwindcss/src/variants.ts | 3 +++ 3 files changed, 39 insertions(+) diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap index 04aeb792cd1c..c10eed450b69 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -8449,6 +8449,8 @@ exports[`getVariants 1`] = ` "print", "forced-colors", "inverted-colors", + "noscript", + "scripting", ], }, { @@ -9184,5 +9186,19 @@ exports[`getVariants 1`] = ` "selectors": [Function], "values": [], }, + { + "hasDash": true, + "isArbitrary": false, + "name": "noscript", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "scripting", + "selectors": [Function], + "values": [], + }, ] `; diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts index 989ba83b08af..b814c084f299 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -1926,6 +1926,26 @@ test('inverted-colors', async () => { `) }) +test('noscript', async () => { + expect(await run(['noscript:flex'])).toMatchInlineSnapshot(` + "@media (scripting: none) { + .noscript\\: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..826f613f386c 100644 --- a/packages/tailwindcss/src/variants.ts +++ b/packages/tailwindcss/src/variants.ts @@ -1150,6 +1150,9 @@ export function createVariants(theme: Theme): Variants { staticVariant('inverted-colors', ['@media (inverted-colors: inverted)']) } + staticVariant('noscript', ['@media (scripting: none)']) + staticVariant('scripting', ['@media (scripting: enabled)']) + return variants } From 71bc0510d98ddcad46dcf2b520376129fec4b060 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Wed, 26 Feb 2025 11:48:33 +0100 Subject: [PATCH 2/2] Add `scripting-initial`, rename `noscript\' to `scripting-none` and add feature flags and change log --- CHANGELOG.md | 1 + .../src/__snapshots__/intellisense.test.ts.snap | 12 ++++++++++-- packages/tailwindcss/src/feature-flags.ts | 1 + packages/tailwindcss/src/variants.test.ts | 16 +++++++++++++--- packages/tailwindcss/src/variants.ts | 14 +++++++++++--- 5 files changed, 36 insertions(+), 8 deletions(-) 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 c10eed450b69..ba6dd4141425 100644 --- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap +++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap @@ -8449,7 +8449,8 @@ exports[`getVariants 1`] = ` "print", "forced-colors", "inverted-colors", - "noscript", + "scripting-initial", + "scripting-none", "scripting", ], }, @@ -9189,7 +9190,14 @@ exports[`getVariants 1`] = ` { "hasDash": true, "isArbitrary": false, - "name": "noscript", + "name": "scripting-initial", + "selectors": [Function], + "values": [], + }, + { + "hasDash": true, + "isArbitrary": false, + "name": "scripting-none", "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 b814c084f299..84c2a4ef3071 100644 --- a/packages/tailwindcss/src/variants.test.ts +++ b/packages/tailwindcss/src/variants.test.ts @@ -1926,10 +1926,20 @@ test('inverted-colors', async () => { `) }) -test('noscript', async () => { - expect(await run(['noscript:flex'])).toMatchInlineSnapshot(` +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) { - .noscript\\:flex { + .scripting-none\\:flex { display: flex; } }" diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts index 826f613f386c..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,8 +1155,11 @@ export function createVariants(theme: Theme): Variants { staticVariant('inverted-colors', ['@media (inverted-colors: inverted)']) } - staticVariant('noscript', ['@media (scripting: none)']) - staticVariant('scripting', ['@media (scripting: enabled)']) + if (enableScripting) { + staticVariant('scripting-initial', ['@media (scripting: initial-only)']) + staticVariant('scripting-none', ['@media (scripting: none)']) + staticVariant('scripting', ['@media (scripting: enabled)']) + } return variants }