EnsurecorePlugins order is consistent (#5928)

* ensure corePlugins order is consistent

* update order in tests

Author: RobinMalfait

src/util/resolveConfig.js

@@ -238,12 +238,15 @@ function resolveVariants([firstConfig, ...variantConfigs], variantOrder) {
 }
 
 function resolveCorePlugins(corePluginConfigs) {
-  const result = [...corePluginConfigs].reduceRight((resolved, corePluginConfig) => {
-    if (isFunction(corePluginConfig)) {
-      return corePluginConfig({ corePlugins: resolved })
-    }
-    return configurePlugins(corePluginConfig, resolved)
-  }, corePluginList)
+  const result = [...corePluginConfigs]
+    .reduceRight((resolved, corePluginConfig) => {
+      if (isFunction(corePluginConfig)) {
+        return corePluginConfig({ corePlugins: resolved })
+      }
+      return configurePlugins(corePluginConfig, resolved)
+    }, corePluginList)
+    .slice()
+    .sort((a, z) => Math.sign(corePluginList.indexOf(a) - corePluginList.indexOf(z)))
 
   return result
 }

tests/corePlugins.test.js

@@ -0,0 +1,32 @@
+import postcss from 'postcss'
+import tailwind from '../src/index'
+
+function run(input, config = {}) {
+  return postcss([tailwind(config)]).process(input, { from: undefined })
+}
+
+it('should not change the order of the plugins based on corePlugins in config', async () => {
+  let config1 = {
+    purge: {
+      enabled: true,
+      content: [{ raw: `<div class="transform translate-x-full"></div>` }],
+    },
+    corePlugins: ['translate', 'transform'],
+  }
+  let config2 = {
+    purge: {
+      enabled: true,
+      content: [{ raw: `<div class="transform translate-x-full"></div>` }],
+    },
+    corePlugins: ['transform', 'translate'],
+  }
+
+  let input = `
+    @tailwind base;
+    @tailwind components;
+    @tailwind utilities;
+  `
+
+  let [first, second] = await Promise.all([run(input, config1), run(input, config2)])
+  expect(first.css).toMatchFormattedCss(second.css)
+})

tests/plugins/gradientColorStops.test.js

@@ -34,20 +34,6 @@ test('opacity variables are given to colors defined as closures', () => {
     .process('@tailwind utilities', { from: undefined })
     .then((result) => {
       const expected = `
-      .text-primary {
-        --tw-text-opacity: 1;
-        color: rgba(31, 31, 31, var(--tw-text-opacity));
-      }
-
-      .text-secondary {
-        --tw-text-opacity: 1;
-        color: hsla(10, 50%, 50%, var(--tw-text-opacity));
-      }
-
-      .text-opacity-50 {
-        --tw-text-opacity: 0.5;
-      }
-
       .from-primary {
         --tw-gradient-from: rgb(31, 31, 31);
         --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(31, 31, 31, 0));
@@ -75,6 +61,20 @@ test('opacity variables are given to colors defined as closures', () => {
       .to-secondary {
        --tw-gradient-to: hsl(10, 50%, 50%);
       }
+
+      .text-primary {
+        --tw-text-opacity: 1;
+        color: rgba(31, 31, 31, var(--tw-text-opacity));
+      }
+
+      .text-secondary {
+        --tw-text-opacity: 1;
+        color: hsla(10, 50%, 50%, var(--tw-text-opacity));
+      }
+
+      .text-opacity-50 {
+        --tw-text-opacity: 0.5;
+      }
       `
 
       expect(result.css).toMatchCss(expected)

tests/resolveConfig.test.js

@@ -2182,7 +2182,7 @@ test('core plugin configurations stack', () => {
     separator: ':',
     theme: {},
     variants: {},
-    corePlugins: ['float', 'padding', 'margin'],
+    corePlugins: ['float', 'margin', 'padding'],
   })
 })