Make motion variants stackable

src/lib/substituteVariantsAtRules.js

@@ -90,6 +90,28 @@ const defaultVariantGenerators = config => ({
   even: generatePseudoClassVariant('nth-child(even)', 'even'),
 })
 
+function prependStackableVariants(atRule, variants) {
+  const stackableVariants = ['motion-safe', 'motion-reduced']
+
+  if (!_.some(variants, v => stackableVariants.includes(v))) {
+    return variants
+  }
+
+  if (_.every(variants, v => stackableVariants.includes(v))) {
+    return variants
+  }
+
+  const variantsParent = postcss.atRule({
+    name: 'variants',
+    params: variants.filter(v => stackableVariants.includes(v)).join(', '),
+  })
+  atRule.before(variantsParent)
+  variantsParent.append(atRule)
+  variants = _.without(variants, ...stackableVariants)
+
+  return variants
+}
+
 export default function(config, { variantGenerators: pluginVariantGenerators }) {
   return function(css) {
     const variantGenerators = {
@@ -97,25 +119,34 @@ export default function(config, { variantGenerators: pluginVariantGenerators })
       ...pluginVariantGenerators,
     }
 
-    css.walkAtRules('variants', atRule => {
-      const variants = postcss.list.comma(atRule.params).filter(variant => variant !== '')
+    let variantsFound = false
 
-      if (variants.includes('responsive')) {
-        const responsiveParent = postcss.atRule({ name: 'responsive' })
-        atRule.before(responsiveParent)
-        responsiveParent.append(atRule)
-      }
+    do {
+      variantsFound = false
+      css.walkAtRules('variants', atRule => {
+        variantsFound = true
 
-      _.forEach(_.without(ensureIncludesDefault(variants), 'responsive'), variant => {
-        if (!variantGenerators[variant]) {
-          throw new Error(
-            `Your config mentions the "${variant}" variant, but "${variant}" doesn't appear to be a variant. Did you forget or misconfigure a plugin that supplies that variant?`
-          )
+        let variants = postcss.list.comma(atRule.params).filter(variant => variant !== '')
+
+        if (variants.includes('responsive')) {
+          const responsiveParent = postcss.atRule({ name: 'responsive' })
+          atRule.before(responsiveParent)
+          responsiveParent.append(atRule)
         }
-        variantGenerators[variant](atRule, config)
-      })
 
-      atRule.remove()
-    })
+        const remainingVariants = prependStackableVariants(atRule, variants)
+
+        _.forEach(_.without(ensureIncludesDefault(remainingVariants), 'responsive'), variant => {
+          if (!variantGenerators[variant]) {
+            throw new Error(
+              `Your config mentions the "${variant}" variant, but "${variant}" doesn't appear to be a variant. Did you forget or misconfigure a plugin that supplies that variant?`
+            )
+          }
+          variantGenerators[variant](atRule, config)
+        })
+
+        atRule.remove()
+      })
+    } while (variantsFound)
   }
 }