add function presets (tailwindlabs#2680)

Author: RobinMalfait

__tests__/customConfig.test.js

@@ -261,6 +261,56 @@ test('the default config can be overridden using the presets key', () => {
     })
 })
 
+test('presets can be functions', () => {
+  return postcss([
+    tailwind({
+      presets: [
+        () => ({
+          theme: {
+            extend: {
+              minHeight: {
+                24: '24px',
+              },
+            },
+          },
+          corePlugins: ['minHeight'],
+          variants: { minHeight: [] },
+        }),
+      ],
+      theme: {
+        extend: { minHeight: { 48: '48px' } },
+      },
+    }),
+  ])
+    .process(
+      `
+        @tailwind utilities
+      `,
+      { from: undefined }
+    )
+    .then((result) => {
+      const expected = `
+        .min-h-0 {
+          min-height: 0;
+        }
+        .min-h-24 {
+          min-height: 24px;
+        }
+        .min-h-48 {
+          min-height: 48px;
+        }
+        .min-h-full {
+          min-height: 100%;
+        }
+        .min-h-screen {
+          min-height: 100vh;
+        }
+      `
+
+      expect(result.css).toMatchCss(expected)
+    })
+})
+
 test('the default config can be removed by using an empty presets key in a preset', () => {
   return postcss([
     tailwind({
@@ -367,3 +417,68 @@ test('presets can have their own presets', () => {
       expect(result.css).toMatchCss(expected)
     })
 })
+
+test('function presets can be mixed with object presets', () => {
+  return postcss([
+    tailwind({
+      presets: [
+        () => ({
+          presets: [],
+          theme: {
+            colors: { red: '#dd0000' },
+          },
+        }),
+        {
+          presets: [
+            () => ({
+              presets: [],
+              theme: {
+                colors: {
+                  transparent: 'transparent',
+                  red: '#ff0000',
+                },
+              },
+            }),
+          ],
+          theme: {
+            extend: {
+              colors: {
+                black: 'black',
+                red: '#ee0000',
+              },
+              backgroundColor: (theme) => theme('colors'),
+            },
+          },
+          corePlugins: ['backgroundColor'],
+        },
+      ],
+      theme: {
+        extend: { colors: { white: 'white' } },
+      },
+    }),
+  ])
+    .process(
+      `
+        @tailwind utilities
+      `,
+      { from: undefined }
+    )
+    .then((result) => {
+      const expected = `
+        .bg-transparent {
+          background-color: transparent;
+        }
+        .bg-red {
+          background-color: #ee0000;
+        }
+        .bg-black {
+          background-color: black;
+        }
+        .bg-white {
+          background-color: white;
+        }
+      `
+
+      expect(result.css).toMatchCss(expected)
+    })
+})

src/util/getAllConfigs.js

@@ -1,10 +1,10 @@
 import defaultConfig from '../../stubs/defaultConfig.stub.js'
 import { flagEnabled } from '../featureFlags'
-import { flatMap, get } from 'lodash'
+import { flatMap, get, isFunction } from 'lodash'
 
 export default function getAllConfigs(config) {
   const configs = flatMap([...get(config, 'presets', [defaultConfig])].reverse(), (preset) => {
-    return getAllConfigs(preset)
+    return getAllConfigs(isFunction(preset) ? preset() : preset)
   })
 
   const features = {