Include default config by default in presets (#2662)

Author: adamwathan

__tests__/customConfig.test.js

@@ -218,17 +218,17 @@ test('the default config can be overridden using the presets key', () => {
         {
           theme: {
             extend: {
-              colors: {
-                black: 'black',
+              minHeight: {
+                24: '24px',
               },
-              backgroundColor: theme => theme('colors'),
             },
           },
-          corePlugins: ['backgroundColor'],
+          corePlugins: ['minHeight'],
+          variants: { minHeight: [] },
         },
       ],
       theme: {
-        extend: { colors: { white: 'white' } },
+        extend: { minHeight: { 48: '48px' } },
       },
     }),
   ])
@@ -240,11 +240,62 @@ test('the default config can be overridden using the presets key', () => {
     )
     .then(result => {
       const expected = `
-        .bg-black {
-          background-color: black;
+        .min-h-0 {
+          min-height: 0;
         }
-        .bg-white {
-          background-color: white;
+        .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({
+      presets: [
+        {
+          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-24 {
+          min-height: 24px;
+        }
+        .min-h-48 {
+          min-height: 48px;
         }
       `
 
@@ -257,13 +308,15 @@ test('presets can have their own presets', () => {
     tailwind({
       presets: [
         {
+          presets: [],
           theme: {
             colors: { red: '#dd0000' },
           },
         },
         {
           presets: [
             {
+              presets: [],
               theme: {
                 colors: {
                   transparent: 'transparent',

__tests__/purgeUnusedStyles.test.js

@@ -58,6 +58,8 @@ const config = {
   },
 }
 
+delete config.presets
+
 function assertPurged(result) {
   expect(result.css).not.toContain('.bg-red-600')
   expect(result.css).not.toContain('.w-1\\/3')

src/util/getAllConfigs.js

@@ -9,9 +9,9 @@ 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 = flatMap([...get(config, 'presets', [defaultConfig])].reverse(), preset => {
+    return getAllConfigs(preset)
   })
 
   const features = {

stubs/defaultConfig.stub.js

@@ -8,6 +8,7 @@ module.exports = {
   prefix: '',
   important: false,
   separator: ':',
+  presets: [],
   theme: {
     screens: {
       sm: '640px',