Drop array format for presets key instead

Author: adamwathan

__tests__/customConfig.test.js

@@ -211,26 +211,26 @@ test('tailwind.config.js is picked up by default when passing an empty object',
   })
 })
 
-test('when custom config is an array the default config is not included', () => {
+test('the default config can be overridden using the presets key', () => {
   return postcss([
-    tailwind([
-      {
-        theme: {
-          extend: {
-            colors: {
-              black: 'black',
+    tailwind({
+      presets: [
+        {
+          theme: {
+            extend: {
+              colors: {
+                black: 'black',
+              },
+              backgroundColor: theme => theme('colors'),
             },
-            backgroundColor: theme => theme('colors'),
           },
+          corePlugins: ['backgroundColor'],
         },
-        corePlugins: ['backgroundColor'],
-      },
-      {
-        theme: {
-          extend: { colors: { white: 'white' } },
-        },
+      ],
+      theme: {
+        extend: { colors: { white: 'white' } },
       },
-    ]),
+    }),
   ])
     .process(
       `
@@ -252,48 +252,65 @@ test('when custom config is an array the default config is not included', () =>
     })
 })
 
-test('when custom config is an array in a file the default config is not included', () => {
-  return inTempDirectory(() => {
-    fs.writeFileSync(
-      path.resolve(defaultConfigFile),
-      `module.exports = [
+test('presets can have their own presets', () => {
+  return postcss([
+    tailwind({
+      presets: [
+        {
+          theme: {
+            colors: { red: '#dd0000' },
+          },
+        },
         {
+          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' } },
-          },
-        }
-      ]`
+      ],
+      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;
+        }
+      `
 
-    return postcss([tailwind()])
-      .process(
-        `
-          @tailwind utilities
-        `,
-        { from: undefined }
-      )
-      .then(result => {
-        const expected = `
-          .bg-black {
-            background-color: black;
-          }
-          .bg-white {
-            background-color: white;
-          }
-        `
-
-        expect(result.css).toMatchCss(expected)
-      })
-  })
+      expect(result.css).toMatchCss(expected)
+    })
 })

resolveConfig.js

@@ -2,9 +2,6 @@ const resolveConfigObjects = require('./lib/util/resolveConfig').default
 const getAllConfigs = require('./lib/util/getAllConfigs').default
 
 module.exports = function resolveConfig(...configs) {
-  if (configs.length === 1 && Array.isArray(configs[0])) {
-    return resolveConfigObjects([...configs[0]].reverse())
-  }
   const [, ...defaultConfigs] = getAllConfigs(configs[0])
   return resolveConfigObjects([...configs, ...defaultConfigs])
 }

src/index.js

@@ -14,10 +14,6 @@ import { defaultConfigFile } from './constants'
 import defaultConfig from '../stubs/defaultConfig.stub.js'
 
 function resolveConfigPath(filePath) {
-  // require('tailwindcss')([{ theme: ..., variants: ... }, {...}])
-  if (Array.isArray(filePath)) {
-    return undefined
-  }
   // require('tailwindcss')({ theme: ..., variants: ... })
   if (_.isObject(filePath) && !_.has(filePath, 'config') && !_.isEmpty(filePath)) {
     return undefined
@@ -64,10 +60,6 @@ const getConfigFunction = config => () => {
 
   const configObject = _.isObject(config) ? _.get(config, 'config', config) : require(config)
 
-  if (Array.isArray(configObject)) {
-    return resolveConfig([...configObject].reverse())
-  }
-
   return resolveConfig([...getAllConfigs(configObject)])
 }
 

src/util/getAllConfigs.js

@@ -7,9 +7,13 @@ import extendedFontSizeScale from '../flagged/extendedFontSizeScale.js'
 import darkModeVariant from '../flagged/darkModeVariant.js'
 import standardFontWeights from '../flagged/standardFontWeights'
 import additionalBreakpoint from '../flagged/additionalBreakpoint'
+import { flatMap, get } from 'lodash'
+
+export default function getAllConfigs(config, defaultPresets = [defaultConfig]) {
+  const configs = flatMap([...get(config, 'presets', defaultPresets)].reverse(), preset => {
+    return getAllConfigs(preset, [])
+  })
 
-export default function getAllConfigs(config) {
-  const configs = [defaultConfig]
   const features = {
     uniformColorPalette,
     extendedSpacingScale,