Add scripting variants

Author: lukewarlow

src/corePlugins.js

@@ -460,6 +460,11 @@ export let variantPlugins = {
     addVariant('contrast-more', '@media (prefers-contrast: more)')
     addVariant('contrast-less', '@media (prefers-contrast: less)')
   },
+
+  scriptingVariants: ({ addVariant }) => {
+    addVariant('noscript', '@media (scripting: none)')
+    addVariant('scripting', '@media (scripting: enabled)')
+  },
 }
 
 let cssTransformValue = [

src/lib/setupContextUtils.js

@@ -759,6 +759,7 @@ function resolvePlugins(context, root) {
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['scriptingVariants'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]

tests/plugins/variants/scriptingVariants.test.js

@@ -0,0 +1,14 @@
+import { css, quickVariantPluginTest } from '../../util/run'
+
+quickVariantPluginTest('scriptingVariants').toMatchFormattedCss(css`
+  @media (scripting: none) {
+    .noscript\:flex {
+      display: flex;
+    }
+  }
+  @media (scripting: enabled) {
+    .scripting\:flex {
+      display: flex;
+    }
+  }
+`)