Repository: tailwindlabs/tailwindcss
Pull request #2660 (2020-10-23 16:57:25)

Include default config by default in presets
Prior to this PR, if your preset omitted the `presets` key, it would extend nothing. I thought this made sense originally but it doesn't — it's very unexpected behavior. It means that when you take a config from a project and extract it as a preset, it no longer extends the default config, so your preset behaves differently than it would when used directly as a config.

I will backport this to 1.9 because this is so unexpected that I would consider it a bug. If you want to create a preset that extends nothing, you just needs to add `presets: []` to your preset.


Patch:
diff --git a/src/util/getAllConfigs.js b/src/util/getAllConfigs.js
index dfee30c1..5602c7e6 100644
--- a/src/util/getAllConfigs.js
+++ b/src/util/getAllConfigs.js
@@ -2,9 +2,9 @@ import defaultConfig from '../../stubs/defaultConfig.stub.js'
 import { flagEnabled } from '../featureFlags'
 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 = {


Test patch:
diff --git a/__tests__/customConfig.test.js b/__tests__/customConfig.test.js
index 695d964e..308cb873 100644
--- a/__tests__/customConfig.test.js
+++ b/__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,6 +308,7 @@ test('presets can have their own presets', () => {
     tailwind({
       presets: [
         {
+          presets: [],
           theme: {
             colors: { red: '#dd0000' },
           },
@@ -264,6 +316,7 @@ test('presets can have their own presets', () => {
         {
           presets: [
             {
+              presets: [],
               theme: {
                 colors: {
                   transparent: 'transparent',