add scripting variants

Author: lukewarlow

packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap

@@ -8449,6 +8449,8 @@ exports[`getVariants 1`] = `
       "print",
       "forced-colors",
       "inverted-colors",
+      "noscript",
+      "scripting",
     ],
   },
   {
@@ -9177,5 +9179,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": [],
+  },
 ]
 `;

packages/tailwindcss/src/variants.test.ts

@@ -1917,6 +1917,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([

packages/tailwindcss/src/variants.ts

@@ -1147,6 +1147,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
 }