Sort variant plugins relative to custom variant plugins in BC compatible way

Author: adamwathan

src/corePlugins/index.js

@@ -11,7 +11,7 @@ const {
 } = require('../pluginUtils')
 
 module.exports = {
-  variants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
+  pseudoClassVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
     let pseudoVariants = [
       ['first', 'first-child'],
       ['last', 'last-child'],
@@ -57,7 +57,8 @@ module.exports = {
         })
       )
     }
-
+  },
+  reducedMotionVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
     addVariant(
       'motion-safe',
       transformLastClasses(
@@ -77,7 +78,8 @@ module.exports = {
         () => postcss.atRule({ name: 'media', params: '(prefers-reduced-motion: reduce)' })
       )
     )
-
+  },
+  directionVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
     addVariant(
       'ltr',
       transformAllSelectors(
@@ -91,7 +93,8 @@ module.exports = {
         (selector) => `[dir="rtl"] ${updateAllClasses(selector, (className) => `rtl:${className}`)}`
       )
     )
-
+  },
+  darkVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
     if (config.darkMode === 'class') {
       addVariant(
         'dark',
@@ -118,7 +121,8 @@ module.exports = {
         )
       )
     }
-
+  },
+  screenVariants: function ({ jit: { config, theme, addUtilities, addVariant, e } }) {
     for (let screen in theme.screens) {
       let size = theme.screens[screen]
       let query = buildMediaQuery(size)

src/index.test.css

@@ -368,6 +368,12 @@ div {
 .group:active .group-active\:opacity-10 {
   opacity: 0.1;
 }
+.foo\:custom-util {
+  background: #abcdef !important;
+}
+.foo\:hover\:custom-util:hover {
+  background: #abcdef !important;
+}
 @media (prefers-reduced-motion: no-preference) {
   .motion-safe\:transition {
     transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow,
@@ -390,12 +396,6 @@ div {
 .dark .dark\:custom-util {
   background: #abcdef;
 }
-.foo\:custom-util {
-  background: #abcdef !important;
-}
-.foo\:hover\:custom-util:hover {
-  background: #abcdef !important;
-}
 @media (min-width: 640px) {
   .sm\:container {
     width: 100%;
@@ -508,7 +508,7 @@ div {
     }
   }
   @media (prefers-reduced-motion: no-preference) {
-    .foo\:dark .md\:dark\:motion-safe\:active\:custom-util:active {
+    .dark .md\:dark\:motion-safe\:foo\:active\:custom-util:active {
       background: #abcdef !important;
     }
   }

src/index.test.html

@@ -22,7 +22,7 @@
     <div class="sm:custom-util"></div>
     <div class="dark:custom-util"></div>
     <div class="motion-safe:custom-util"></div>
-    <div class="md:foo:dark:motion-safe:active:custom-util"></div>
+    <div class="md:dark:motion-safe:foo:active:custom-util"></div>
     <div class="aspect-w-1 aspect-h-2"></div>
     <div class="aspect-w-3 aspect-h-4"></div>
     <div class="filter-none filter-grayscale"></div>

src/lib/setupContext.js

@@ -659,11 +659,6 @@ function setupContext(configOrPath) {
 
     let corePluginList = Object.entries(corePlugins)
       .map(([name, plugin]) => {
-        // TODO: Make variants a real core plugin so we don't special case it
-        if (name === 'variants') {
-          return plugin
-        }
-
         if (!tailwindConfig.corePlugins.includes(name)) {
           return null
         }
@@ -707,9 +702,19 @@ function setupContext(configOrPath) {
       }
     })
 
+    // TODO: This is a workaround for backwards compatibility, since custom variants
+    // were historically sorted before screen/stackable variants.
+    let beforeVariants = [corePlugins['pseudoClassVariants']]
+    let afterVariants = [
+      corePlugins['directionVariants'],
+      corePlugins['reducedMotionVariants'],
+      corePlugins['darkVariants'],
+      corePlugins['screenVariants'],
+    ]
+
     registerPlugins(
       context.tailwindConfig,
-      [...corePluginList, ...userPlugins, ...layerPlugins],
+      [...corePluginList, ...beforeVariants, ...userPlugins, ...afterVariants, ...layerPlugins],
       context
     )