Add @starting-style variant

nix6839 · Oct 9, 2023 · d253525 · d253525
1 parent 31a80b1
commit d253525
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -38,6 +38,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Extend default `opacity` scale to include all steps of 5 ([#11832](https://github.com/tailwindlabs/tailwindcss/pull/11832))
 - Update Preflight `html` styles to include shadow DOM `:host` pseudo-class ([#11200](https://github.com/tailwindlabs/tailwindcss/pull/11200))
 - Support loading plugins by package / file name ([#12087](https://github.com/tailwindlabs/tailwindcss/pull/12087))
+- Add `@starting-style` variant ([#12040](https://github.com/tailwindlabs/tailwindcss/pull/12040))
 
 ### Changed
 

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -460,6 +460,10 @@ export let variantPlugins = {
     addVariant('contrast-more', '@media (prefers-contrast: more)')
     addVariant('contrast-less', '@media (prefers-contrast: less)')
   },
+
+  startingStyleVariant: ({ addVariant }) => {
+    addVariant('starting', '@starting-style')
+  },
 }
 
 let cssTransformValue = [

diff --git a/src/lib/setupContextUtils.js b/src/lib/setupContextUtils.js
@@ -761,6 +761,7 @@ function resolvePlugins(context, root) {
     variantPlugins['printVariant'],
     variantPlugins['screenVariants'],
     variantPlugins['orientationVariants'],
+    variantPlugins['startingStyleVariant'],
   ]
 
   return [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins]

diff --git a/tests/plugins/variants/startingStyleVariant.test.js b/tests/plugins/variants/startingStyleVariant.test.js
@@ -0,0 +1,9 @@
+import { css, quickVariantPluginTest } from '../../util/run'
+
+quickVariantPluginTest('startingStyleVariant').toMatchFormattedCss(css`
+  @starting-style {
+    .starting\:flex {
+      display: flex;
+    }
+  }
+`)