From 9eca69ad831ac154c2ebb9c7bdfe9341118ecaeb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 22 Jun 2018 12:08:54 -0400 Subject: [PATCH] Refactor process plugins to return an object --- __tests__/containerPlugin.test.js | 12 +++---- __tests__/processPlugins.test.js | 52 ++++++++++++++-------------- src/lib/substituteTailwindAtRules.js | 4 ++- src/util/processPlugins.js | 7 +++- 4 files changed, 41 insertions(+), 34 deletions(-) diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index a82ccf18d..04cb3dba9 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -26,7 +26,7 @@ function processPluginsWithValidConfig(config) { } test('options are not required', () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [container()], }) @@ -48,7 +48,7 @@ test('options are not required', () => { }) test('screens can be specified explicitly', () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ container({ screens: { @@ -71,7 +71,7 @@ test('screens can be specified explicitly', () => { }) test('screens can be an array', () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ container({ screens: ['400px', '500px'], @@ -91,7 +91,7 @@ test('screens can be an array', () => { }) test('the container can be centered by default', () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ container({ center: true, @@ -121,7 +121,7 @@ test('the container can be centered by default', () => { }) test('horizontal padding can be included by default', () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ container({ padding: '2rem', @@ -151,7 +151,7 @@ test('horizontal padding can be included by default', () => { }) test('setting all options at once', () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ container({ screens: { diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index d5958c476..3115ad088 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -19,7 +19,7 @@ function processPluginsWithValidConfig(config) { } test('plugins can create utilities with object syntax', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities({ @@ -54,7 +54,7 @@ test('plugins can create utilities with object syntax', () => { }) test('plugins can create utilities with arrays of objects', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities([ @@ -95,7 +95,7 @@ test('plugins can create utilities with arrays of objects', () => { }) test('plugins can create utilities with raw PostCSS nodes', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities([ @@ -139,7 +139,7 @@ test('plugins can create utilities with raw PostCSS nodes', () => { }) test('plugins can create utilities with mixed object styles and PostCSS nodes', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities([ @@ -182,7 +182,7 @@ test('plugins can create utilities with mixed object styles and PostCSS nodes', }) test('plugins can create utilities with variants', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities( @@ -220,7 +220,7 @@ test('plugins can create utilities with variants', () => { }) test('plugins can create components with object syntax', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents({ @@ -253,7 +253,7 @@ test('plugins can create components with object syntax', () => { }) test('plugins can create components with raw PostCSS nodes', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents([ @@ -301,7 +301,7 @@ test('plugins can create components with raw PostCSS nodes', () => { }) test('plugins can create components with mixed object styles and raw PostCSS nodes', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents([ @@ -348,7 +348,7 @@ test('plugins can create components with mixed object styles and raw PostCSS nod }) test('plugins can create components with media queries with object syntax', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents({ @@ -399,7 +399,7 @@ test('plugins can create components with media queries with object syntax', () = }) test('media queries can be defined multiple times using objects-in-array syntax', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents([ @@ -452,7 +452,7 @@ test('media queries can be defined multiple times using objects-in-array syntax' }) test('plugins can create nested rules', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents({ @@ -519,7 +519,7 @@ test('plugins can create rules with escaped selectors', () => { ], } - const [components, utilities] = processPluginsWithValidConfig(config) + const { components, utilities } = processPluginsWithValidConfig(config) expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` @@ -532,7 +532,7 @@ test('plugins can create rules with escaped selectors', () => { }) test('plugins can access the current config', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ screens: { sm: '576px', md: '768px', @@ -593,7 +593,7 @@ test('plugins can access the current config', () => { }) test('plugins can provide fallbacks to keys missing from the config', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ borderRadius: { '1': '1px', '2': '2px', @@ -620,7 +620,7 @@ test('plugins can provide fallbacks to keys missing from the config', () => { }) test('variants are optional when adding utilities', () => { - const [, utilities] = processPluginsWithValidConfig({ + const { utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities({ @@ -642,7 +642,7 @@ test('variants are optional when adding utilities', () => { }) test('plugins can add multiple sets of utilities and components', () => { - const [components, utilities] = processPluginsWithValidConfig({ + const { components, utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities, addComponents }) { addComponents({ @@ -699,7 +699,7 @@ test('plugins can add multiple sets of utilities and components', () => { }) test('plugins respect prefix and important options by default when adding utilities', () => { - const [, utilities] = processPluginsWithValidConfig({ + const { utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities({ @@ -725,7 +725,7 @@ test('plugins respect prefix and important options by default when adding utilit }) test("component declarations respect the 'prefix' option by default", () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents({ @@ -748,7 +748,7 @@ test("component declarations respect the 'prefix' option by default", () => { }) test("component declarations can optionally ignore 'prefix' option", () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents( @@ -774,7 +774,7 @@ test("component declarations can optionally ignore 'prefix' option", () => { }) test("component declarations are not affected by the 'important' option", () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ function({ addComponents }) { addComponents({ @@ -797,7 +797,7 @@ test("component declarations are not affected by the 'important' option", () => }) test("plugins can apply the user's chosen prefix to components manually", () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ function({ addComponents, prefix }) { addComponents( @@ -823,7 +823,7 @@ test("plugins can apply the user's chosen prefix to components manually", () => }) test('prefix can optionally be ignored for utilities', () => { - const [, utilities] = processPluginsWithValidConfig({ + const { utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities( @@ -854,7 +854,7 @@ test('prefix can optionally be ignored for utilities', () => { }) test('important can optionally be ignored for utilities', () => { - const [, utilities] = processPluginsWithValidConfig({ + const { utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities( @@ -885,7 +885,7 @@ test('important can optionally be ignored for utilities', () => { }) test('variants can still be specified when ignoring prefix and important options', () => { - const [, utilities] = processPluginsWithValidConfig({ + const { utilities } = processPluginsWithValidConfig({ plugins: [ function({ addUtilities }) { addUtilities( @@ -909,7 +909,7 @@ test('variants can still be specified when ignoring prefix and important options }) expect(css(utilities)).toMatchCss(` - @variants responsive, hover, focus{ + @variants responsive, hover, focus { .rotate-90 { transform: rotate(90deg) } @@ -918,7 +918,7 @@ test('variants can still be specified when ignoring prefix and important options }) test('prefix will prefix all classes in a selector', () => { - const [components] = processPluginsWithValidConfig({ + const { components } = processPluginsWithValidConfig({ plugins: [ function({ addComponents, prefix }) { addComponents( diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js index c03dbbace..56bf1ed3b 100644 --- a/src/lib/substituteTailwindAtRules.js +++ b/src/lib/substituteTailwindAtRules.js @@ -9,7 +9,9 @@ export default function(config) { return function(css) { const unwrappedConfig = config() - const [pluginComponents, pluginUtilities] = processPlugins(unwrappedConfig) + const { components: pluginComponents, utilities: pluginUtilities } = processPlugins( + unwrappedConfig + ) css.walkAtRules('tailwind', atRule => { if (atRule.params === 'preflight') { diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index 0701751f0..320dc5c8e 100644 --- a/src/util/processPlugins.js +++ b/src/util/processPlugins.js @@ -17,6 +17,7 @@ function parseStyles(styles) { export default function(config) { const pluginComponents = [] const pluginUtilities = [] + const pluginVariantGenerators = {} config.plugins.forEach(plugin => { plugin({ @@ -62,5 +63,9 @@ export default function(config) { }) }) - return [pluginComponents, pluginUtilities] + return { + components: pluginComponents, + utilities: pluginUtilities, + variantGenerators: pluginVariantGenerators, + } }