From 1b6230f54f4921da7fe7fba33bd6ed647ff70832 Mon Sep 17 00:00:00 2001
From: Jordan Pittman <jordan@cryptica.me>
Date: Fri, 28 Mar 2025 12:28:20 -0400
Subject: [PATCH] Rework scripting variants (#17431)

This replaces the `scripting`, `scripting-none`, and `scripting-initial`
variants with one `noscript` variant that matches the name of the HTML
`<noscript>` element. The previous `scripting` can then be represented
as `not-noscript` e.g. `not-noscript:flex`.
---
 CHANGELOG.md                                  |  2 +-
 .../__snapshots__/intellisense.test.ts.snap   | 20 ++----------
 packages/tailwindcss/src/variants.test.ts     | 31 ++++++-------------
 packages/tailwindcss/src/variants.ts          |  4 +--
 4 files changed, 13 insertions(+), 44 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7999139ce..31bd8c820 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,7 +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 ([#11929](https://github.com/tailwindlabs/tailwindcss/pull/11929))
+- _Experimental_: Add `noscript` variant ([#11929](https://github.com/tailwindlabs/tailwindcss/pull/11929), [#17431](https://github.com/tailwindlabs/tailwindcss/pull/17431))
 - _Experimental_: Add `items-baseline-last` utility ([#13888](https://github.com/tailwindlabs/tailwindcss/pull/13888))
 - _Experimental_: Add `pointer-none`, `pointer-coarse`, and `pointer-fine` variant ([#16946](https://github.com/tailwindlabs/tailwindcss/pull/16946))
 - _Experimental_: Add `any-pointer-none`, `any-pointer-coarse`, and `any-pointer-fine` variants ([#16941](https://github.com/tailwindlabs/tailwindcss/pull/16941))
diff --git a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
index c9a759beb..5fd87451a 100644
--- a/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
+++ b/packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap
@@ -8472,9 +8472,7 @@ exports[`getVariants 1`] = `
       "any-pointer-none",
       "any-pointer-coarse",
       "any-pointer-fine",
-      "scripting-initial",
-      "scripting-none",
-      "scripting",
+      "noscript",
     ],
   },
   {
@@ -9255,21 +9253,7 @@ exports[`getVariants 1`] = `
   {
     "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",
+    "name": "noscript",
     "selectors": [Function],
     "values": [],
   },
diff --git a/packages/tailwindcss/src/variants.test.ts b/packages/tailwindcss/src/variants.test.ts
index eedeefbc0..18e9075b8 100644
--- a/packages/tailwindcss/src/variants.test.ts
+++ b/packages/tailwindcss/src/variants.test.ts
@@ -1449,6 +1449,7 @@ test('not', async () => {
         'not-contrast-less:flex',
         'not-forced-colors:flex',
         'not-nth-2:flex',
+        'not-noscript:flex',
 
         'not-sm:flex',
         'not-min-sm:flex',
@@ -1560,6 +1561,12 @@ test('not', async () => {
       }
     }
 
+    @media not (scripting: none) {
+      .not-noscript\\:flex {
+        display: flex;
+      }
+    }
+
     .not-hocus\\:flex:not(:hover, :focus), .not-device-hocus\\:flex:not(:hover, :focus) {
       display: flex;
     }
@@ -1987,30 +1994,10 @@ test('any-pointer-fine', 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(`
+  expect(await run(['noscript:flex'])).toMatchInlineSnapshot(`
     "@media (scripting: none) {
-      .scripting-none\\:flex {
-        display: flex;
-      }
-    }"
-  `)
-})
-
-test('scripting', async () => {
-  expect(await run(['scripting:flex'])).toMatchInlineSnapshot(`
-    "@media (scripting: enabled) {
-      .scripting\\:flex {
+      .noscript\\:flex {
         display: flex;
       }
     }"
diff --git a/packages/tailwindcss/src/variants.ts b/packages/tailwindcss/src/variants.ts
index dc387c55f..7d28b7a41 100644
--- a/packages/tailwindcss/src/variants.ts
+++ b/packages/tailwindcss/src/variants.ts
@@ -1165,9 +1165,7 @@ export function createVariants(theme: Theme): Variants {
   }
 
   if (enableScripting) {
-    staticVariant('scripting-initial', ['@media (scripting: initial-only)'])
-    staticVariant('scripting-none', ['@media (scripting: none)'])
-    staticVariant('scripting', ['@media (scripting: enabled)'])
+    staticVariant('noscript', ['@media (scripting: none)'])
   }
 
   return variants