Support new presets key + extending core plugins config

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add experimental `2xl` breakpoint ([#2468](https://github.com/tailwindlabs/tailwindcss/pull/2468))
 - Add `col-span-full` and `row-span-full` ([#2471](https://github.com/tailwindlabs/tailwindcss/pull/2471))
 - Promote `defaultLineHeights` and `standardFontWeights` from experimental to future
+- Add new `presets` config option ([#2474](https://github.com/tailwindlabs/tailwindcss/pull/2474))
 
 ## [1.8.12] - 2020-10-07
 

__tests__/configurePlugins.test.js

@@ -1,11 +1,7 @@
 import configurePlugins from '../src/util/configurePlugins'
 
 test('setting a plugin to false removes it', () => {
-  const plugins = {
-    fontSize: () => 'fontSize',
-    display: () => 'display',
-    backgroundPosition: () => 'backgroundPosition',
-  }
+  const plugins = ['fontSize', 'display', 'backgroundPosition']
 
   const configuredPlugins = configurePlugins(
     {
@@ -18,23 +14,15 @@ test('setting a plugin to false removes it', () => {
 })
 
 test('passing only false removes all plugins', () => {
-  const plugins = {
-    fontSize: () => 'fontSize',
-    display: () => 'display',
-    backgroundPosition: () => 'backgroundPosition',
-  }
+  const plugins = ['fontSize', 'display', 'backgroundPosition']
 
   const configuredPlugins = configurePlugins(false, plugins)
 
   expect(configuredPlugins).toEqual([])
 })
 
 test('passing an array whitelists plugins', () => {
-  const plugins = {
-    fontSize: () => 'fontSize',
-    display: () => 'display',
-    backgroundPosition: () => 'backgroundPosition',
-  }
+  const plugins = ['fontSize', 'display', 'backgroundPosition']
 
   const configuredPlugins = configurePlugins(['display'], plugins)
 

__tests__/customConfig.test.js

@@ -210,3 +210,107 @@ test('tailwind.config.js is picked up by default when passing an empty object',
       })
   })
 })
+
+test('the default config can be overridden using the presets key', () => {
+  return postcss([
+    tailwind({
+      presets: [
+        {
+          theme: {
+            extend: {
+              colors: {
+                black: 'black',
+              },
+              backgroundColor: theme => theme('colors'),
+            },
+          },
+          corePlugins: ['backgroundColor'],
+        },
+      ],
+      theme: {
+        extend: { colors: { white: 'white' } },
+      },
+    }),
+  ])
+    .process(
+      `
+        @tailwind utilities
+      `,
+      { from: undefined }
+    )
+    .then(result => {
+      const expected = `
+        .bg-black {
+          background-color: black;
+        }
+        .bg-white {
+          background-color: white;
+        }
+      `
+
+      expect(result.css).toMatchCss(expected)
+    })
+})
+
+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' } },
+      },
+    }),
+  ])
+    .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)
+    })
+})