From cf8596b71d0eb01292e36fda8e197f88040a74cd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 23 Oct 2020 14:08:17 -0400 Subject: [PATCH] Include default config by default in presets (#2662) --- __tests__/customConfig.test.js | 71 +++++++++++++++++++++++++---- __tests__/purgeUnusedStyles.test.js | 2 + src/util/getAllConfigs.js | 6 +-- stubs/defaultConfig.stub.js | 1 + 4 files changed, 68 insertions(+), 12 deletions(-) diff --git a/__tests__/customConfig.test.js b/__tests__/customConfig.test.js index ae00c0ba61e2..84b459cc7ed7 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', diff --git a/__tests__/purgeUnusedStyles.test.js b/__tests__/purgeUnusedStyles.test.js index 093efbb5c56d..f83444ca192d 100644 --- a/__tests__/purgeUnusedStyles.test.js +++ b/__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') diff --git a/src/util/getAllConfigs.js b/src/util/getAllConfigs.js index ef67e06ce8c8..e576b535932b 100644 --- a/src/util/getAllConfigs.js +++ b/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 = { diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 4104ec901422..a739f13431a8 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -8,6 +8,7 @@ module.exports = { prefix: '', important: false, separator: ':', + presets: [], theme: { screens: { sm: '640px',