From 146b984617ce4909b549afa9b6d9b2ea0883951d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 10:36:14 -0500 Subject: [PATCH 01/60] Accept plugins as separate processPlugins arg --- __tests__/containerPlugin.test.js | 108 ++-- __tests__/processPlugins.test.js | 838 +++++++++++++++--------------- __tests__/variantsAtRule.test.js | 2 +- src/processTailwindFeatures.js | 2 +- src/util/processPlugins.js | 4 +- 5 files changed, 493 insertions(+), 461 deletions(-) diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index 04cb3dba9..74d4ff763 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -7,6 +7,22 @@ function css(nodes) { return postcss.root({ nodes }).toString() } +function config(overrides) { + return _.defaultsDeep(overrides, { + screens: { + sm: '576px', + md: '768px', + lg: '992px', + xl: '1200px', + }, + options: { + prefix: "", + important: false, + separator: ":" + } + }) +} + function processPluginsWithValidConfig(config) { return processPlugins( _.defaultsDeep(config, { @@ -25,10 +41,8 @@ function processPluginsWithValidConfig(config) { ) } -test('options are not required', () => { - const { components } = processPluginsWithValidConfig({ - plugins: [container()], - }) +test.only('options are not required', () => { + const { components } = processPlugins([container()], config()) expect(css(components)).toMatchCss(` .container { width: 100% } @@ -47,17 +61,15 @@ test('options are not required', () => { `) }) -test('screens can be specified explicitly', () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ - container({ - screens: { - sm: '400px', - lg: '500px', - }, - }), - ], - }) +test.only('screens can be specified explicitly', () => { + const { components } = processPlugins([ + container({ + screens: { + sm: '400px', + lg: '500px', + }, + }), + ], config()) expect(css(components)).toMatchCss(` .container { width: 100% } @@ -70,14 +82,12 @@ test('screens can be specified explicitly', () => { `) }) -test('screens can be an array', () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ - container({ - screens: ['400px', '500px'], - }), - ], - }) +test.only('screens can be an array', () => { + const { components } = processPlugins([ + container({ + screens: ['400px', '500px'], + }), + ], config()) expect(css(components)).toMatchCss(` .container { width: 100% } @@ -90,14 +100,12 @@ test('screens can be an array', () => { `) }) -test('the container can be centered by default', () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ - container({ - center: true, - }), - ], - }) +test.only('the container can be centered by default', () => { + const { components } = processPlugins([ + container({ + center: true, + }), + ], config()) expect(css(components)).toMatchCss(` .container { @@ -120,14 +128,12 @@ test('the container can be centered by default', () => { `) }) -test('horizontal padding can be included by default', () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ - container({ - padding: '2rem', - }), - ], - }) +test.only('horizontal padding can be included by default', () => { + const { components } = processPlugins([ + container({ + padding: '2rem', + }), + ], config()) expect(css(components)).toMatchCss(` .container { @@ -150,19 +156,17 @@ test('horizontal padding can be included by default', () => { `) }) -test('setting all options at once', () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ - container({ - screens: { - sm: '400px', - lg: '500px', - }, - center: true, - padding: '2rem', - }), - ], - }) +test.only('setting all options at once', () => { + const { components } = processPlugins([ + container({ + screens: { + sm: '400px', + lg: '500px', + }, + center: true, + padding: '2rem', + }), + ], config()) expect(css(components)).toMatchCss(` .container { diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index 3115ad088..300d8ccc8 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -1,41 +1,40 @@ -import _ from 'lodash' -import postcss from 'postcss' -import processPlugins from '../src/util/processPlugins' +import _ from "lodash" +import postcss from "postcss" +import processPlugins from "../src/util/processPlugins" function css(nodes) { return postcss.root({ nodes }).toString() } -function processPluginsWithValidConfig(config) { - return processPlugins( - _.defaultsDeep(config, { - options: { - prefix: '', - important: false, - separator: ':', - }, - }) - ) +function config(overrides) { + return _.defaultsDeep(overrides, { + options: { + prefix: "", + important: false, + separator: ":" + } + }) } -test('plugins can create utilities with object syntax', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create utilities with object syntax", () => { + const { components, utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities({ - '.object-fill': { - 'object-fit': 'fill', + ".object-fill": { + "object-fit": "fill" }, - '.object-contain': { - 'object-fit': 'contain', - }, - '.object-cover': { - 'object-fit': 'cover', + ".object-contain": { + "object-fit": "contain" }, + ".object-cover": { + "object-fit": "cover" + } }) - }, + } ], - }) + config() + ) expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` @@ -50,33 +49,34 @@ test('plugins can create utilities with object syntax', () => { object-fit: cover } } - `) + `) }) -test('plugins can create utilities with arrays of objects', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create utilities with arrays of objects", () => { + const { components, utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities([ { - '.object-fill': { - 'object-fit': 'fill', - }, + ".object-fill": { + "object-fit": "fill" + } }, { - '.object-contain': { - 'object-fit': 'contain', - }, + ".object-contain": { + "object-fit": "contain" + } }, { - '.object-cover': { - 'object-fit': 'cover', - }, - }, + ".object-cover": { + "object-fit": "cover" + } + } ]) - }, + } ], - }) + config() + ) expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` @@ -91,36 +91,37 @@ test('plugins can create utilities with arrays of objects', () => { object-fit: cover } } - `) + `) }) -test('plugins can create utilities with raw PostCSS nodes', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create utilities with raw PostCSS nodes", () => { + const { components, utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities([ - postcss.rule({ selector: '.object-fill' }).append([ + postcss.rule({ selector: ".object-fill" }).append([ postcss.decl({ - prop: 'object-fit', - value: 'fill', - }), + prop: "object-fit", + value: "fill" + }) ]), - postcss.rule({ selector: '.object-contain' }).append([ + postcss.rule({ selector: ".object-contain" }).append([ postcss.decl({ - prop: 'object-fit', - value: 'contain', - }), + prop: "object-fit", + value: "contain" + }) ]), - postcss.rule({ selector: '.object-cover' }).append([ + postcss.rule({ selector: ".object-cover" }).append([ postcss.decl({ - prop: 'object-fit', - value: 'cover', - }), - ]), + prop: "object-fit", + value: "cover" + }) + ]) ]) - }, + } ], - }) + config() + ) expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` @@ -135,35 +136,36 @@ test('plugins can create utilities with raw PostCSS nodes', () => { object-fit: cover } } - `) + `) }) -test('plugins can create utilities with mixed object styles and PostCSS nodes', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create utilities with mixed object styles and PostCSS nodes", () => { + const { components, utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities([ { - '.object-fill': { - objectFit: 'fill', - }, + ".object-fill": { + objectFit: "fill" + } }, - postcss.rule({ selector: '.object-contain' }).append([ + postcss.rule({ selector: ".object-contain" }).append([ postcss.decl({ - prop: 'object-fit', - value: 'contain', - }), + prop: "object-fit", + value: "contain" + }) ]), - postcss.rule({ selector: '.object-cover' }).append([ + postcss.rule({ selector: ".object-cover" }).append([ postcss.decl({ - prop: 'object-fit', - value: 'cover', - }), - ]), + prop: "object-fit", + value: "cover" + }) + ]) ]) - }, + } ], - }) + config() + ) expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` @@ -178,30 +180,31 @@ test('plugins can create utilities with mixed object styles and PostCSS nodes', object-fit: cover } } - `) + `) }) -test('plugins can create utilities with variants', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create utilities with variants", () => { + const { components, utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities( { - '.object-fill': { - 'object-fit': 'fill', + ".object-fill": { + "object-fit": "fill" }, - '.object-contain': { - 'object-fit': 'contain', - }, - '.object-cover': { - 'object-fit': 'cover', + ".object-contain": { + "object-fit": "contain" }, + ".object-cover": { + "object-fit": "cover" + } }, - ['responsive', 'hover', 'group-hover', 'focus'] + ["responsive", "hover", "group-hover", "focus"] ) - }, + } ], - }) + config() + ) expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` @@ -216,27 +219,28 @@ test('plugins can create utilities with variants', () => { object-fit: cover } } - `) + `) }) -test('plugins can create components with object syntax', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create components with object syntax", () => { + const { components, utilities } = processPlugins( + [ function({ addComponents }) { addComponents({ - '.btn-blue': { - backgroundColor: 'blue', - color: 'white', - padding: '.5rem 1rem', - borderRadius: '.25rem', - }, - '.btn-blue:hover': { - backgroundColor: 'darkblue', + ".btn-blue": { + backgroundColor: "blue", + color: "white", + padding: ".5rem 1rem", + borderRadius: ".25rem" }, + ".btn-blue:hover": { + backgroundColor: "darkblue" + } }) - }, + } ], - }) + config() + ) expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` @@ -249,42 +253,43 @@ test('plugins can create components with object syntax', () => { .btn-blue:hover { background-color: darkblue } - `) + `) }) -test('plugins can create components with raw PostCSS nodes', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create components with raw PostCSS nodes", () => { + const { components, utilities } = processPlugins( + [ function({ addComponents }) { addComponents([ - postcss.rule({ selector: '.btn-blue' }).append([ + postcss.rule({ selector: ".btn-blue" }).append([ postcss.decl({ - prop: 'background-color', - value: 'blue', + prop: "background-color", + value: "blue" }), postcss.decl({ - prop: 'color', - value: 'white', + prop: "color", + value: "white" }), postcss.decl({ - prop: 'padding', - value: '.5rem 1rem', + prop: "padding", + value: ".5rem 1rem" }), postcss.decl({ - prop: 'border-radius', - value: '.25rem', - }), + prop: "border-radius", + value: ".25rem" + }) ]), - postcss.rule({ selector: '.btn-blue:hover' }).append([ + postcss.rule({ selector: ".btn-blue:hover" }).append([ postcss.decl({ - prop: 'background-color', - value: 'darkblue', - }), - ]), + prop: "background-color", + value: "darkblue" + }) + ]) ]) - }, + } ], - }) + config() + ) expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` @@ -297,41 +302,42 @@ test('plugins can create components with raw PostCSS nodes', () => { .btn-blue:hover { background-color: darkblue } - `) + `) }) -test('plugins can create components with mixed object styles and raw PostCSS nodes', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create components with mixed object styles and raw PostCSS nodes", () => { + const { components, utilities } = processPlugins( + [ function({ addComponents }) { addComponents([ - postcss.rule({ selector: '.btn-blue' }).append([ + postcss.rule({ selector: ".btn-blue" }).append([ postcss.decl({ - prop: 'background-color', - value: 'blue', + prop: "background-color", + value: "blue" }), postcss.decl({ - prop: 'color', - value: 'white', + prop: "color", + value: "white" }), postcss.decl({ - prop: 'padding', - value: '.5rem 1rem', + prop: "padding", + value: ".5rem 1rem" }), postcss.decl({ - prop: 'border-radius', - value: '.25rem', - }), + prop: "border-radius", + value: ".25rem" + }) ]), { - '.btn-blue:hover': { - backgroundColor: 'darkblue', - }, - }, + ".btn-blue:hover": { + backgroundColor: "darkblue" + } + } ]) - }, + } ], - }) + config() + ) expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` @@ -344,36 +350,37 @@ test('plugins can create components with mixed object styles and raw PostCSS nod .btn-blue:hover { background-color: darkblue } - `) + `) }) -test('plugins can create components with media queries with object syntax', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create components with media queries with object syntax", () => { + const { components, utilities } = processPlugins( + [ function({ addComponents }) { addComponents({ - '.container': { - width: '100%', + ".container": { + width: "100%" }, - '@media (min-width: 100px)': { - '.container': { - maxWidth: '100px', - }, + "@media (min-width: 100px)": { + ".container": { + maxWidth: "100px" + } }, - '@media (min-width: 200px)': { - '.container': { - maxWidth: '200px', - }, - }, - '@media (min-width: 300px)': { - '.container': { - maxWidth: '300px', - }, + "@media (min-width: 200px)": { + ".container": { + maxWidth: "200px" + } }, + "@media (min-width: 300px)": { + ".container": { + maxWidth: "300px" + } + } }) - }, + } ], - }) + config() + ) expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` @@ -395,39 +402,40 @@ test('plugins can create components with media queries with object syntax', () = max-width: 300px } } - `) + `) }) -test('media queries can be defined multiple times using objects-in-array syntax', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("media queries can be defined multiple times using objects-in-array syntax", () => { + const { components, utilities } = processPlugins( + [ function({ addComponents }) { addComponents([ { - '.container': { - width: '100%', - }, - '@media (min-width: 100px)': { - '.container': { - maxWidth: '100px', - }, + ".container": { + width: "100%" }, + "@media (min-width: 100px)": { + ".container": { + maxWidth: "100px" + } + } }, { - '.btn': { - padding: '1rem .5rem', - display: 'block', + ".btn": { + padding: "1rem .5rem", + display: "block" }, - '@media (min-width: 100px)': { - '.btn': { - display: 'inline-block', - }, - }, - }, + "@media (min-width: 100px)": { + ".btn": { + display: "inline-block" + } + } + } ]) - }, + } ], - }) + config() + ) expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` @@ -448,38 +456,39 @@ test('media queries can be defined multiple times using objects-in-array syntax' display: inline-block } } - `) + `) }) -test('plugins can create nested rules', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can create nested rules", () => { + const { components, utilities } = processPlugins( + [ function({ addComponents }) { addComponents({ - '.btn-blue': { - backgroundColor: 'blue', - color: 'white', - padding: '.5rem 1rem', - borderRadius: '.25rem', - '&:hover': { - backgroundColor: 'darkblue', + ".btn-blue": { + backgroundColor: "blue", + color: "white", + padding: ".5rem 1rem", + borderRadius: ".25rem", + "&:hover": { + backgroundColor: "darkblue" }, - '@media (min-width: 500px)': { - '&:hover': { - backgroundColor: 'orange', - }, + "@media (min-width: 500px)": { + "&:hover": { + backgroundColor: "orange" + } }, - '> a': { - color: 'red', + "> a": { + color: "red" }, - 'h1 &': { - color: 'purple', - }, - }, + "h1 &": { + color: "purple" + } + } }) - }, + } ], - }) + config() + ) expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` @@ -503,23 +512,22 @@ test('plugins can create nested rules', () => { h1 .btn-blue { color: purple; } - `) + `) }) -test('plugins can create rules with escaped selectors', () => { - const config = { - plugins: [ +test("plugins can create rules with escaped selectors", () => { + const { components, utilities } = processPlugins( + [ function({ e, addUtilities }) { addUtilities({ - [`.${e('top-1/4')}`]: { - top: '25%', - }, + [`.${e("top-1/4")}`]: { + top: "25%" + } }) - }, + } ], - } - - const { components, utilities } = processPluginsWithValidConfig(config) + config() + ) expect(components.length).toBe(0) expect(css(utilities)).toMatchCss(` @@ -528,41 +536,40 @@ test('plugins can create rules with escaped selectors', () => { top: 25% } } - `) + `) }) -test('plugins can access the current config', () => { - const { components, utilities } = processPluginsWithValidConfig({ - screens: { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px', - }, - plugins: [ +test("plugins can access the current config", () => { + const { components, utilities } = processPlugins( + [ function({ addComponents, config }) { const containerClasses = [ { - '.container': { - width: '100%', - }, - }, + ".container": { + width: "100%" + } + } ] - _.forEach(config('screens'), breakpoint => { + _.forEach(config("screens"), breakpoint => { containerClasses.push({ [`@media (min-width: ${breakpoint})`]: { - '.container': { maxWidth: breakpoint }, - }, + ".container": { maxWidth: breakpoint } + } }) }) - - // console.log(containerClasses) - addComponents(containerClasses) - }, + } ], - }) + config({ + screens: { + sm: "576px", + md: "768px", + lg: "992px", + xl: "1200px" + } + }) + ) expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` @@ -589,90 +596,93 @@ test('plugins can access the current config', () => { max-width: 1200px } } - `) + `) }) -test('plugins can provide fallbacks to keys missing from the config', () => { - const { components, utilities } = processPluginsWithValidConfig({ - borderRadius: { - '1': '1px', - '2': '2px', - '4': '4px', - '8': '8px', - }, - plugins: [ +test("plugins can provide fallbacks to keys missing from the config", () => { + const { components, utilities } = processPlugins( + [ function({ addComponents, config }) { addComponents({ - '.btn': { - borderRadius: config('borderRadius.default', '.25rem'), - }, + ".btn": { + borderRadius: config("borderRadius.default", ".25rem") + } }) - }, + } ], - }) + config({ + borderRadius: { + "1": "1px", + "2": "2px", + "4": "4px", + "8": "8px" + } + }) + ) expect(utilities.length).toBe(0) expect(css(components)).toMatchCss(` .btn { border-radius: .25rem } - `) + `) }) -test('variants are optional when adding utilities', () => { - const { utilities } = processPluginsWithValidConfig({ - plugins: [ +test("variants are optional when adding utilities", () => { + const { utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities({ - '.border-collapse': { - 'border-collapse': 'collapse', - }, + ".border-collapse": { + "border-collapse": "collapse" + } }) - }, + } ], - }) + config() + ) expect(css(utilities)).toMatchCss(` @variants { .border-collapse { border-collapse: collapse } - } - `) + }`) }) -test('plugins can add multiple sets of utilities and components', () => { - const { components, utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins can add multiple sets of utilities and components", () => { + const { components, utilities } = processPlugins( + [ function({ addUtilities, addComponents }) { addComponents({ - '.card': { - padding: '1rem', - borderRadius: '.25rem', - }, + ".card": { + padding: "1rem", + borderRadius: ".25rem" + } }) addUtilities({ - '.skew-12deg': { - transform: 'skewY(-12deg)', - }, + ".skew-12deg": { + transform: "skewY(-12deg)" + } }) addComponents({ - '.btn': { - padding: '1rem .5rem', - display: 'inline-block', - }, + ".btn": { + padding: "1rem .5rem", + display: "inline-block" + } }) addUtilities({ - '.border-collapse': { - borderCollapse: 'collapse', - }, + ".border-collapse": { + borderCollapse: "collapse" + } }) - }, + } ], - }) + config() + ) expect(css(utilities)).toMatchCss(` @variants { @@ -685,7 +695,7 @@ test('plugins can add multiple sets of utilities and components', () => { border-collapse: collapse } } - `) + `) expect(css(components)).toMatchCss(` .card { padding: 1rem; @@ -695,25 +705,27 @@ test('plugins can add multiple sets of utilities and components', () => { padding: 1rem .5rem; display: inline-block } - `) + `) }) -test('plugins respect prefix and important options by default when adding utilities', () => { - const { utilities } = processPluginsWithValidConfig({ - plugins: [ +test("plugins respect prefix and important options by default when adding utilities", () => { + const { utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities({ - '.rotate-90': { - transform: 'rotate(90deg)', - }, + ".rotate-90": { + transform: "rotate(90deg)" + } }) - }, + } ], - options: { - prefix: 'tw-', - important: true, - }, - }) + config({ + options: { + prefix: "tw-", + important: true + } + }) + ) expect(css(utilities)).toMatchCss(` @variants { @@ -721,128 +733,138 @@ test('plugins respect prefix and important options by default when adding utilit transform: rotate(90deg) !important } } - `) + `) }) test("component declarations respect the 'prefix' option by default", () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ + const { components } = processPlugins( + [ function({ addComponents }) { addComponents({ - '.btn-blue': { - backgroundColor: 'blue', - }, + ".btn-blue": { + backgroundColor: "blue" + } }) - }, + } ], - options: { - prefix: 'tw-', - }, - }) + config({ + options: { + prefix: "tw-" + } + }) + ) expect(css(components)).toMatchCss(` .tw-btn-blue { background-color: blue } - `) + `) }) test("component declarations can optionally ignore 'prefix' option", () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ + const { components } = processPlugins( + [ function({ addComponents }) { addComponents( { - '.btn-blue': { - backgroundColor: 'blue', - }, + ".btn-blue": { + backgroundColor: "blue" + } }, { respectPrefix: false } ) - }, + } ], - options: { - prefix: 'tw-', - }, - }) + config({ + options: { + prefix: "tw-" + } + }) + ) expect(css(components)).toMatchCss(` .btn-blue { background-color: blue } - `) + `) }) test("component declarations are not affected by the 'important' option", () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ + const { components } = processPlugins( + [ function({ addComponents }) { addComponents({ - '.btn-blue': { - backgroundColor: 'blue', - }, + ".btn-blue": { + backgroundColor: "blue" + } }) - }, + } ], - options: { - important: true, - }, - }) + config({ + options: { + important: true + } + }) + ) expect(css(components)).toMatchCss(` .btn-blue { background-color: blue } - `) + `) }) test("plugins can apply the user's chosen prefix to components manually", () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ + const { components } = processPlugins( + [ function({ addComponents, prefix }) { addComponents( { - [prefix('.btn-blue')]: { - backgroundColor: 'blue', - }, + [prefix(".btn-blue")]: { + backgroundColor: "blue" + } }, { respectPrefix: false } ) - }, + } ], - options: { - prefix: 'tw-', - }, - }) + config({ + options: { + prefix: "tw-" + } + }) + ) expect(css(components)).toMatchCss(` .tw-btn-blue { background-color: blue } - `) + `) }) -test('prefix can optionally be ignored for utilities', () => { - const { utilities } = processPluginsWithValidConfig({ - plugins: [ +test("prefix can optionally be ignored for utilities", () => { + const { utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities( { - '.rotate-90': { - transform: 'rotate(90deg)', - }, + ".rotate-90": { + transform: "rotate(90deg)" + } }, { - respectPrefix: false, + respectPrefix: false } ) - }, + } ], - options: { - prefix: 'tw-', - important: true, - }, - }) + config({ + options: { + prefix: "tw-", + important: true + } + }) + ) expect(css(utilities)).toMatchCss(` @variants { @@ -850,30 +872,32 @@ test('prefix can optionally be ignored for utilities', () => { transform: rotate(90deg) !important } } - `) + `) }) -test('important can optionally be ignored for utilities', () => { - const { utilities } = processPluginsWithValidConfig({ - plugins: [ +test("important can optionally be ignored for utilities", () => { + const { utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities( { - '.rotate-90': { - transform: 'rotate(90deg)', - }, + ".rotate-90": { + transform: "rotate(90deg)" + } }, { - respectImportant: false, + respectImportant: false } ) - }, + } ], - options: { - prefix: 'tw-', - important: true, - }, - }) + config({ + options: { + prefix: "tw-", + important: true + } + }) + ) expect(css(utilities)).toMatchCss(` @variants { @@ -881,32 +905,34 @@ test('important can optionally be ignored for utilities', () => { transform: rotate(90deg) } } - `) + `) }) -test('variants can still be specified when ignoring prefix and important options', () => { - const { utilities } = processPluginsWithValidConfig({ - plugins: [ +test("variants can still be specified when ignoring prefix and important options", () => { + const { utilities } = processPlugins( + [ function({ addUtilities }) { addUtilities( { - '.rotate-90': { - transform: 'rotate(90deg)', - }, + ".rotate-90": { + transform: "rotate(90deg)" + } }, { - variants: ['responsive', 'hover', 'focus'], + variants: ["responsive", "hover", "focus"], respectImportant: false, - respectPrefix: false, + respectPrefix: false } ) - }, + } ], - options: { - prefix: 'tw-', - important: true, - }, - }) + config({ + options: { + prefix: "tw-", + important: true + } + }) + ) expect(css(utilities)).toMatchCss(` @variants responsive, hover, focus { @@ -914,31 +940,33 @@ test('variants can still be specified when ignoring prefix and important options transform: rotate(90deg) } } - `) + `) }) -test('prefix will prefix all classes in a selector', () => { - const { components } = processPluginsWithValidConfig({ - plugins: [ +test("prefix will prefix all classes in a selector", () => { + const { components } = processPlugins( + [ function({ addComponents, prefix }) { addComponents( { - [prefix('.btn-blue .w-1\\/4 > h1.text-xl + a .bar')]: { - backgroundColor: 'blue', - }, + [prefix(".btn-blue .w-1\\/4 > h1.text-xl + a .bar")]: { + backgroundColor: "blue" + } }, { respectPrefix: false } ) - }, + } ], - options: { - prefix: 'tw-', - }, - }) + config({ + options: { + prefix: "tw-" + } + }) + ) expect(css(components)).toMatchCss(` .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar { background-color: blue } - `) + `) }) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index f8a3dec1c..589d10f76 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -4,7 +4,7 @@ import config from '../defaultConfig.stub.js' import processPlugins from '../src/util/processPlugins' function run(input, opts = config) { - return postcss([plugin(opts, processPlugins(opts))]).process(input, { from: undefined }) + return postcss([plugin(opts, processPlugins(opts.plugins, opts))]).process(input, { from: undefined }) } test('it can generate hover variants', () => { diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index 51595f6f0..73dceaa39 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -14,7 +14,7 @@ import processPlugins from './util/processPlugins' export default function(getConfig) { return function(css) { const config = getConfig() - const processedPlugins = processPlugins(config) + const processedPlugins = processPlugins(config.plugins, config) const utilities = generateUtilities(config, processedPlugins.utilities) return postcss([ diff --git a/src/util/processPlugins.js b/src/util/processPlugins.js index bc7dd6bdb..07c9d3024 100644 --- a/src/util/processPlugins.js +++ b/src/util/processPlugins.js @@ -15,12 +15,12 @@ function parseStyles(styles) { return _.flatMap(styles, style => (style instanceof Node ? style : parseObjectStyles(style))) } -export default function(config) { +export default function(plugins, config) { const pluginComponents = [] const pluginUtilities = [] const pluginVariantGenerators = {} - config.plugins.forEach(plugin => { + plugins.forEach(plugin => { plugin({ config: (path, defaultValue) => _.get(config, path, defaultValue), e: escapeClassName, From 6352843cde310d47c6d2e346a8d38f14b5ef4cc4 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 11:48:04 -0500 Subject: [PATCH 02/60] Port zIndex module to default plugin --- __tests__/applyAtRule.test.js | 2 +- src/defaultPlugins.js | 103 ++++++++++++++++++++++ src/{util => legacy}/generateUtilities.js | 0 src/plugins/zIndex.js | 13 +++ src/processTailwindFeatures.js | 9 +- src/utilityModules.js | 2 +- 6 files changed, 125 insertions(+), 4 deletions(-) create mode 100644 src/defaultPlugins.js rename src/{util => legacy}/generateUtilities.js (100%) create mode 100644 src/plugins/zIndex.js diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index 4c415714b..a6f149457 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -1,6 +1,6 @@ import postcss from 'postcss' import plugin from '../src/lib/substituteClassApplyAtRules' -import generateUtilities from '../src/util/generateUtilities' +import generateUtilities from '../src/legacy/generateUtilities' import defaultConfig from '../defaultConfig.stub.js' const defaultUtilities = generateUtilities(defaultConfig, []) diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js new file mode 100644 index 000000000..0c41ae586 --- /dev/null +++ b/src/defaultPlugins.js @@ -0,0 +1,103 @@ +// import lists from './generators/lists' +// import appearance from './generators/appearance' +// import backgroundAttachment from './generators/backgroundAttachment' +// import backgroundColors from './generators/backgroundColors' +// import backgroundPosition from './generators/backgroundPosition' +// import backgroundRepeat from './generators/backgroundRepeat' +// import backgroundSize from './generators/backgroundSize' +// import borderCollapse from './generators/borderCollapse' +// import borderColors from './generators/borderColors' +// import borderRadius from './generators/borderRadius' +// import borderStyle from './generators/borderStyle' +// import borderWidths from './generators/borderWidths' +// import cursor from './generators/cursor' +// import display from './generators/display' +// import flexbox from './generators/flexbox' +// import float from './generators/float' +// import fonts from './generators/fonts' +// import fontWeights from './generators/fontWeights' +// import height from './generators/height' +// import leading from './generators/leading' +// import margin from './generators/margin' +// import maxHeight from './generators/maxHeight' +// import maxWidth from './generators/maxWidth' +// import minHeight from './generators/minHeight' +// import minWidth from './generators/minWidth' +// import negativeMargin from './generators/negativeMargin' +// import objectFit from './generators/objectFit' +// import objectPosition from './generators/objectPosition' +// import opacity from './generators/opacity' +// import outline from './generators/outline' +// import overflow from './generators/overflow' +// import padding from './generators/padding' +// import pointerEvents from './generators/pointerEvents' +// import position from './generators/position' +// import resize from './generators/resize' +// import shadows from './generators/shadows' +// import svgFill from './generators/svgFill' +// import svgStroke from './generators/svgStroke' +// import tableLayout from './generators/tableLayout' +// import textAlign from './generators/textAlign' +// import textColors from './generators/textColors' +// import textSizes from './generators/textSizes' +// import textStyle from './generators/textStyle' +// import tracking from './generators/tracking' +// import userSelect from './generators/userSelect' +// import verticalAlign from './generators/verticalAlign' +// import visibility from './generators/visibility' +// import whitespace from './generators/whitespace' +// import width from './generators/width' +import zIndex from './plugins/zIndex' + +export default [ + // { name: 'lists', generator: lists }, + // { name: 'appearance', generator: appearance }, + // { name: 'backgroundAttachment', generator: backgroundAttachment }, + // { name: 'backgroundColors', generator: backgroundColors }, + // { name: 'backgroundPosition', generator: backgroundPosition }, + // { name: 'backgroundRepeat', generator: backgroundRepeat }, + // { name: 'backgroundSize', generator: backgroundSize }, + // { name: 'borderCollapse', generator: borderCollapse }, + // { name: 'borderColors', generator: borderColors }, + // { name: 'borderRadius', generator: borderRadius }, + // { name: 'borderStyle', generator: borderStyle }, + // { name: 'borderWidths', generator: borderWidths }, + // { name: 'cursor', generator: cursor }, + // { name: 'display', generator: display }, + // { name: 'flexbox', generator: flexbox }, + // { name: 'float', generator: float }, + // { name: 'fonts', generator: fonts }, + // { name: 'fontWeights', generator: fontWeights }, + // { name: 'height', generator: height }, + // { name: 'leading', generator: leading }, + // { name: 'margin', generator: margin }, + // { name: 'maxHeight', generator: maxHeight }, + // { name: 'maxWidth', generator: maxWidth }, + // { name: 'minHeight', generator: minHeight }, + // { name: 'minWidth', generator: minWidth }, + // { name: 'negativeMargin', generator: negativeMargin }, + // { name: 'objectFit', generator: objectFit }, + // { name: 'objectPosition', generator: objectPosition }, + // { name: 'opacity', generator: opacity }, + // { name: 'outline', generator: outline }, + // { name: 'overflow', generator: overflow }, + // { name: 'padding', generator: padding }, + // { name: 'pointerEvents', generator: pointerEvents }, + // { name: 'position', generator: position }, + // { name: 'resize', generator: resize }, + // { name: 'shadows', generator: shadows }, + // { name: 'svgFill', generator: svgFill }, + // { name: 'svgStroke', generator: svgStroke }, + // { name: 'tableLayout', generator: tableLayout }, + // { name: 'textAlign', generator: textAlign }, + // { name: 'textColors', generator: textColors }, + // { name: 'textSizes', generator: textSizes }, + // { name: 'textStyle', generator: textStyle }, + // { name: 'tracking', generator: tracking }, + // { name: 'userSelect', generator: userSelect }, + // { name: 'verticalAlign', generator: verticalAlign }, + // { name: 'visibility', generator: visibility }, + // { name: 'whitespace', generator: whitespace }, + // { name: 'width', generator: width }, + zIndex, +] diff --git a/src/util/generateUtilities.js b/src/legacy/generateUtilities.js similarity index 100% rename from src/util/generateUtilities.js rename to src/legacy/generateUtilities.js diff --git a/src/plugins/zIndex.js b/src/plugins/zIndex.js new file mode 100644 index 000000000..68b08991f --- /dev/null +++ b/src/plugins/zIndex.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config }) { + const utilities = _.fromPairs(_.map(config('zIndex'), (value, modifier) => { + return [`.z-${modifier}`, { + 'z-index': value, + }] + })) + + addUtilities(utilities, config('modules.zIndex')) + } +} diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index 73dceaa39..cbc69ad97 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -8,13 +8,18 @@ import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules' import substituteScreenAtRules from './lib/substituteScreenAtRules' import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules' -import generateUtilities from './util/generateUtilities' +import generateUtilities from './legacy/generateUtilities' import processPlugins from './util/processPlugins' +import defaultPlugins from './defaultPlugins' + export default function(getConfig) { return function(css) { const config = getConfig() - const processedPlugins = processPlugins(config.plugins, config) + const processedPlugins = processPlugins([ + ...defaultPlugins.map(plugin => plugin()), + ...config.plugins + ], config) const utilities = generateUtilities(config, processedPlugins.utilities) return postcss([ diff --git a/src/utilityModules.js b/src/utilityModules.js index 01f37dce3..67134eb5f 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -99,5 +99,5 @@ export default [ { name: 'visibility', generator: visibility }, { name: 'whitespace', generator: whitespace }, { name: 'width', generator: width }, - { name: 'zIndex', generator: zIndex }, + // { name: 'zIndex', generator: zIndex }, ] From 027b69c7e86ffcec7d1c0372ddff32833ef4bd6a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:01:57 -0500 Subject: [PATCH 03/60] Port width and whitespace modules to plugins --- src/defaultPlugins.js | 104 ++------------------------------- src/generators/whitespace.js | 20 ------- src/generators/width.js | 14 ----- src/plugins/whitespace.js | 20 +++++++ src/plugins/width.js | 13 +++++ src/processTailwindFeatures.js | 2 +- src/utilityModules.js | 6 -- 7 files changed, 39 insertions(+), 140 deletions(-) delete mode 100644 src/generators/whitespace.js delete mode 100644 src/generators/width.js create mode 100644 src/plugins/whitespace.js create mode 100644 src/plugins/width.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 0c41ae586..4a617297d 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,103 +1,9 @@ -// import lists from './generators/lists' -// import appearance from './generators/appearance' -// import backgroundAttachment from './generators/backgroundAttachment' -// import backgroundColors from './generators/backgroundColors' -// import backgroundPosition from './generators/backgroundPosition' -// import backgroundRepeat from './generators/backgroundRepeat' -// import backgroundSize from './generators/backgroundSize' -// import borderCollapse from './generators/borderCollapse' -// import borderColors from './generators/borderColors' -// import borderRadius from './generators/borderRadius' -// import borderStyle from './generators/borderStyle' -// import borderWidths from './generators/borderWidths' -// import cursor from './generators/cursor' -// import display from './generators/display' -// import flexbox from './generators/flexbox' -// import float from './generators/float' -// import fonts from './generators/fonts' -// import fontWeights from './generators/fontWeights' -// import height from './generators/height' -// import leading from './generators/leading' -// import margin from './generators/margin' -// import maxHeight from './generators/maxHeight' -// import maxWidth from './generators/maxWidth' -// import minHeight from './generators/minHeight' -// import minWidth from './generators/minWidth' -// import negativeMargin from './generators/negativeMargin' -// import objectFit from './generators/objectFit' -// import objectPosition from './generators/objectPosition' -// import opacity from './generators/opacity' -// import outline from './generators/outline' -// import overflow from './generators/overflow' -// import padding from './generators/padding' -// import pointerEvents from './generators/pointerEvents' -// import position from './generators/position' -// import resize from './generators/resize' -// import shadows from './generators/shadows' -// import svgFill from './generators/svgFill' -// import svgStroke from './generators/svgStroke' -// import tableLayout from './generators/tableLayout' -// import textAlign from './generators/textAlign' -// import textColors from './generators/textColors' -// import textSizes from './generators/textSizes' -// import textStyle from './generators/textStyle' -// import tracking from './generators/tracking' -// import userSelect from './generators/userSelect' -// import verticalAlign from './generators/verticalAlign' -// import visibility from './generators/visibility' -// import whitespace from './generators/whitespace' -// import width from './generators/width' +import whitespace from './plugins/whitespace' +import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ - // { name: 'lists', generator: lists }, - // { name: 'appearance', generator: appearance }, - // { name: 'backgroundAttachment', generator: backgroundAttachment }, - // { name: 'backgroundColors', generator: backgroundColors }, - // { name: 'backgroundPosition', generator: backgroundPosition }, - // { name: 'backgroundRepeat', generator: backgroundRepeat }, - // { name: 'backgroundSize', generator: backgroundSize }, - // { name: 'borderCollapse', generator: borderCollapse }, - // { name: 'borderColors', generator: borderColors }, - // { name: 'borderRadius', generator: borderRadius }, - // { name: 'borderStyle', generator: borderStyle }, - // { name: 'borderWidths', generator: borderWidths }, - // { name: 'cursor', generator: cursor }, - // { name: 'display', generator: display }, - // { name: 'flexbox', generator: flexbox }, - // { name: 'float', generator: float }, - // { name: 'fonts', generator: fonts }, - // { name: 'fontWeights', generator: fontWeights }, - // { name: 'height', generator: height }, - // { name: 'leading', generator: leading }, - // { name: 'margin', generator: margin }, - // { name: 'maxHeight', generator: maxHeight }, - // { name: 'maxWidth', generator: maxWidth }, - // { name: 'minHeight', generator: minHeight }, - // { name: 'minWidth', generator: minWidth }, - // { name: 'negativeMargin', generator: negativeMargin }, - // { name: 'objectFit', generator: objectFit }, - // { name: 'objectPosition', generator: objectPosition }, - // { name: 'opacity', generator: opacity }, - // { name: 'outline', generator: outline }, - // { name: 'overflow', generator: overflow }, - // { name: 'padding', generator: padding }, - // { name: 'pointerEvents', generator: pointerEvents }, - // { name: 'position', generator: position }, - // { name: 'resize', generator: resize }, - // { name: 'shadows', generator: shadows }, - // { name: 'svgFill', generator: svgFill }, - // { name: 'svgStroke', generator: svgStroke }, - // { name: 'tableLayout', generator: tableLayout }, - // { name: 'textAlign', generator: textAlign }, - // { name: 'textColors', generator: textColors }, - // { name: 'textSizes', generator: textSizes }, - // { name: 'textStyle', generator: textStyle }, - // { name: 'tracking', generator: tracking }, - // { name: 'userSelect', generator: userSelect }, - // { name: 'verticalAlign', generator: verticalAlign }, - // { name: 'visibility', generator: visibility }, - // { name: 'whitespace', generator: whitespace }, - // { name: 'width', generator: width }, - zIndex, + whitespace(), + width(), + zIndex(), ] diff --git a/src/generators/whitespace.js b/src/generators/whitespace.js deleted file mode 100644 index f869c8788..000000000 --- a/src/generators/whitespace.js +++ /dev/null @@ -1,20 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'whitespace-normal': { 'white-space': 'normal' }, - 'whitespace-no-wrap': { 'white-space': 'nowrap' }, - 'whitespace-pre': { 'white-space': 'pre' }, - 'whitespace-pre-line': { 'white-space': 'pre-line' }, - 'whitespace-pre-wrap': { 'white-space': 'pre-wrap' }, - - 'break-words': { 'word-wrap': 'break-word' }, - 'break-normal': { 'word-wrap': 'normal' }, - - truncate: { - overflow: 'hidden', - 'text-overflow': 'ellipsis', - 'white-space': 'nowrap', - }, - }) -} diff --git a/src/generators/width.js b/src/generators/width.js deleted file mode 100644 index 111fa9c76..000000000 --- a/src/generators/width.js +++ /dev/null @@ -1,14 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -function defineWidths(widths) { - return _.map(widths, (size, modifer) => { - return defineClass(`w-${modifer}`, { - width: `${size}`, - }) - }) -} - -export default function(config) { - return _.flatten([defineWidths(config.width)]) -} diff --git a/src/plugins/whitespace.js b/src/plugins/whitespace.js new file mode 100644 index 000000000..42b658836 --- /dev/null +++ b/src/plugins/whitespace.js @@ -0,0 +1,20 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.whitespace-normal': { 'white-space': 'normal' }, + '.whitespace-no-wrap': { 'white-space': 'nowrap' }, + '.whitespace-pre': { 'white-space': 'pre' }, + '.whitespace-pre-line': { 'white-space': 'pre-line' }, + '.whitespace-pre-wrap': { 'white-space': 'pre-wrap' }, + + '.break-words': { 'word-wrap': 'break-word' }, + '.break-normal': { 'word-wrap': 'normal' }, + + '.truncate': { + overflow: 'hidden', + 'text-overflow': 'ellipsis', + 'white-space': 'nowrap', + }, + }, config('modules.whitespace')) + } +} diff --git a/src/plugins/width.js b/src/plugins/width.js new file mode 100644 index 000000000..517df2340 --- /dev/null +++ b/src/plugins/width.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('width'), (value, modifier) => { + return [`.${e(`w-${modifier}`)}`, { + 'width': value, + }] + })) + + addUtilities(utilities, config('modules.width')) + } +} diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index cbc69ad97..e704938cf 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -17,7 +17,7 @@ export default function(getConfig) { return function(css) { const config = getConfig() const processedPlugins = processPlugins([ - ...defaultPlugins.map(plugin => plugin()), + ...defaultPlugins, ...config.plugins ], config) const utilities = generateUtilities(config, processedPlugins.utilities) diff --git a/src/utilityModules.js b/src/utilityModules.js index 67134eb5f..4f0723f13 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -45,9 +45,6 @@ import tracking from './generators/tracking' import userSelect from './generators/userSelect' import verticalAlign from './generators/verticalAlign' import visibility from './generators/visibility' -import whitespace from './generators/whitespace' -import width from './generators/width' -import zIndex from './generators/zIndex' export default [ { name: 'lists', generator: lists }, @@ -97,7 +94,4 @@ export default [ { name: 'userSelect', generator: userSelect }, { name: 'verticalAlign', generator: verticalAlign }, { name: 'visibility', generator: visibility }, - { name: 'whitespace', generator: whitespace }, - { name: 'width', generator: width }, - // { name: 'zIndex', generator: zIndex }, ] From 239234b7b978b63d96e777c534fe916fde0ff6c3 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:03:10 -0500 Subject: [PATCH 04/60] Port visibility module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/visibility.js | 8 -------- src/plugins/visibility.js | 8 ++++++++ src/utilityModules.js | 2 -- 4 files changed, 10 insertions(+), 10 deletions(-) delete mode 100644 src/generators/visibility.js create mode 100644 src/plugins/visibility.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 4a617297d..ab836d087 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,8 +1,10 @@ +import visibility from './plugins/visibility' import whitespace from './plugins/whitespace' import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + visibility(), whitespace(), width(), zIndex(), diff --git a/src/generators/visibility.js b/src/generators/visibility.js deleted file mode 100644 index 7084040bb..000000000 --- a/src/generators/visibility.js +++ /dev/null @@ -1,8 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - visible: { visibility: 'visible' }, - invisible: { visibility: 'hidden' }, - }) -} diff --git a/src/plugins/visibility.js b/src/plugins/visibility.js new file mode 100644 index 000000000..dac62c620 --- /dev/null +++ b/src/plugins/visibility.js @@ -0,0 +1,8 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.visible': { visibility: 'visible' }, + '.invisible': { visibility: 'hidden' }, + }, config('modules.visibility')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 4f0723f13..a563020cb 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -44,7 +44,6 @@ import textStyle from './generators/textStyle' import tracking from './generators/tracking' import userSelect from './generators/userSelect' import verticalAlign from './generators/verticalAlign' -import visibility from './generators/visibility' export default [ { name: 'lists', generator: lists }, @@ -93,5 +92,4 @@ export default [ { name: 'tracking', generator: tracking }, { name: 'userSelect', generator: userSelect }, { name: 'verticalAlign', generator: verticalAlign }, - { name: 'visibility', generator: visibility }, ] From 718389ccd848949da3046dce4fc4ab65ee2a5b6d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:04:44 -0500 Subject: [PATCH 05/60] Port verticalAlign module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/verticalAlign.js | 12 ------------ src/plugins/verticalAlign.js | 12 ++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 14 insertions(+), 14 deletions(-) delete mode 100644 src/generators/verticalAlign.js create mode 100644 src/plugins/verticalAlign.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index ab836d087..75b327e22 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,9 +1,11 @@ +import verticalAlign from './plugins/verticalAlign' import visibility from './plugins/visibility' import whitespace from './plugins/whitespace' import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + verticalAlign(), visibility(), whitespace(), width(), diff --git a/src/generators/verticalAlign.js b/src/generators/verticalAlign.js deleted file mode 100644 index c06c4c2b4..000000000 --- a/src/generators/verticalAlign.js +++ /dev/null @@ -1,12 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'align-baseline': { 'vertical-align': 'baseline' }, - 'align-top': { 'vertical-align': 'top' }, - 'align-middle': { 'vertical-align': 'middle' }, - 'align-bottom': { 'vertical-align': 'bottom' }, - 'align-text-top': { 'vertical-align': 'text-top' }, - 'align-text-bottom': { 'vertical-align': 'text-bottom' }, - }) -} diff --git a/src/plugins/verticalAlign.js b/src/plugins/verticalAlign.js new file mode 100644 index 000000000..76a759dbe --- /dev/null +++ b/src/plugins/verticalAlign.js @@ -0,0 +1,12 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.align-baseline': { 'vertical-align': 'baseline' }, + '.align-top': { 'vertical-align': 'top' }, + '.align-middle': { 'vertical-align': 'middle' }, + '.align-bottom': { 'vertical-align': 'bottom' }, + '.align-text-top': { 'vertical-align': 'text-top' }, + '.align-text-bottom': { 'vertical-align': 'text-bottom' }, + }, config('modules.verticalAlign')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index a563020cb..587200116 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -43,7 +43,6 @@ import textSizes from './generators/textSizes' import textStyle from './generators/textStyle' import tracking from './generators/tracking' import userSelect from './generators/userSelect' -import verticalAlign from './generators/verticalAlign' export default [ { name: 'lists', generator: lists }, @@ -91,5 +90,4 @@ export default [ { name: 'textStyle', generator: textStyle }, { name: 'tracking', generator: tracking }, { name: 'userSelect', generator: userSelect }, - { name: 'verticalAlign', generator: verticalAlign }, ] From 86d81272deef8e9b4db29483a60d52c51191838d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:07:09 -0500 Subject: [PATCH 06/60] Port tracking module to plugin --- src/defaultPlugins.js | 4 ++++ src/generators/tracking.js | 10 ---------- src/generators/userSelect.js | 8 -------- src/plugins/tracking.js | 13 +++++++++++++ src/plugins/userSelect.js | 8 ++++++++ src/utilityModules.js | 4 ---- 6 files changed, 25 insertions(+), 22 deletions(-) delete mode 100644 src/generators/tracking.js delete mode 100644 src/generators/userSelect.js create mode 100644 src/plugins/tracking.js create mode 100644 src/plugins/userSelect.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 75b327e22..2ec9a8662 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,5 @@ +import tracking from './plugins/tracking' +import userSelect from './plugins/userSelect' import verticalAlign from './plugins/verticalAlign' import visibility from './plugins/visibility' import whitespace from './plugins/whitespace' @@ -5,6 +7,8 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + tracking(), + userSelect(), verticalAlign(), visibility(), whitespace(), diff --git a/src/generators/tracking.js b/src/generators/tracking.js deleted file mode 100644 index 696ee34c3..000000000 --- a/src/generators/tracking.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ tracking }) { - return _.map(tracking, (value, modifier) => { - return defineClass(`tracking-${modifier}`, { - 'letter-spacing': `${value}`, - }) - }) -} diff --git a/src/generators/userSelect.js b/src/generators/userSelect.js deleted file mode 100644 index c7b46d420..000000000 --- a/src/generators/userSelect.js +++ /dev/null @@ -1,8 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'select-none': { 'user-select': 'none' }, - 'select-text': { 'user-select': 'text' }, - }) -} diff --git a/src/plugins/tracking.js b/src/plugins/tracking.js new file mode 100644 index 000000000..91405c700 --- /dev/null +++ b/src/plugins/tracking.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config }) { + const utilities = _.fromPairs(_.map(config('tracking'), (value, modifier) => { + return [`.tracking-${modifier}`, { + 'letter-spacing': value, + }] + })) + + addUtilities(utilities, config('modules.tracking')) + } +} diff --git a/src/plugins/userSelect.js b/src/plugins/userSelect.js new file mode 100644 index 000000000..0eccdeb36 --- /dev/null +++ b/src/plugins/userSelect.js @@ -0,0 +1,8 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.select-none': { 'user-select': 'none' }, + '.select-text': { 'user-select': 'text' }, + }, config('modules.userSelect')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 587200116..e4622f20b 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -41,8 +41,6 @@ import textAlign from './generators/textAlign' import textColors from './generators/textColors' import textSizes from './generators/textSizes' import textStyle from './generators/textStyle' -import tracking from './generators/tracking' -import userSelect from './generators/userSelect' export default [ { name: 'lists', generator: lists }, @@ -88,6 +86,4 @@ export default [ { name: 'textColors', generator: textColors }, { name: 'textSizes', generator: textSizes }, { name: 'textStyle', generator: textStyle }, - { name: 'tracking', generator: tracking }, - { name: 'userSelect', generator: userSelect }, ] From 3ac73fbd1e9e46d5b18df3e718beb89b52624e51 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:10:30 -0500 Subject: [PATCH 07/60] Port text sizes and text style modules to plugins --- src/defaultPlugins.js | 4 ++++ src/generators/textSizes.js | 10 ---------- src/generators/textStyle.js | 26 -------------------------- src/plugins/textSizes.js | 13 +++++++++++++ src/plugins/textStyle.js | 26 ++++++++++++++++++++++++++ src/utilityModules.js | 4 ---- 6 files changed, 43 insertions(+), 40 deletions(-) delete mode 100644 src/generators/textSizes.js delete mode 100644 src/generators/textStyle.js create mode 100644 src/plugins/textSizes.js create mode 100644 src/plugins/textStyle.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 2ec9a8662..22ab5d864 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,5 @@ +import textSizes from './plugins/textSizes' +import textStyle from './plugins/textStyle' import tracking from './plugins/tracking' import userSelect from './plugins/userSelect' import verticalAlign from './plugins/verticalAlign' @@ -7,6 +9,8 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + textSizes(), + textStyle(), tracking(), userSelect(), verticalAlign(), diff --git a/src/generators/textSizes.js b/src/generators/textSizes.js deleted file mode 100644 index 447e0db7c..000000000 --- a/src/generators/textSizes.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ textSizes }) { - return _.map(textSizes, (size, modifier) => { - return defineClass(`text-${modifier}`, { - 'font-size': `${size}`, - }) - }) -} diff --git a/src/generators/textStyle.js b/src/generators/textStyle.js deleted file mode 100644 index f411e84ab..000000000 --- a/src/generators/textStyle.js +++ /dev/null @@ -1,26 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - italic: { 'font-style': 'italic' }, - roman: { 'font-style': 'normal' }, - - uppercase: { 'text-transform': 'uppercase' }, - lowercase: { 'text-transform': 'lowercase' }, - capitalize: { 'text-transform': 'capitalize' }, - 'normal-case': { 'text-transform': 'none' }, - - underline: { 'text-decoration': 'underline' }, - 'line-through': { 'text-decoration': 'line-through' }, - 'no-underline': { 'text-decoration': 'none' }, - - antialiased: { - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale', - }, - 'subpixel-antialiased': { - '-webkit-font-smoothing': 'auto', - '-moz-osx-font-smoothing': 'auto', - }, - }) -} diff --git a/src/plugins/textSizes.js b/src/plugins/textSizes.js new file mode 100644 index 000000000..a09715070 --- /dev/null +++ b/src/plugins/textSizes.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('textSizes'), (value, modifier) => { + return [`.${e(`text-${modifier}`)}`, { + 'font-size': value, + }] + })) + + addUtilities(utilities, config('modules.textSizes')) + } +} diff --git a/src/plugins/textStyle.js b/src/plugins/textStyle.js new file mode 100644 index 000000000..f83eb6703 --- /dev/null +++ b/src/plugins/textStyle.js @@ -0,0 +1,26 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.italic': { 'font-style': 'italic' }, + '.roman': { 'font-style': 'normal' }, + + '.uppercase': { 'text-transform': 'uppercase' }, + '.lowercase': { 'text-transform': 'lowercase' }, + '.capitalize': { 'text-transform': 'capitalize' }, + '.normal-case': { 'text-transform': 'none' }, + + '.underline': { 'text-decoration': 'underline' }, + '.line-through': { 'text-decoration': 'line-through' }, + '.no-underline': { 'text-decoration': 'none' }, + + '.antialiased': { + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale', + }, + '.subpixel-antialiased': { + '-webkit-font-smoothing': 'auto', + '-moz-osx-font-smoothing': 'auto', + }, + }, config('modules.textStyle')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index e4622f20b..560e038bc 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -39,8 +39,6 @@ import svgStroke from './generators/svgStroke' import tableLayout from './generators/tableLayout' import textAlign from './generators/textAlign' import textColors from './generators/textColors' -import textSizes from './generators/textSizes' -import textStyle from './generators/textStyle' export default [ { name: 'lists', generator: lists }, @@ -84,6 +82,4 @@ export default [ { name: 'tableLayout', generator: tableLayout }, { name: 'textAlign', generator: textAlign }, { name: 'textColors', generator: textColors }, - { name: 'textSizes', generator: textSizes }, - { name: 'textStyle', generator: textStyle }, ] From 7e2e27818cdf34ab09aaf0a3c139513b6d11ac0d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:11:27 -0500 Subject: [PATCH 08/60] Port textColors module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/textColors.js | 10 ---------- src/plugins/textColors.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/textColors.js create mode 100644 src/plugins/textColors.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 22ab5d864..05e66081c 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import textColors from './plugins/textColors' import textSizes from './plugins/textSizes' import textStyle from './plugins/textStyle' import tracking from './plugins/tracking' @@ -9,6 +10,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + textColors(), textSizes(), textStyle(), tracking(), diff --git a/src/generators/textColors.js b/src/generators/textColors.js deleted file mode 100644 index 8e9d8540e..000000000 --- a/src/generators/textColors.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ textColors }) { - return _.map(textColors, (color, modifier) => { - return defineClass(`text-${modifier}`, { - color, - }) - }) -} diff --git a/src/plugins/textColors.js b/src/plugins/textColors.js new file mode 100644 index 000000000..2ff8d3853 --- /dev/null +++ b/src/plugins/textColors.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('textColors'), (value, modifier) => { + return [`.${e(`text-${modifier}`)}`, { + 'color': value, + }] + })) + + addUtilities(utilities, config('modules.textColors')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 560e038bc..026430db1 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -38,7 +38,6 @@ import svgFill from './generators/svgFill' import svgStroke from './generators/svgStroke' import tableLayout from './generators/tableLayout' import textAlign from './generators/textAlign' -import textColors from './generators/textColors' export default [ { name: 'lists', generator: lists }, @@ -81,5 +80,4 @@ export default [ { name: 'svgStroke', generator: svgStroke }, { name: 'tableLayout', generator: tableLayout }, { name: 'textAlign', generator: textAlign }, - { name: 'textColors', generator: textColors }, ] From fbeadb76cc8f8dd0c5dcf60b2341549e2c179e2e Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:12:28 -0500 Subject: [PATCH 09/60] Port textAlign module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/textAlign.js | 10 ---------- src/plugins/textAlign.js | 10 ++++++++++ src/utilityModules.js | 2 -- 4 files changed, 12 insertions(+), 12 deletions(-) delete mode 100644 src/generators/textAlign.js create mode 100644 src/plugins/textAlign.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 05e66081c..9f9d7a927 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import textAlign from './plugins/textAlign' import textColors from './plugins/textColors' import textSizes from './plugins/textSizes' import textStyle from './plugins/textStyle' @@ -10,6 +11,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + textAlign(), textColors(), textSizes(), textStyle(), diff --git a/src/generators/textAlign.js b/src/generators/textAlign.js deleted file mode 100644 index e1b29f279..000000000 --- a/src/generators/textAlign.js +++ /dev/null @@ -1,10 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'text-left': { 'text-align': 'left' }, - 'text-center': { 'text-align': 'center' }, - 'text-right': { 'text-align': 'right' }, - 'text-justify': { 'text-align': 'justify' }, - }) -} diff --git a/src/plugins/textAlign.js b/src/plugins/textAlign.js new file mode 100644 index 000000000..c957c70a3 --- /dev/null +++ b/src/plugins/textAlign.js @@ -0,0 +1,10 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.text-left': { 'text-align': 'left' }, + '.text-center': { 'text-align': 'center' }, + '.text-right': { 'text-align': 'right' }, + '.text-justify': { 'text-align': 'justify' }, + }, config('modules.textAlign')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 026430db1..1e37ad346 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -37,7 +37,6 @@ import shadows from './generators/shadows' import svgFill from './generators/svgFill' import svgStroke from './generators/svgStroke' import tableLayout from './generators/tableLayout' -import textAlign from './generators/textAlign' export default [ { name: 'lists', generator: lists }, @@ -79,5 +78,4 @@ export default [ { name: 'svgFill', generator: svgFill }, { name: 'svgStroke', generator: svgStroke }, { name: 'tableLayout', generator: tableLayout }, - { name: 'textAlign', generator: textAlign }, ] From ff3e6bee43ce4b9f99cb81c095afb8889144a340 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:13:22 -0500 Subject: [PATCH 10/60] Port tableLayout module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/tableLayout.js | 8 -------- src/plugins/tableLayout.js | 8 ++++++++ src/utilityModules.js | 2 -- 4 files changed, 10 insertions(+), 10 deletions(-) delete mode 100644 src/generators/tableLayout.js create mode 100644 src/plugins/tableLayout.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 9f9d7a927..f276acf9d 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import tableLayout from './plugins/tableLayout' import textAlign from './plugins/textAlign' import textColors from './plugins/textColors' import textSizes from './plugins/textSizes' @@ -11,6 +12,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + tableLayout(), textAlign(), textColors(), textSizes(), diff --git a/src/generators/tableLayout.js b/src/generators/tableLayout.js deleted file mode 100644 index 5aa0c8554..000000000 --- a/src/generators/tableLayout.js +++ /dev/null @@ -1,8 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'table-auto': { 'table-layout': 'auto' }, - 'table-fixed': { 'table-layout': 'fixed' }, - }) -} diff --git a/src/plugins/tableLayout.js b/src/plugins/tableLayout.js new file mode 100644 index 000000000..572481b2c --- /dev/null +++ b/src/plugins/tableLayout.js @@ -0,0 +1,8 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.table-auto': { 'table-layout': 'auto' }, + '.table-fixed': { 'table-layout': 'fixed' }, + }, config('modules.tableLayout')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 1e37ad346..6cee5c8c3 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -36,7 +36,6 @@ import resize from './generators/resize' import shadows from './generators/shadows' import svgFill from './generators/svgFill' import svgStroke from './generators/svgStroke' -import tableLayout from './generators/tableLayout' export default [ { name: 'lists', generator: lists }, @@ -77,5 +76,4 @@ export default [ { name: 'shadows', generator: shadows }, { name: 'svgFill', generator: svgFill }, { name: 'svgStroke', generator: svgStroke }, - { name: 'tableLayout', generator: tableLayout }, ] From efb9e6953db3403d1d57bf53ccba046a4662489a Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:14:31 -0500 Subject: [PATCH 11/60] Port svgStroke module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/svgStroke.js | 10 ---------- src/plugins/svgStroke.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/svgStroke.js create mode 100644 src/plugins/svgStroke.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index f276acf9d..9df59bdbc 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import svgStroke from './plugins/svgStroke' import tableLayout from './plugins/tableLayout' import textAlign from './plugins/textAlign' import textColors from './plugins/textColors' @@ -12,6 +13,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + svgStroke(), tableLayout(), textAlign(), textColors(), diff --git a/src/generators/svgStroke.js b/src/generators/svgStroke.js deleted file mode 100644 index 802bf664d..000000000 --- a/src/generators/svgStroke.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ svgStroke }) { - return _.map(svgStroke, (color, modifier) => { - return defineClass(`stroke-${modifier}`, { - stroke: color, - }) - }) -} diff --git a/src/plugins/svgStroke.js b/src/plugins/svgStroke.js new file mode 100644 index 000000000..9632d7d71 --- /dev/null +++ b/src/plugins/svgStroke.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('svgStroke'), (value, modifier) => { + return [`.${e(`stroke-${modifier}`)}`, { + 'stroke': value, + }] + })) + + addUtilities(utilities, config('modules.svgStroke')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 6cee5c8c3..5673c8f99 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -35,7 +35,6 @@ import position from './generators/position' import resize from './generators/resize' import shadows from './generators/shadows' import svgFill from './generators/svgFill' -import svgStroke from './generators/svgStroke' export default [ { name: 'lists', generator: lists }, @@ -75,5 +74,4 @@ export default [ { name: 'resize', generator: resize }, { name: 'shadows', generator: shadows }, { name: 'svgFill', generator: svgFill }, - { name: 'svgStroke', generator: svgStroke }, ] From e6c0da03df59669afb75d04b892e4148ce719566 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:15:21 -0500 Subject: [PATCH 12/60] Port svgFill module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/svgFill.js | 10 ---------- src/plugins/svgFill.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/svgFill.js create mode 100644 src/plugins/svgFill.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 9df59bdbc..a3bb7e6a4 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import svgFill from './plugins/svgFill' import svgStroke from './plugins/svgStroke' import tableLayout from './plugins/tableLayout' import textAlign from './plugins/textAlign' @@ -13,6 +14,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + svgFill(), svgStroke(), tableLayout(), textAlign(), diff --git a/src/generators/svgFill.js b/src/generators/svgFill.js deleted file mode 100644 index d58fb50cd..000000000 --- a/src/generators/svgFill.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ svgFill }) { - return _.map(svgFill, (color, modifier) => { - return defineClass(`fill-${modifier}`, { - fill: color, - }) - }) -} diff --git a/src/plugins/svgFill.js b/src/plugins/svgFill.js new file mode 100644 index 000000000..8d4f2ac96 --- /dev/null +++ b/src/plugins/svgFill.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('svgFill'), (value, modifier) => { + return [`.${e(`fill-${modifier}`)}`, { + 'fill': value, + }] + })) + + addUtilities(utilities, config('modules.svgFill')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 5673c8f99..861a5ba15 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -34,7 +34,6 @@ import pointerEvents from './generators/pointerEvents' import position from './generators/position' import resize from './generators/resize' import shadows from './generators/shadows' -import svgFill from './generators/svgFill' export default [ { name: 'lists', generator: lists }, @@ -73,5 +72,4 @@ export default [ { name: 'position', generator: position }, { name: 'resize', generator: resize }, { name: 'shadows', generator: shadows }, - { name: 'svgFill', generator: svgFill }, ] From 6a3ed59fa69526277cae96ae1eeea93087d00f38 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:17:49 -0500 Subject: [PATCH 13/60] Port shadows module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/shadows.js | 10 ---------- src/plugins/shadows.js | 14 ++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 16 insertions(+), 12 deletions(-) delete mode 100644 src/generators/shadows.js create mode 100644 src/plugins/shadows.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index a3bb7e6a4..9d74cb31a 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import shadows from './plugins/shadows' import svgFill from './plugins/svgFill' import svgStroke from './plugins/svgStroke' import tableLayout from './plugins/tableLayout' @@ -14,6 +15,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + shadows(), svgFill(), svgStroke(), tableLayout(), diff --git a/src/generators/shadows.js b/src/generators/shadows.js deleted file mode 100644 index b16de5bbb..000000000 --- a/src/generators/shadows.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ shadows }) { - return _.map(shadows, (shadow, modifier) => { - return defineClass(modifier === 'default' ? 'shadow' : `shadow-${modifier}`, { - 'box-shadow': shadow, - }) - }) -} diff --git a/src/plugins/shadows.js b/src/plugins/shadows.js new file mode 100644 index 000000000..9a20bac7c --- /dev/null +++ b/src/plugins/shadows.js @@ -0,0 +1,14 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('shadows'), (value, modifier) => { + const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}` + return [`.${className}`, { + 'box-shadow': value, + }] + })) + + addUtilities(utilities, config('modules.shadows')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 861a5ba15..9040612de 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -33,7 +33,6 @@ import padding from './generators/padding' import pointerEvents from './generators/pointerEvents' import position from './generators/position' import resize from './generators/resize' -import shadows from './generators/shadows' export default [ { name: 'lists', generator: lists }, @@ -71,5 +70,4 @@ export default [ { name: 'pointerEvents', generator: pointerEvents }, { name: 'position', generator: position }, { name: 'resize', generator: resize }, - { name: 'shadows', generator: shadows }, ] From e7bf2bc6155df8a3411d77c09be49e07760639c7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:18:58 -0500 Subject: [PATCH 14/60] Port resize module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/resize.js | 10 ---------- src/plugins/resize.js | 10 ++++++++++ src/utilityModules.js | 2 -- 4 files changed, 12 insertions(+), 12 deletions(-) delete mode 100644 src/generators/resize.js create mode 100644 src/plugins/resize.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 9d74cb31a..e0c68247e 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import resize from './plugins/resize' import shadows from './plugins/shadows' import svgFill from './plugins/svgFill' import svgStroke from './plugins/svgStroke' @@ -15,6 +16,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + resize(), shadows(), svgFill(), svgStroke(), diff --git a/src/generators/resize.js b/src/generators/resize.js deleted file mode 100644 index af19ae292..000000000 --- a/src/generators/resize.js +++ /dev/null @@ -1,10 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'resize-none': { resize: 'none' }, - 'resize-y': { resize: 'vertical' }, - 'resize-x': { resize: 'horizontal' }, - resize: { resize: 'both' }, - }) -} diff --git a/src/plugins/resize.js b/src/plugins/resize.js new file mode 100644 index 000000000..e92bd8bff --- /dev/null +++ b/src/plugins/resize.js @@ -0,0 +1,10 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.resize-none': { resize: 'none' }, + '.resize-y': { resize: 'vertical' }, + '.resize-x': { resize: 'horizontal' }, + '.resize': { resize: 'both' }, + }, config('modules.resize')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 9040612de..476ff1c96 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -32,7 +32,6 @@ import overflow from './generators/overflow' import padding from './generators/padding' import pointerEvents from './generators/pointerEvents' import position from './generators/position' -import resize from './generators/resize' export default [ { name: 'lists', generator: lists }, @@ -69,5 +68,4 @@ export default [ { name: 'padding', generator: padding }, { name: 'pointerEvents', generator: pointerEvents }, { name: 'position', generator: position }, - { name: 'resize', generator: resize }, ] From 61251212db8f1a4ee5ace827834185db9cafb33c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:23:48 -0500 Subject: [PATCH 15/60] Port position module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/position.js | 29 ----------------------------- src/plugins/position.js | 29 +++++++++++++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 31 insertions(+), 31 deletions(-) delete mode 100644 src/generators/position.js create mode 100644 src/plugins/position.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index e0c68247e..432cd4c9f 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import position from './plugins/position' import resize from './plugins/resize' import shadows from './plugins/shadows' import svgFill from './plugins/svgFill' @@ -16,6 +17,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + position(), resize(), shadows(), svgFill(), diff --git a/src/generators/position.js b/src/generators/position.js deleted file mode 100644 index 5f3bba0f4..000000000 --- a/src/generators/position.js +++ /dev/null @@ -1,29 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - static: { position: 'static' }, - fixed: { position: 'fixed' }, - absolute: { position: 'absolute' }, - relative: { position: 'relative' }, - sticky: { position: 'sticky' }, - 'pin-none': { - top: 'auto', - right: 'auto', - bottom: 'auto', - left: 'auto', - }, - pin: { - top: 0, - right: 0, - bottom: 0, - left: 0, - }, - 'pin-y': { top: 0, bottom: 0 }, - 'pin-x': { right: 0, left: 0 }, - 'pin-t': { top: 0 }, - 'pin-r': { right: 0 }, - 'pin-b': { bottom: 0 }, - 'pin-l': { left: 0 }, - }) -} diff --git a/src/plugins/position.js b/src/plugins/position.js new file mode 100644 index 000000000..cdc62d073 --- /dev/null +++ b/src/plugins/position.js @@ -0,0 +1,29 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.static': { position: 'static' }, + '.fixed': { position: 'fixed' }, + '.absolute': { position: 'absolute' }, + '.relative': { position: 'relative' }, + '.sticky': { position: 'sticky' }, + '.pin-none': { + top: 'auto', + right: 'auto', + bottom: 'auto', + left: 'auto', + }, + '.pin': { + top: 0, + right: 0, + bottom: 0, + left: 0, + }, + '.pin-y': { top: 0, bottom: 0 }, + '.pin-x': { right: 0, left: 0 }, + '.pin-t': { top: 0 }, + '.pin-r': { right: 0 }, + '.pin-b': { bottom: 0 }, + '.pin-l': { left: 0 }, + }, config('modules.position')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 476ff1c96..d413dc659 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -31,7 +31,6 @@ import outline from './generators/outline' import overflow from './generators/overflow' import padding from './generators/padding' import pointerEvents from './generators/pointerEvents' -import position from './generators/position' export default [ { name: 'lists', generator: lists }, @@ -67,5 +66,4 @@ export default [ { name: 'overflow', generator: overflow }, { name: 'padding', generator: padding }, { name: 'pointerEvents', generator: pointerEvents }, - { name: 'position', generator: position }, ] From c5abdc95032f2fdb96e9d9a6156328c3c4ee2e4b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 13:37:28 -0500 Subject: [PATCH 16/60] Port pointerEvents module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/pointerEvents.js | 8 -------- src/plugins/pointerEvents.js | 8 ++++++++ src/utilityModules.js | 2 -- 4 files changed, 10 insertions(+), 10 deletions(-) delete mode 100644 src/generators/pointerEvents.js create mode 100644 src/plugins/pointerEvents.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 432cd4c9f..5a9ae5abf 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import pointerEvents from './plugins/pointerEvents' import position from './plugins/position' import resize from './plugins/resize' import shadows from './plugins/shadows' @@ -17,6 +18,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + pointerEvents(), position(), resize(), shadows(), diff --git a/src/generators/pointerEvents.js b/src/generators/pointerEvents.js deleted file mode 100644 index b8ef3ff80..000000000 --- a/src/generators/pointerEvents.js +++ /dev/null @@ -1,8 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'pointer-events-none': { 'pointer-events': 'none' }, - 'pointer-events-auto': { 'pointer-events': 'auto' }, - }) -} diff --git a/src/plugins/pointerEvents.js b/src/plugins/pointerEvents.js new file mode 100644 index 000000000..eb5daaaff --- /dev/null +++ b/src/plugins/pointerEvents.js @@ -0,0 +1,8 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.pointer-events-none': { 'pointer-events': 'none' }, + '.pointer-events-auto': { 'pointer-events': 'auto' }, + }, config('modules.pointerEvents')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index d413dc659..b9fec04b8 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -30,7 +30,6 @@ import opacity from './generators/opacity' import outline from './generators/outline' import overflow from './generators/overflow' import padding from './generators/padding' -import pointerEvents from './generators/pointerEvents' export default [ { name: 'lists', generator: lists }, @@ -65,5 +64,4 @@ export default [ { name: 'outline', generator: outline }, { name: 'overflow', generator: overflow }, { name: 'padding', generator: padding }, - { name: 'pointerEvents', generator: pointerEvents }, ] From d6611dd42c8014fe0d2567716b10e1f83483175c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 14:01:27 -0500 Subject: [PATCH 17/60] Port padding module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/padding.js | 31 ------------------------------- src/plugins/padding.js | 27 +++++++++++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 29 insertions(+), 33 deletions(-) delete mode 100644 src/generators/padding.js create mode 100644 src/plugins/padding.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 5a9ae5abf..b58f3a789 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import padding from './plugins/padding' import pointerEvents from './plugins/pointerEvents' import position from './plugins/position' import resize from './plugins/resize' @@ -18,6 +19,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + padding(), pointerEvents(), position(), resize(), diff --git a/src/generators/padding.js b/src/generators/padding.js deleted file mode 100644 index 82a5ac679..000000000 --- a/src/generators/padding.js +++ /dev/null @@ -1,31 +0,0 @@ -import _ from 'lodash' -import defineClasses from '../util/defineClasses' - -function definePadding(padding) { - const generators = [ - (size, modifier) => - defineClasses({ - [`p-${modifier}`]: { padding: `${size}` }, - }), - (size, modifier) => - defineClasses({ - [`py-${modifier}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` }, - [`px-${modifier}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` }, - }), - (size, modifier) => - defineClasses({ - [`pt-${modifier}`]: { 'padding-top': `${size}` }, - [`pr-${modifier}`]: { 'padding-right': `${size}` }, - [`pb-${modifier}`]: { 'padding-bottom': `${size}` }, - [`pl-${modifier}`]: { 'padding-left': `${size}` }, - }), - ] - - return _.flatMap(generators, generator => { - return _.flatMap(padding, generator) - }) -} - -export default function({ padding }) { - return _.flatten([definePadding(padding)]) -} diff --git a/src/plugins/padding.js b/src/plugins/padding.js new file mode 100644 index 000000000..85025861f --- /dev/null +++ b/src/plugins/padding.js @@ -0,0 +1,27 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const generators = [ + (size, modifier) => ({ + [`.${e(`p-${modifier}`)}`]: { padding: `${size}` }, + }), + (size, modifier) => ({ + [`.${e(`py-${modifier}`)}`]: { 'padding-top': `${size}`, 'padding-bottom': `${size}` }, + [`.${e(`px-${modifier}`)}`]: { 'padding-left': `${size}`, 'padding-right': `${size}` }, + }), + (size, modifier) => ({ + [`.${e(`pt-${modifier}`)}`]: { 'padding-top': `${size}` }, + [`.${e(`pr-${modifier}`)}`]: { 'padding-right': `${size}` }, + [`.${e(`pb-${modifier}`)}`]: { 'padding-bottom': `${size}` }, + [`.${e(`pl-${modifier}`)}`]: { 'padding-left': `${size}` }, + }), + ] + + const utilities = _.flatMap(generators, generator => { + return _.flatMap(config('padding'), generator) + }) + + addUtilities(utilities, config('modules.padding')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index b9fec04b8..5590e766b 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -29,7 +29,6 @@ import objectPosition from './generators/objectPosition' import opacity from './generators/opacity' import outline from './generators/outline' import overflow from './generators/overflow' -import padding from './generators/padding' export default [ { name: 'lists', generator: lists }, @@ -63,5 +62,4 @@ export default [ { name: 'opacity', generator: opacity }, { name: 'outline', generator: outline }, { name: 'overflow', generator: overflow }, - { name: 'padding', generator: padding }, ] From 0ba183a22af7e7d16f899e14b1b3c8d0234d8a21 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 14:04:11 -0500 Subject: [PATCH 18/60] Port overflow module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/overflow.js | 20 -------------------- src/plugins/overflow.js | 20 ++++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 22 insertions(+), 22 deletions(-) delete mode 100644 src/generators/overflow.js create mode 100644 src/plugins/overflow.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index b58f3a789..7bc0c87bc 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import overflow from './plugins/overflow' import padding from './plugins/padding' import pointerEvents from './plugins/pointerEvents' import position from './plugins/position' @@ -19,6 +20,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + overflow(), padding(), pointerEvents(), position(), diff --git a/src/generators/overflow.js b/src/generators/overflow.js deleted file mode 100644 index eefeb01c3..000000000 --- a/src/generators/overflow.js +++ /dev/null @@ -1,20 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'overflow-auto': { overflow: 'auto' }, - 'overflow-hidden': { overflow: 'hidden' }, - 'overflow-visible': { overflow: 'visible' }, - 'overflow-scroll': { overflow: 'scroll' }, - 'overflow-x-auto': { 'overflow-x': 'auto' }, - 'overflow-y-auto': { 'overflow-y': 'auto' }, - 'overflow-x-hidden': { 'overflow-x': 'hidden' }, - 'overflow-y-hidden': { 'overflow-y': 'hidden' }, - 'overflow-x-visible': { 'overflow-x': 'visible' }, - 'overflow-y-visible': { 'overflow-y': 'visible' }, - 'overflow-x-scroll': { 'overflow-x': 'scroll' }, - 'overflow-y-scroll': { 'overflow-y': 'scroll' }, - 'scrolling-touch': { '-webkit-overflow-scrolling': 'touch' }, - 'scrolling-auto': { '-webkit-overflow-scrolling': 'auto' }, - }) -} diff --git a/src/plugins/overflow.js b/src/plugins/overflow.js new file mode 100644 index 000000000..37dd6f2b7 --- /dev/null +++ b/src/plugins/overflow.js @@ -0,0 +1,20 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.overflow-auto': { overflow: 'auto' }, + '.overflow-hidden': { overflow: 'hidden' }, + '.overflow-visible': { overflow: 'visible' }, + '.overflow-scroll': { overflow: 'scroll' }, + '.overflow-x-auto': { 'overflow-x': 'auto' }, + '.overflow-y-auto': { 'overflow-y': 'auto' }, + '.overflow-x-hidden': { 'overflow-x': 'hidden' }, + '.overflow-y-hidden': { 'overflow-y': 'hidden' }, + '.overflow-x-visible': { 'overflow-x': 'visible' }, + '.overflow-y-visible': { 'overflow-y': 'visible' }, + '.overflow-x-scroll': { 'overflow-x': 'scroll' }, + '.overflow-y-scroll': { 'overflow-y': 'scroll' }, + '.scrolling-touch': { '-webkit-overflow-scrolling': 'touch' }, + '.scrolling-auto': { '-webkit-overflow-scrolling': 'auto' }, + }, config('modules.overflow')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 5590e766b..c8730d510 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -28,7 +28,6 @@ import objectFit from './generators/objectFit' import objectPosition from './generators/objectPosition' import opacity from './generators/opacity' import outline from './generators/outline' -import overflow from './generators/overflow' export default [ { name: 'lists', generator: lists }, @@ -61,5 +60,4 @@ export default [ { name: 'objectPosition', generator: objectPosition }, { name: 'opacity', generator: opacity }, { name: 'outline', generator: outline }, - { name: 'overflow', generator: overflow }, ] From a3ea5786695d7b7ff9b77d5c27434f47e0ee65f7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 14:05:00 -0500 Subject: [PATCH 19/60] Port outline module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/outline.js | 7 ------- src/plugins/outline.js | 7 +++++++ src/utilityModules.js | 2 -- 4 files changed, 9 insertions(+), 9 deletions(-) delete mode 100644 src/generators/outline.js create mode 100644 src/plugins/outline.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 7bc0c87bc..446be0981 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import outline from './plugins/outline' import overflow from './plugins/overflow' import padding from './plugins/padding' import pointerEvents from './plugins/pointerEvents' @@ -20,6 +21,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + outline(), overflow(), padding(), pointerEvents(), diff --git a/src/generators/outline.js b/src/generators/outline.js deleted file mode 100644 index 328c58a7f..000000000 --- a/src/generators/outline.js +++ /dev/null @@ -1,7 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'outline-none': { outline: '0' }, - }) -} diff --git a/src/plugins/outline.js b/src/plugins/outline.js new file mode 100644 index 000000000..79616768f --- /dev/null +++ b/src/plugins/outline.js @@ -0,0 +1,7 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.outline-none': { outline: '0' }, + }, config('modules.outline')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index c8730d510..d448a6cc9 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -27,7 +27,6 @@ import negativeMargin from './generators/negativeMargin' import objectFit from './generators/objectFit' import objectPosition from './generators/objectPosition' import opacity from './generators/opacity' -import outline from './generators/outline' export default [ { name: 'lists', generator: lists }, @@ -59,5 +58,4 @@ export default [ { name: 'objectFit', generator: objectFit }, { name: 'objectPosition', generator: objectPosition }, { name: 'opacity', generator: opacity }, - { name: 'outline', generator: outline }, ] From 3f089182cfddf96738c1b6fa551d97990db22606 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 14:05:56 -0500 Subject: [PATCH 20/60] Port opacity module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/opacity.js | 10 ---------- src/plugins/opacity.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/opacity.js create mode 100644 src/plugins/opacity.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 446be0981..f7a6ee6c2 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import opacity from './plugins/opacity' import outline from './plugins/outline' import overflow from './plugins/overflow' import padding from './plugins/padding' @@ -21,6 +22,7 @@ import width from './plugins/width' import zIndex from './plugins/zIndex' export default [ + opacity(), outline(), overflow(), padding(), diff --git a/src/generators/opacity.js b/src/generators/opacity.js deleted file mode 100644 index 31379145a..000000000 --- a/src/generators/opacity.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ opacity }) { - return _.map(opacity, (value, modifier) => { - return defineClass(`opacity-${modifier}`, { - opacity: value, - }) - }) -} diff --git a/src/plugins/opacity.js b/src/plugins/opacity.js new file mode 100644 index 000000000..f4dedb7db --- /dev/null +++ b/src/plugins/opacity.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('opacity'), (value, modifier) => { + return [`.${e(`opacity-${modifier}`)}`, { + 'opacity': value, + }] + })) + + addUtilities(utilities, config('modules.opacity')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index d448a6cc9..9065304bd 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -26,7 +26,6 @@ import minWidth from './generators/minWidth' import negativeMargin from './generators/negativeMargin' import objectFit from './generators/objectFit' import objectPosition from './generators/objectPosition' -import opacity from './generators/opacity' export default [ { name: 'lists', generator: lists }, @@ -57,5 +56,4 @@ export default [ { name: 'negativeMargin', generator: negativeMargin }, { name: 'objectFit', generator: objectFit }, { name: 'objectPosition', generator: objectPosition }, - { name: 'opacity', generator: opacity }, ] From 5b3d6d88611c932f4dc16cb4682e512de12846ec Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 14:11:48 -0500 Subject: [PATCH 21/60] Port objectPosition module to plugin, conditionally load plugins based on modules config --- src/defaultPlugins.js | 52 +++++++++++++++++--------------- src/generators/objectPosition.js | 15 --------- src/plugins/objectPosition.js | 15 +++++++++ src/processTailwindFeatures.js | 2 +- src/utilityModules.js | 2 -- 5 files changed, 44 insertions(+), 42 deletions(-) delete mode 100644 src/generators/objectPosition.js create mode 100644 src/plugins/objectPosition.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index f7a6ee6c2..1d6532522 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import objectPosition from './plugins/objectPosition' import opacity from './plugins/opacity' import outline from './plugins/outline' import overflow from './plugins/overflow' @@ -21,27 +22,30 @@ import whitespace from './plugins/whitespace' import width from './plugins/width' import zIndex from './plugins/zIndex' -export default [ - opacity(), - outline(), - overflow(), - padding(), - pointerEvents(), - position(), - resize(), - shadows(), - svgFill(), - svgStroke(), - tableLayout(), - textAlign(), - textColors(), - textSizes(), - textStyle(), - tracking(), - userSelect(), - verticalAlign(), - visibility(), - whitespace(), - width(), - zIndex(), -] +export default function (config) { + return [ + config.modules.objectPosition === false ? () => {} : objectPosition(), + config.modules.opacity === false ? () => {} : opacity(), + config.modules.outline === false ? () => {} : outline(), + config.modules.overflow === false ? () => {} : overflow(), + config.modules.padding === false ? () => {} : padding(), + config.modules.pointerEvents === false ? () => {} : pointerEvents(), + config.modules.position === false ? () => {} : position(), + config.modules.resize === false ? () => {} : resize(), + config.modules.shadows === false ? () => {} : shadows(), + config.modules.svgFill === false ? () => {} : svgFill(), + config.modules.svgStroke === false ? () => {} : svgStroke(), + config.modules.tableLayout === false ? () => {} : tableLayout(), + config.modules.textAlign === false ? () => {} : textAlign(), + config.modules.textColors === false ? () => {} : textColors(), + config.modules.textSizes === false ? () => {} : textSizes(), + config.modules.textStyle === false ? () => {} : textStyle(), + config.modules.tracking === false ? () => {} : tracking(), + config.modules.userSelect === false ? () => {} : userSelect(), + config.modules.verticalAlign === false ? () => {} : verticalAlign(), + config.modules.visibility === false ? () => {} : visibility(), + config.modules.whitespace === false ? () => {} : whitespace(), + config.modules.width === false ? () => {} : width(), + config.modules.zIndex === false ? () => {} : zIndex(), + ] +} diff --git a/src/generators/objectPosition.js b/src/generators/objectPosition.js deleted file mode 100644 index df8863099..000000000 --- a/src/generators/objectPosition.js +++ /dev/null @@ -1,15 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'object-bottom': { 'object-position': 'bottom' }, - 'object-center': { 'object-position': 'center' }, - 'object-left': { 'object-position': 'left' }, - 'object-left-bottom': { 'object-position': 'left bottom' }, - 'object-left-top': { 'object-position': 'left top' }, - 'object-right': { 'object-position': 'right' }, - 'object-right-bottom': { 'object-position': 'right bottom' }, - 'object-right-top': { 'object-position': 'right top' }, - 'object-top': { 'object-position': 'top' }, - }) -} diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js new file mode 100644 index 000000000..d89830d2d --- /dev/null +++ b/src/plugins/objectPosition.js @@ -0,0 +1,15 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.object-bottom': { 'object-position': 'bottom' }, + '.object-center': { 'object-position': 'center' }, + '.object-left': { 'object-position': 'left' }, + '.object-left-bottom': { 'object-position': 'left bottom' }, + '.object-left-top': { 'object-position': 'left top' }, + '.object-right': { 'object-position': 'right' }, + '.object-right-bottom': { 'object-position': 'right bottom' }, + '.object-right-top': { 'object-position': 'right top' }, + '.object-top': { 'object-position': 'top' }, + }, config('modules.objectPosition')) + } +} diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index e704938cf..189df0bdb 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -17,7 +17,7 @@ export default function(getConfig) { return function(css) { const config = getConfig() const processedPlugins = processPlugins([ - ...defaultPlugins, + ...defaultPlugins(config), ...config.plugins ], config) const utilities = generateUtilities(config, processedPlugins.utilities) diff --git a/src/utilityModules.js b/src/utilityModules.js index 9065304bd..72c723519 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -25,7 +25,6 @@ import minHeight from './generators/minHeight' import minWidth from './generators/minWidth' import negativeMargin from './generators/negativeMargin' import objectFit from './generators/objectFit' -import objectPosition from './generators/objectPosition' export default [ { name: 'lists', generator: lists }, @@ -55,5 +54,4 @@ export default [ { name: 'minWidth', generator: minWidth }, { name: 'negativeMargin', generator: negativeMargin }, { name: 'objectFit', generator: objectFit }, - { name: 'objectPosition', generator: objectPosition }, ] From bfbb17995a682056f127fcd9038bab4a56079f4f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 14:14:26 -0500 Subject: [PATCH 22/60] Port objectFit module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/objectFit.js | 11 ----------- src/plugins/objectFit.js | 11 +++++++++++ src/utilityModules.js | 2 -- 4 files changed, 13 insertions(+), 13 deletions(-) delete mode 100644 src/generators/objectFit.js create mode 100644 src/plugins/objectFit.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 1d6532522..d0f4f3ba4 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import objectFit from './plugins/objectFit' import objectPosition from './plugins/objectPosition' import opacity from './plugins/opacity' import outline from './plugins/outline' @@ -24,6 +25,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.objectFit === false ? () => {} : objectFit(), config.modules.objectPosition === false ? () => {} : objectPosition(), config.modules.opacity === false ? () => {} : opacity(), config.modules.outline === false ? () => {} : outline(), diff --git a/src/generators/objectFit.js b/src/generators/objectFit.js deleted file mode 100644 index e6723fdc7..000000000 --- a/src/generators/objectFit.js +++ /dev/null @@ -1,11 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'object-contain': { 'object-fit': 'contain' }, - 'object-cover': { 'object-fit': 'cover' }, - 'object-fill': { 'object-fit': 'fill' }, - 'object-none': { 'object-fit': 'none' }, - 'object-scale-down': { 'object-fit': 'scale-down' }, - }) -} diff --git a/src/plugins/objectFit.js b/src/plugins/objectFit.js new file mode 100644 index 000000000..9452858c8 --- /dev/null +++ b/src/plugins/objectFit.js @@ -0,0 +1,11 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.object-contain': { 'object-fit': 'contain' }, + '.object-cover': { 'object-fit': 'cover' }, + '.object-fill': { 'object-fit': 'fill' }, + '.object-none': { 'object-fit': 'none' }, + '.object-scale-down': { 'object-fit': 'scale-down' }, + }, config('modules.objectFit')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 72c723519..aec9132b2 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -24,7 +24,6 @@ import maxWidth from './generators/maxWidth' import minHeight from './generators/minHeight' import minWidth from './generators/minWidth' import negativeMargin from './generators/negativeMargin' -import objectFit from './generators/objectFit' export default [ { name: 'lists', generator: lists }, @@ -53,5 +52,4 @@ export default [ { name: 'minHeight', generator: minHeight }, { name: 'minWidth', generator: minWidth }, { name: 'negativeMargin', generator: negativeMargin }, - { name: 'objectFit', generator: objectFit }, ] From 1ff01435e75a7de5fa39c804f345442584545d18 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 14:16:39 -0500 Subject: [PATCH 23/60] Port negativeMargin module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/negativeMargin.js | 33 -------------------------------- src/plugins/negativeMargin.js | 29 ++++++++++++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 31 insertions(+), 35 deletions(-) delete mode 100644 src/generators/negativeMargin.js create mode 100644 src/plugins/negativeMargin.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index d0f4f3ba4..fc02b72a1 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import negativeMargin from './plugins/negativeMargin' import objectFit from './plugins/objectFit' import objectPosition from './plugins/objectPosition' import opacity from './plugins/opacity' @@ -25,6 +26,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.negativeMargin === false ? () => {} : negativeMargin(), config.modules.objectFit === false ? () => {} : objectFit(), config.modules.objectPosition === false ? () => {} : objectPosition(), config.modules.opacity === false ? () => {} : opacity(), diff --git a/src/generators/negativeMargin.js b/src/generators/negativeMargin.js deleted file mode 100644 index 8a818b121..000000000 --- a/src/generators/negativeMargin.js +++ /dev/null @@ -1,33 +0,0 @@ -import _ from 'lodash' -import defineClasses from '../util/defineClasses' - -function defineNegativeMargin(negativeMargin) { - const generators = [ - (size, modifier) => - defineClasses({ - [`-m-${modifier}`]: { margin: `${size}` }, - }), - (size, modifier) => - defineClasses({ - [`-my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` }, - [`-mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` }, - }), - (size, modifier) => - defineClasses({ - [`-mt-${modifier}`]: { 'margin-top': `${size}` }, - [`-mr-${modifier}`]: { 'margin-right': `${size}` }, - [`-mb-${modifier}`]: { 'margin-bottom': `${size}` }, - [`-ml-${modifier}`]: { 'margin-left': `${size}` }, - }), - ] - - return _.flatMap(generators, generator => { - return _.flatMap(negativeMargin, (size, modifier) => { - return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier) - }) - }) -} - -export default function({ negativeMargin }) { - return _.flatten([defineNegativeMargin(negativeMargin)]) -} diff --git a/src/plugins/negativeMargin.js b/src/plugins/negativeMargin.js new file mode 100644 index 000000000..1863f978c --- /dev/null +++ b/src/plugins/negativeMargin.js @@ -0,0 +1,29 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const generators = [ + (size, modifier) => ({ + [`.${e(`-m-${modifier}`)}`]: { margin: `${size}` }, + }), + (size, modifier) => ({ + [`.${e(`-my-${modifier}`)}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` }, + [`.${e(`-mx-${modifier}`)}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` }, + }), + (size, modifier) => ({ + [`.${e(`-mt-${modifier}`)}`]: { 'margin-top': `${size}` }, + [`.${e(`-mr-${modifier}`)}`]: { 'margin-right': `${size}` }, + [`.${e(`-mb-${modifier}`)}`]: { 'margin-bottom': `${size}` }, + [`.${e(`-ml-${modifier}`)}`]: { 'margin-left': `${size}` }, + }), + ] + + const utilities = _.flatMap(generators, generator => { + return _.flatMap(config('negativeMargin'), (size, modifier) => { + return generator(`${size}` === '0' ? `${size}` : `-${size}`, modifier) + }) + }) + + addUtilities(utilities, config('modules.negativeMargin')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index aec9132b2..1371979e2 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -23,7 +23,6 @@ import maxHeight from './generators/maxHeight' import maxWidth from './generators/maxWidth' import minHeight from './generators/minHeight' import minWidth from './generators/minWidth' -import negativeMargin from './generators/negativeMargin' export default [ { name: 'lists', generator: lists }, @@ -51,5 +50,4 @@ export default [ { name: 'maxWidth', generator: maxWidth }, { name: 'minHeight', generator: minHeight }, { name: 'minWidth', generator: minWidth }, - { name: 'negativeMargin', generator: negativeMargin }, ] From b140bf66fbbb47ca4f9cf4d2aff5fe4895dd5f5d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:09:34 -0500 Subject: [PATCH 24/60] Port minWidth module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/minWidth.js | 14 -------------- src/plugins/minWidth.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 16 deletions(-) delete mode 100644 src/generators/minWidth.js create mode 100644 src/plugins/minWidth.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index fc02b72a1..003d19813 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import minWidth from './plugins/minWidth' import negativeMargin from './plugins/negativeMargin' import objectFit from './plugins/objectFit' import objectPosition from './plugins/objectPosition' @@ -26,6 +27,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.minWidth === false ? () => {} : minWidth(), config.modules.negativeMargin === false ? () => {} : negativeMargin(), config.modules.objectFit === false ? () => {} : objectFit(), config.modules.objectPosition === false ? () => {} : objectPosition(), diff --git a/src/generators/minWidth.js b/src/generators/minWidth.js deleted file mode 100644 index d8fa8dce6..000000000 --- a/src/generators/minWidth.js +++ /dev/null @@ -1,14 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -function defineMinWidths(widths) { - return _.map(widths, (size, modifer) => { - return defineClass(`min-w-${modifer}`, { - 'min-width': `${size}`, - }) - }) -} - -export default function(config) { - return _.flatten([defineMinWidths(config.minWidth)]) -} diff --git a/src/plugins/minWidth.js b/src/plugins/minWidth.js new file mode 100644 index 000000000..a5da08634 --- /dev/null +++ b/src/plugins/minWidth.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('minWidth'), (value, modifier) => { + return [`.${e(`min-w-${modifier}`)}`, { + 'min-width': value, + }] + })) + + addUtilities(utilities, config('modules.minWidth')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 1371979e2..a5f3893cb 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -22,7 +22,6 @@ import margin from './generators/margin' import maxHeight from './generators/maxHeight' import maxWidth from './generators/maxWidth' import minHeight from './generators/minHeight' -import minWidth from './generators/minWidth' export default [ { name: 'lists', generator: lists }, @@ -49,5 +48,4 @@ export default [ { name: 'maxHeight', generator: maxHeight }, { name: 'maxWidth', generator: maxWidth }, { name: 'minHeight', generator: minHeight }, - { name: 'minWidth', generator: minWidth }, ] From 645de657a13cab02c1668570dc843d10d1e1e392 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:10:45 -0500 Subject: [PATCH 25/60] Port minHeight module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/minHeight.js | 14 -------------- src/plugins/minHeight.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 16 deletions(-) delete mode 100644 src/generators/minHeight.js create mode 100644 src/plugins/minHeight.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 003d19813..8967e1026 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import minHeight from './plugins/minHeight' import minWidth from './plugins/minWidth' import negativeMargin from './plugins/negativeMargin' import objectFit from './plugins/objectFit' @@ -27,6 +28,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.minHeight === false ? () => {} : minHeight(), config.modules.minWidth === false ? () => {} : minWidth(), config.modules.negativeMargin === false ? () => {} : negativeMargin(), config.modules.objectFit === false ? () => {} : objectFit(), diff --git a/src/generators/minHeight.js b/src/generators/minHeight.js deleted file mode 100644 index 4d6233eff..000000000 --- a/src/generators/minHeight.js +++ /dev/null @@ -1,14 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -function defineMinHeights(heights) { - return _.map(heights, (size, modifer) => { - return defineClass(`min-h-${modifer}`, { - 'min-height': `${size}`, - }) - }) -} - -export default function(config) { - return _.flatten([defineMinHeights(config.minHeight)]) -} diff --git a/src/plugins/minHeight.js b/src/plugins/minHeight.js new file mode 100644 index 000000000..a094c05a1 --- /dev/null +++ b/src/plugins/minHeight.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('minHeight'), (value, modifier) => { + return [`.${e(`min-h-${modifier}`)}`, { + 'min-height': value, + }] + })) + + addUtilities(utilities, config('modules.minHeight')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index a5f3893cb..ce62cd447 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -21,7 +21,6 @@ import leading from './generators/leading' import margin from './generators/margin' import maxHeight from './generators/maxHeight' import maxWidth from './generators/maxWidth' -import minHeight from './generators/minHeight' export default [ { name: 'lists', generator: lists }, @@ -47,5 +46,4 @@ export default [ { name: 'margin', generator: margin }, { name: 'maxHeight', generator: maxHeight }, { name: 'maxWidth', generator: maxWidth }, - { name: 'minHeight', generator: minHeight }, ] From 3c99be09cabbdf4f6d180ef5760b7b286d5712c1 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:11:50 -0500 Subject: [PATCH 26/60] Port maxWidth module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/maxWidth.js | 14 -------------- src/plugins/maxWidth.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 16 deletions(-) delete mode 100644 src/generators/maxWidth.js create mode 100644 src/plugins/maxWidth.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 8967e1026..1a2b2f88e 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import maxWidth from './plugins/maxWidth' import minHeight from './plugins/minHeight' import minWidth from './plugins/minWidth' import negativeMargin from './plugins/negativeMargin' @@ -28,6 +29,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.maxWidth === false ? () => {} : maxWidth(), config.modules.minHeight === false ? () => {} : minHeight(), config.modules.minWidth === false ? () => {} : minWidth(), config.modules.negativeMargin === false ? () => {} : negativeMargin(), diff --git a/src/generators/maxWidth.js b/src/generators/maxWidth.js deleted file mode 100644 index 9daa4d270..000000000 --- a/src/generators/maxWidth.js +++ /dev/null @@ -1,14 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -function defineMaxWidths(widths) { - return _.map(widths, (size, modifer) => { - return defineClass(`max-w-${modifer}`, { - 'max-width': `${size}`, - }) - }) -} - -export default function(config) { - return _.flatten([defineMaxWidths(config.maxWidth)]) -} diff --git a/src/plugins/maxWidth.js b/src/plugins/maxWidth.js new file mode 100644 index 000000000..dadd826ae --- /dev/null +++ b/src/plugins/maxWidth.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('maxWidth'), (value, modifier) => { + return [`.${e(`max-w-${modifier}`)}`, { + 'max-width': value, + }] + })) + + addUtilities(utilities, config('modules.maxWidth')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index ce62cd447..9a8b7639a 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -20,7 +20,6 @@ import height from './generators/height' import leading from './generators/leading' import margin from './generators/margin' import maxHeight from './generators/maxHeight' -import maxWidth from './generators/maxWidth' export default [ { name: 'lists', generator: lists }, @@ -45,5 +44,4 @@ export default [ { name: 'leading', generator: leading }, { name: 'margin', generator: margin }, { name: 'maxHeight', generator: maxHeight }, - { name: 'maxWidth', generator: maxWidth }, ] From b5a51e879daab1f53d47854456ae252b1f4ea4d2 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:12:45 -0500 Subject: [PATCH 27/60] Port maxHeight module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/maxHeight.js | 14 -------------- src/plugins/maxHeight.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 16 deletions(-) delete mode 100644 src/generators/maxHeight.js create mode 100644 src/plugins/maxHeight.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 1a2b2f88e..f559851f4 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import maxHeight from './plugins/maxHeight' import maxWidth from './plugins/maxWidth' import minHeight from './plugins/minHeight' import minWidth from './plugins/minWidth' @@ -29,6 +30,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.maxHeight === false ? () => {} : maxHeight(), config.modules.maxWidth === false ? () => {} : maxWidth(), config.modules.minHeight === false ? () => {} : minHeight(), config.modules.minWidth === false ? () => {} : minWidth(), diff --git a/src/generators/maxHeight.js b/src/generators/maxHeight.js deleted file mode 100644 index ae42ba6fb..000000000 --- a/src/generators/maxHeight.js +++ /dev/null @@ -1,14 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -function defineMaxHeights(heights) { - return _.map(heights, (size, modifer) => { - return defineClass(`max-h-${modifer}`, { - 'max-height': `${size}`, - }) - }) -} - -export default function(config) { - return _.flatten([defineMaxHeights(config.maxHeight)]) -} diff --git a/src/plugins/maxHeight.js b/src/plugins/maxHeight.js new file mode 100644 index 000000000..b6f50dcdf --- /dev/null +++ b/src/plugins/maxHeight.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('maxHeight'), (value, modifier) => { + return [`.${e(`max-h-${modifier}`)}`, { + 'max-height': value, + }] + })) + + addUtilities(utilities, config('modules.maxHeight')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 9a8b7639a..b562a7871 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -19,7 +19,6 @@ import fontWeights from './generators/fontWeights' import height from './generators/height' import leading from './generators/leading' import margin from './generators/margin' -import maxHeight from './generators/maxHeight' export default [ { name: 'lists', generator: lists }, @@ -43,5 +42,4 @@ export default [ { name: 'height', generator: height }, { name: 'leading', generator: leading }, { name: 'margin', generator: margin }, - { name: 'maxHeight', generator: maxHeight }, ] From 97da5c40d69b49f7462dae6deadd1d638532f5dd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:13:57 -0500 Subject: [PATCH 28/60] Port margin module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/margin.js | 31 ------------------------------- src/plugins/margin.js | 27 +++++++++++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 29 insertions(+), 33 deletions(-) delete mode 100644 src/generators/margin.js create mode 100644 src/plugins/margin.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index f559851f4..b7ac5d44c 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import margin from './plugins/margin' import maxHeight from './plugins/maxHeight' import maxWidth from './plugins/maxWidth' import minHeight from './plugins/minHeight' @@ -30,6 +31,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.margin === false ? () => {} : margin(), config.modules.maxHeight === false ? () => {} : maxHeight(), config.modules.maxWidth === false ? () => {} : maxWidth(), config.modules.minHeight === false ? () => {} : minHeight(), diff --git a/src/generators/margin.js b/src/generators/margin.js deleted file mode 100644 index 9fe3c4bb0..000000000 --- a/src/generators/margin.js +++ /dev/null @@ -1,31 +0,0 @@ -import _ from 'lodash' -import defineClasses from '../util/defineClasses' - -function defineMargin(margin) { - const generators = [ - (size, modifier) => - defineClasses({ - [`m-${modifier}`]: { margin: `${size}` }, - }), - (size, modifier) => - defineClasses({ - [`my-${modifier}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` }, - [`mx-${modifier}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` }, - }), - (size, modifier) => - defineClasses({ - [`mt-${modifier}`]: { 'margin-top': `${size}` }, - [`mr-${modifier}`]: { 'margin-right': `${size}` }, - [`mb-${modifier}`]: { 'margin-bottom': `${size}` }, - [`ml-${modifier}`]: { 'margin-left': `${size}` }, - }), - ] - - return _.flatMap(generators, generator => { - return _.flatMap(margin, generator) - }) -} - -export default function({ margin }) { - return _.flatten([defineMargin(margin)]) -} diff --git a/src/plugins/margin.js b/src/plugins/margin.js new file mode 100644 index 000000000..96737c405 --- /dev/null +++ b/src/plugins/margin.js @@ -0,0 +1,27 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const generators = [ + (size, modifier) => ({ + [`.${e(`m-${modifier}`)}`]: { margin: `${size}` }, + }), + (size, modifier) => ({ + [`.${e(`my-${modifier}`)}`]: { 'margin-top': `${size}`, 'margin-bottom': `${size}` }, + [`.${e(`mx-${modifier}`)}`]: { 'margin-left': `${size}`, 'margin-right': `${size}` }, + }), + (size, modifier) => ({ + [`.${e(`mt-${modifier}`)}`]: { 'margin-top': `${size}` }, + [`.${e(`mr-${modifier}`)}`]: { 'margin-right': `${size}` }, + [`.${e(`mb-${modifier}`)}`]: { 'margin-bottom': `${size}` }, + [`.${e(`ml-${modifier}`)}`]: { 'margin-left': `${size}` }, + }), + ] + + const utilities = _.flatMap(generators, generator => { + return _.flatMap(config('margin'), generator) + }) + + addUtilities(utilities, config('modules.margin')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index b562a7871..348566aa9 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -18,7 +18,6 @@ import fonts from './generators/fonts' import fontWeights from './generators/fontWeights' import height from './generators/height' import leading from './generators/leading' -import margin from './generators/margin' export default [ { name: 'lists', generator: lists }, @@ -41,5 +40,4 @@ export default [ { name: 'fontWeights', generator: fontWeights }, { name: 'height', generator: height }, { name: 'leading', generator: leading }, - { name: 'margin', generator: margin }, ] From c8802df40d64ccb52f738e4ce8937f00b6a86012 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:15:06 -0500 Subject: [PATCH 29/60] Port leading module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/leading.js | 10 ---------- src/plugins/leading.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/leading.js create mode 100644 src/plugins/leading.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index b7ac5d44c..d9dca45d9 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import leading from './plugins/leading' import margin from './plugins/margin' import maxHeight from './plugins/maxHeight' import maxWidth from './plugins/maxWidth' @@ -31,6 +32,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.leading === false ? () => {} : leading(), config.modules.margin === false ? () => {} : margin(), config.modules.maxHeight === false ? () => {} : maxHeight(), config.modules.maxWidth === false ? () => {} : maxWidth(), diff --git a/src/generators/leading.js b/src/generators/leading.js deleted file mode 100644 index ce661b93a..000000000 --- a/src/generators/leading.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ leading }) { - return _.map(leading, (value, modifier) => { - return defineClass(`leading-${modifier}`, { - 'line-height': `${value}`, - }) - }) -} diff --git a/src/plugins/leading.js b/src/plugins/leading.js new file mode 100644 index 000000000..5dc9a4df0 --- /dev/null +++ b/src/plugins/leading.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('leading'), (value, modifier) => { + return [`.${e(`leading-${modifier}`)}`, { + 'line-height': value, + }] + })) + + addUtilities(utilities, config('modules.leading')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 348566aa9..ba1e94731 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -17,7 +17,6 @@ import float from './generators/float' import fonts from './generators/fonts' import fontWeights from './generators/fontWeights' import height from './generators/height' -import leading from './generators/leading' export default [ { name: 'lists', generator: lists }, @@ -39,5 +38,4 @@ export default [ { name: 'fonts', generator: fonts }, { name: 'fontWeights', generator: fontWeights }, { name: 'height', generator: height }, - { name: 'leading', generator: leading }, ] From 964bf81ee334d7dfd7dbfa7a56cb0cc0e2e97c25 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:16:16 -0500 Subject: [PATCH 30/60] Port height module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/height.js | 14 -------------- src/plugins/height.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 16 deletions(-) delete mode 100644 src/generators/height.js create mode 100644 src/plugins/height.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index d9dca45d9..9a50335ab 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import height from './plugins/height' import leading from './plugins/leading' import margin from './plugins/margin' import maxHeight from './plugins/maxHeight' @@ -32,6 +33,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.height === false ? () => {} : height(), config.modules.leading === false ? () => {} : leading(), config.modules.margin === false ? () => {} : margin(), config.modules.maxHeight === false ? () => {} : maxHeight(), diff --git a/src/generators/height.js b/src/generators/height.js deleted file mode 100644 index 8ba099ca1..000000000 --- a/src/generators/height.js +++ /dev/null @@ -1,14 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -function defineHeights(heights) { - return _.map(heights, (size, modifer) => { - return defineClass(`h-${modifer}`, { - height: `${size}`, - }) - }) -} - -export default function(config) { - return _.flatten([defineHeights(config.height)]) -} diff --git a/src/plugins/height.js b/src/plugins/height.js new file mode 100644 index 000000000..67c0ab745 --- /dev/null +++ b/src/plugins/height.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('height'), (value, modifier) => { + return [`.${e(`h-${modifier}`)}`, { + 'height': value, + }] + })) + + addUtilities(utilities, config('modules.height')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index ba1e94731..fb98007bb 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -16,7 +16,6 @@ import flexbox from './generators/flexbox' import float from './generators/float' import fonts from './generators/fonts' import fontWeights from './generators/fontWeights' -import height from './generators/height' export default [ { name: 'lists', generator: lists }, @@ -37,5 +36,4 @@ export default [ { name: 'float', generator: float }, { name: 'fonts', generator: fonts }, { name: 'fontWeights', generator: fontWeights }, - { name: 'height', generator: height }, ] From 07193bb31079e4ae170fb628f97e7e3542016c5f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:17:49 -0500 Subject: [PATCH 31/60] Port fontWeights module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/fontWeights.js | 10 ---------- src/plugins/fontWeights.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/fontWeights.js create mode 100644 src/plugins/fontWeights.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 9a50335ab..60800ee2d 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import fontWeights from './plugins/fontWeights' import height from './plugins/height' import leading from './plugins/leading' import margin from './plugins/margin' @@ -33,6 +34,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.fontWeights === false ? () => {} : fontWeights(), config.modules.height === false ? () => {} : height(), config.modules.leading === false ? () => {} : leading(), config.modules.margin === false ? () => {} : margin(), diff --git a/src/generators/fontWeights.js b/src/generators/fontWeights.js deleted file mode 100644 index d959b8161..000000000 --- a/src/generators/fontWeights.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ fontWeights }) { - return _.map(fontWeights, (weight, modifier) => { - return defineClass(`font-${modifier}`, { - 'font-weight': `${weight}`, - }) - }) -} diff --git a/src/plugins/fontWeights.js b/src/plugins/fontWeights.js new file mode 100644 index 000000000..6d669e973 --- /dev/null +++ b/src/plugins/fontWeights.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('fontWeights'), (value, modifier) => { + return [`.${e(`font-${modifier}`)}`, { + 'font-weight': value, + }] + })) + + addUtilities(utilities, config('modules.fontWeights')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index fb98007bb..430572cbd 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -15,7 +15,6 @@ import display from './generators/display' import flexbox from './generators/flexbox' import float from './generators/float' import fonts from './generators/fonts' -import fontWeights from './generators/fontWeights' export default [ { name: 'lists', generator: lists }, @@ -35,5 +34,4 @@ export default [ { name: 'flexbox', generator: flexbox }, { name: 'float', generator: float }, { name: 'fonts', generator: fonts }, - { name: 'fontWeights', generator: fontWeights }, ] From 499fae20d0176c76da9bdf41beddb594d5f118d4 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:19:34 -0500 Subject: [PATCH 32/60] Port fonts module to plugins --- src/defaultPlugins.js | 2 ++ src/generators/fonts.js | 14 -------------- src/plugins/fonts.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 16 deletions(-) delete mode 100644 src/generators/fonts.js create mode 100644 src/plugins/fonts.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 60800ee2d..7f8141267 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import fonts from './plugins/fonts' import fontWeights from './plugins/fontWeights' import height from './plugins/height' import leading from './plugins/leading' @@ -34,6 +35,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.fonts === false ? () => {} : fonts(), config.modules.fontWeights === false ? () => {} : fontWeights(), config.modules.height === false ? () => {} : height(), config.modules.leading === false ? () => {} : leading(), diff --git a/src/generators/fonts.js b/src/generators/fonts.js deleted file mode 100644 index d2a3bf308..000000000 --- a/src/generators/fonts.js +++ /dev/null @@ -1,14 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ fonts }) { - return _.map(fonts, (families, font) => { - if (_.isArray(families)) { - families = families.join(', ') - } - - return defineClass(`font-${font}`, { - 'font-family': `${families}`, - }) - }) -} diff --git a/src/plugins/fonts.js b/src/plugins/fonts.js new file mode 100644 index 000000000..25b9efc5e --- /dev/null +++ b/src/plugins/fonts.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('fonts'), (value, modifier) => { + return [`.${e(`font-${modifier}`)}`, { + 'font-family': _.isArray(value) ? value.join(', ') : value, + }] + })) + + addUtilities(utilities, config('modules.fonts')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 430572cbd..78bbb3166 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -14,7 +14,6 @@ import cursor from './generators/cursor' import display from './generators/display' import flexbox from './generators/flexbox' import float from './generators/float' -import fonts from './generators/fonts' export default [ { name: 'lists', generator: lists }, @@ -33,5 +32,4 @@ export default [ { name: 'display', generator: display }, { name: 'flexbox', generator: flexbox }, { name: 'float', generator: float }, - { name: 'fonts', generator: fonts }, ] From dce3b5fcb0aa81ff80c6f08a963d66a483fad420 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:21:21 -0500 Subject: [PATCH 33/60] Port float module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/float.js | 20 -------------------- src/plugins/float.js | 14 ++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 16 insertions(+), 22 deletions(-) delete mode 100644 src/generators/float.js create mode 100644 src/plugins/float.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 7f8141267..e18473554 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import float from './plugins/float' import fonts from './plugins/fonts' import fontWeights from './plugins/fontWeights' import height from './plugins/height' @@ -35,6 +36,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.float === false ? () => {} : float(), config.modules.fonts === false ? () => {} : fonts(), config.modules.fontWeights === false ? () => {} : fontWeights(), config.modules.height === false ? () => {} : height(), diff --git a/src/generators/float.js b/src/generators/float.js deleted file mode 100644 index e7707e783..000000000 --- a/src/generators/float.js +++ /dev/null @@ -1,20 +0,0 @@ -import _ from 'lodash' -import postcss from 'postcss' -import defineClasses from '../util/defineClasses' - -export default function() { - return _.concat( - defineClasses({ - 'float-right': { float: 'right' }, - 'float-left': { float: 'left' }, - 'float-none': { float: 'none' }, - }), - postcss.parse(` - .clearfix:after { - content: ""; - display: table; - clear: both; - } - `).nodes - ) -} diff --git a/src/plugins/float.js b/src/plugins/float.js new file mode 100644 index 000000000..7a7eece99 --- /dev/null +++ b/src/plugins/float.js @@ -0,0 +1,14 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.float-right': { float: 'right' }, + '.float-left': { float: 'left' }, + '.float-none': { float: 'none' }, + '.clearfix:after': { + content: '""', + display: 'table', + clear: 'both', + } + }, config('modules.float')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 78bbb3166..36ae068c0 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -13,7 +13,6 @@ import borderWidths from './generators/borderWidths' import cursor from './generators/cursor' import display from './generators/display' import flexbox from './generators/flexbox' -import float from './generators/float' export default [ { name: 'lists', generator: lists }, @@ -31,5 +30,4 @@ export default [ { name: 'cursor', generator: cursor }, { name: 'display', generator: display }, { name: 'flexbox', generator: flexbox }, - { name: 'float', generator: float }, ] From fd1729ec81a3445177b958b434157a5350aea41c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:23:27 -0500 Subject: [PATCH 34/60] Port flexbox module to plugin --- src/defaultPlugins.js | 2 + src/generators/flexbox.js | 117 -------------------------------------- src/plugins/flexbox.js | 117 ++++++++++++++++++++++++++++++++++++++ src/utilityModules.js | 2 - 4 files changed, 119 insertions(+), 119 deletions(-) delete mode 100644 src/generators/flexbox.js create mode 100644 src/plugins/flexbox.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index e18473554..6b179b223 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import flexbox from './plugins/flexbox' import float from './plugins/float' import fonts from './plugins/fonts' import fontWeights from './plugins/fontWeights' @@ -36,6 +37,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.flexbox === false ? () => {} : flexbox(), config.modules.float === false ? () => {} : float(), config.modules.fonts === false ? () => {} : fonts(), config.modules.fontWeights === false ? () => {} : fontWeights(), diff --git a/src/generators/flexbox.js b/src/generators/flexbox.js deleted file mode 100644 index 30827dc7e..000000000 --- a/src/generators/flexbox.js +++ /dev/null @@ -1,117 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - flex: { - display: 'flex', - }, - 'inline-flex': { - display: 'inline-flex', - }, - 'flex-row': { - 'flex-direction': 'row', - }, - 'flex-row-reverse': { - 'flex-direction': 'row-reverse', - }, - 'flex-col': { - 'flex-direction': 'column', - }, - 'flex-col-reverse': { - 'flex-direction': 'column-reverse', - }, - 'flex-wrap': { - 'flex-wrap': 'wrap', - }, - 'flex-wrap-reverse': { - 'flex-wrap': 'wrap-reverse', - }, - 'flex-no-wrap': { - 'flex-wrap': 'nowrap', - }, - 'items-start': { - 'align-items': 'flex-start', - }, - 'items-end': { - 'align-items': 'flex-end', - }, - 'items-center': { - 'align-items': 'center', - }, - 'items-baseline': { - 'align-items': 'baseline', - }, - 'items-stretch': { - 'align-items': 'stretch', - }, - 'self-auto': { - 'align-self': 'auto', - }, - 'self-start': { - 'align-self': 'flex-start', - }, - 'self-end': { - 'align-self': 'flex-end', - }, - 'self-center': { - 'align-self': 'center', - }, - 'self-stretch': { - 'align-self': 'stretch', - }, - 'justify-start': { - 'justify-content': 'flex-start', - }, - 'justify-end': { - 'justify-content': 'flex-end', - }, - 'justify-center': { - 'justify-content': 'center', - }, - 'justify-between': { - 'justify-content': 'space-between', - }, - 'justify-around': { - 'justify-content': 'space-around', - }, - 'content-center': { - 'align-content': 'center', - }, - 'content-start': { - 'align-content': 'flex-start', - }, - 'content-end': { - 'align-content': 'flex-end', - }, - 'content-between': { - 'align-content': 'space-between', - }, - 'content-around': { - 'align-content': 'space-around', - }, - 'flex-1': { - flex: '1 1 0%', - }, - 'flex-auto': { - flex: '1 1 auto', - }, - 'flex-initial': { - flex: '0 1 auto', - }, - 'flex-none': { - flex: 'none', - }, - 'flex-grow': { - 'flex-grow': '1', - }, - 'flex-shrink': { - 'flex-shrink': '1', - }, - 'flex-no-grow': { - 'flex-grow': '0', - }, - 'flex-no-shrink': { - 'flex-shrink': '0', - }, - }) -} diff --git a/src/plugins/flexbox.js b/src/plugins/flexbox.js new file mode 100644 index 000000000..79f2e8be3 --- /dev/null +++ b/src/plugins/flexbox.js @@ -0,0 +1,117 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.flex': { + display: 'flex', + }, + '.inline-flex': { + display: 'inline-flex', + }, + '.flex-row': { + 'flex-direction': 'row', + }, + '.flex-row-reverse': { + 'flex-direction': 'row-reverse', + }, + '.flex-col': { + 'flex-direction': 'column', + }, + '.flex-col-reverse': { + 'flex-direction': 'column-reverse', + }, + '.flex-wrap': { + 'flex-wrap': 'wrap', + }, + '.flex-wrap-reverse': { + 'flex-wrap': 'wrap-reverse', + }, + '.flex-no-wrap': { + 'flex-wrap': 'nowrap', + }, + '.items-start': { + 'align-items': 'flex-start', + }, + '.items-end': { + 'align-items': 'flex-end', + }, + '.items-center': { + 'align-items': 'center', + }, + '.items-baseline': { + 'align-items': 'baseline', + }, + '.items-stretch': { + 'align-items': 'stretch', + }, + '.self-auto': { + 'align-self': 'auto', + }, + '.self-start': { + 'align-self': 'flex-start', + }, + '.self-end': { + 'align-self': 'flex-end', + }, + '.self-center': { + 'align-self': 'center', + }, + '.self-stretch': { + 'align-self': 'stretch', + }, + '.justify-start': { + 'justify-content': 'flex-start', + }, + '.justify-end': { + 'justify-content': 'flex-end', + }, + '.justify-center': { + 'justify-content': 'center', + }, + '.justify-between': { + 'justify-content': 'space-between', + }, + '.justify-around': { + 'justify-content': 'space-around', + }, + '.content-center': { + 'align-content': 'center', + }, + '.content-start': { + 'align-content': 'flex-start', + }, + '.content-end': { + 'align-content': 'flex-end', + }, + '.content-between': { + 'align-content': 'space-between', + }, + '.content-around': { + 'align-content': 'space-around', + }, + '.flex-1': { + flex: '1 1 0%', + }, + '.flex-auto': { + flex: '1 1 auto', + }, + '.flex-initial': { + flex: '0 1 auto', + }, + '.flex-none': { + flex: 'none', + }, + '.flex-grow': { + 'flex-grow': '1', + }, + '.flex-shrink': { + 'flex-shrink': '1', + }, + '.flex-no-grow': { + 'flex-grow': '0', + }, + '.flex-no-shrink': { + 'flex-shrink': '0', + }, + }, config('modules.flexbox')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 36ae068c0..1999cdd48 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -12,7 +12,6 @@ import borderStyle from './generators/borderStyle' import borderWidths from './generators/borderWidths' import cursor from './generators/cursor' import display from './generators/display' -import flexbox from './generators/flexbox' export default [ { name: 'lists', generator: lists }, @@ -29,5 +28,4 @@ export default [ { name: 'borderWidths', generator: borderWidths }, { name: 'cursor', generator: cursor }, { name: 'display', generator: display }, - { name: 'flexbox', generator: flexbox }, ] From a493ee420d5f7aa458aca8476f820bf1add771dc Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:26:12 -0500 Subject: [PATCH 35/60] Port display module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/display.js | 27 --------------------------- src/plugins/display.js | 27 +++++++++++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 29 insertions(+), 29 deletions(-) delete mode 100644 src/generators/display.js create mode 100644 src/plugins/display.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 6b179b223..509b39940 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import display from './plugins/display' import flexbox from './plugins/flexbox' import float from './plugins/float' import fonts from './plugins/fonts' @@ -37,6 +38,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.display === false ? () => {} : display(), config.modules.flexbox === false ? () => {} : flexbox(), config.modules.float === false ? () => {} : float(), config.modules.fonts === false ? () => {} : fonts(), diff --git a/src/generators/display.js b/src/generators/display.js deleted file mode 100644 index 93f04f169..000000000 --- a/src/generators/display.js +++ /dev/null @@ -1,27 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - block: { - display: 'block', - }, - 'inline-block': { - display: 'inline-block', - }, - inline: { - display: 'inline', - }, - table: { - display: 'table', - }, - 'table-row': { - display: 'table-row', - }, - 'table-cell': { - display: 'table-cell', - }, - hidden: { - display: 'none', - }, - }) -} diff --git a/src/plugins/display.js b/src/plugins/display.js new file mode 100644 index 000000000..a843f0a63 --- /dev/null +++ b/src/plugins/display.js @@ -0,0 +1,27 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.block': { + display: 'block', + }, + '.inline-block': { + display: 'inline-block', + }, + '.inline': { + display: 'inline', + }, + '.table': { + display: 'table', + }, + '.table-row': { + display: 'table-row', + }, + '.table-cell': { + display: 'table-cell', + }, + '.hidden': { + display: 'none', + }, + }, config('modules.display')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 1999cdd48..48edcb3d1 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -11,7 +11,6 @@ import borderRadius from './generators/borderRadius' import borderStyle from './generators/borderStyle' import borderWidths from './generators/borderWidths' import cursor from './generators/cursor' -import display from './generators/display' export default [ { name: 'lists', generator: lists }, @@ -27,5 +26,4 @@ export default [ { name: 'borderStyle', generator: borderStyle }, { name: 'borderWidths', generator: borderWidths }, { name: 'cursor', generator: cursor }, - { name: 'display', generator: display }, ] From e16c6e669a86f27baf24bfa80e5e58d2b136a205 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:27:15 -0500 Subject: [PATCH 36/60] Port cursor module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/cursor.js | 12 ------------ src/plugins/cursor.js | 12 ++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 14 insertions(+), 14 deletions(-) delete mode 100644 src/generators/cursor.js create mode 100644 src/plugins/cursor.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 509b39940..fc29ce7c6 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import cursor from './plugins/cursor' import display from './plugins/display' import flexbox from './plugins/flexbox' import float from './plugins/float' @@ -38,6 +39,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.cursor === false ? () => {} : cursor(), config.modules.display === false ? () => {} : display(), config.modules.flexbox === false ? () => {} : flexbox(), config.modules.float === false ? () => {} : float(), diff --git a/src/generators/cursor.js b/src/generators/cursor.js deleted file mode 100644 index b2eda2ab2..000000000 --- a/src/generators/cursor.js +++ /dev/null @@ -1,12 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'cursor-auto': { cursor: 'auto' }, - 'cursor-default': { cursor: 'default' }, - 'cursor-pointer': { cursor: 'pointer' }, - 'cursor-wait': { cursor: 'wait' }, - 'cursor-move': { cursor: 'move' }, - 'cursor-not-allowed': { cursor: 'not-allowed' }, - }) -} diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js new file mode 100644 index 000000000..35a74d16a --- /dev/null +++ b/src/plugins/cursor.js @@ -0,0 +1,12 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.cursor-auto': { cursor: 'auto' }, + '.cursor-default': { cursor: 'default' }, + '.cursor-pointer': { cursor: 'pointer' }, + '.cursor-wait': { cursor: 'wait' }, + '.cursor-move': { cursor: 'move' }, + '.cursor-not-allowed': { cursor: 'not-allowed' }, + }, config('modules.cursor')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 48edcb3d1..92756b395 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -10,7 +10,6 @@ import borderColors from './generators/borderColors' import borderRadius from './generators/borderRadius' import borderStyle from './generators/borderStyle' import borderWidths from './generators/borderWidths' -import cursor from './generators/cursor' export default [ { name: 'lists', generator: lists }, @@ -25,5 +24,4 @@ export default [ { name: 'borderRadius', generator: borderRadius }, { name: 'borderStyle', generator: borderStyle }, { name: 'borderWidths', generator: borderWidths }, - { name: 'cursor', generator: cursor }, ] From 36075fae30f224c57d06c1de2c4c05ac5ae56276 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:31:51 -0500 Subject: [PATCH 37/60] Port borderWidths module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/borderWidths.js | 38 ---------------------------------- src/plugins/borderWidths.js | 25 ++++++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 27 insertions(+), 40 deletions(-) delete mode 100644 src/generators/borderWidths.js create mode 100644 src/plugins/borderWidths.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index fc29ce7c6..540bbcde1 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import borderWidths from './plugins/borderWidths' import cursor from './plugins/cursor' import display from './plugins/display' import flexbox from './plugins/flexbox' @@ -39,6 +40,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.borderWidths === false ? () => {} : borderWidths(), config.modules.cursor === false ? () => {} : cursor(), config.modules.display === false ? () => {} : display(), config.modules.flexbox === false ? () => {} : flexbox(), diff --git a/src/generators/borderWidths.js b/src/generators/borderWidths.js deleted file mode 100644 index f02c4f7cf..000000000 --- a/src/generators/borderWidths.js +++ /dev/null @@ -1,38 +0,0 @@ -import _ from 'lodash' -import defineClasses from '../util/defineClasses' - -function defineBorderWidthUtilities(borderWidths) { - const generators = [ - (width, modifier) => - defineClasses({ - [`border${modifier}`]: { - 'border-width': `${width}`, - }, - }), - (width, modifier) => - defineClasses({ - [`border-t${modifier}`]: { - 'border-top-width': `${width}`, - }, - [`border-r${modifier}`]: { - 'border-right-width': `${width}`, - }, - [`border-b${modifier}`]: { - 'border-bottom-width': `${width}`, - }, - [`border-l${modifier}`]: { - 'border-left-width': `${width}`, - }, - }), - ] - - return _.flatMap(generators, generator => { - return _.flatMap(borderWidths, (width, modifier) => { - return generator(width, modifier === 'default' ? '' : `-${modifier}`) - }) - }) -} - -module.exports = function({ borderWidths }) { - return defineBorderWidthUtilities(borderWidths) -} diff --git a/src/plugins/borderWidths.js b/src/plugins/borderWidths.js new file mode 100644 index 000000000..58e625e1c --- /dev/null +++ b/src/plugins/borderWidths.js @@ -0,0 +1,25 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const generators = [ + (value, modifier) => ({ + [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` }, + }), + (value, modifier) => ({ + [`.${e(`border-t${modifier}`)}`]: { borderTopWidth: `${value}` }, + [`.${e(`border-r${modifier}`)}`]: { borderRightWidth: `${value}` }, + [`.${e(`border-b${modifier}`)}`]: { borderBottomWidth: `${value}` }, + [`.${e(`border-l${modifier}`)}`]: { borderLeftWidth: `${value}` }, + }), + ] + + const utilities = _.flatMap(generators, generator => { + return _.flatMap(config('borderWidths'), (value, modifier) => { + return generator(value, modifier === 'default' ? '' : `-${modifier}`) + }) + }) + + addUtilities(utilities, config('modules.borderWidths')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 92756b395..44b35466c 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -9,7 +9,6 @@ import borderCollapse from './generators/borderCollapse' import borderColors from './generators/borderColors' import borderRadius from './generators/borderRadius' import borderStyle from './generators/borderStyle' -import borderWidths from './generators/borderWidths' export default [ { name: 'lists', generator: lists }, @@ -23,5 +22,4 @@ export default [ { name: 'borderColors', generator: borderColors }, { name: 'borderRadius', generator: borderRadius }, { name: 'borderStyle', generator: borderStyle }, - { name: 'borderWidths', generator: borderWidths }, ] From d969096c297f4ed7ce01d9f7b954e0eb99d76563 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:34:04 -0500 Subject: [PATCH 38/60] Port borderStyle module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/borderStyle.js | 18 ------------------ src/plugins/borderStyle.js | 18 ++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 20 insertions(+), 20 deletions(-) delete mode 100644 src/generators/borderStyle.js create mode 100644 src/plugins/borderStyle.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 540bbcde1..6d0285e02 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import borderStyle from './plugins/borderStyle' import borderWidths from './plugins/borderWidths' import cursor from './plugins/cursor' import display from './plugins/display' @@ -40,6 +41,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.borderStyle === false ? () => {} : borderStyle(), config.modules.borderWidths === false ? () => {} : borderWidths(), config.modules.cursor === false ? () => {} : cursor(), config.modules.display === false ? () => {} : display(), diff --git a/src/generators/borderStyle.js b/src/generators/borderStyle.js deleted file mode 100644 index 3dfca388c..000000000 --- a/src/generators/borderStyle.js +++ /dev/null @@ -1,18 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'border-solid': { - 'border-style': 'solid', - }, - 'border-dashed': { - 'border-style': 'dashed', - }, - 'border-dotted': { - 'border-style': 'dotted', - }, - 'border-none': { - 'border-style': 'none', - }, - }) -} diff --git a/src/plugins/borderStyle.js b/src/plugins/borderStyle.js new file mode 100644 index 000000000..50134739c --- /dev/null +++ b/src/plugins/borderStyle.js @@ -0,0 +1,18 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.border-solid': { + 'border-style': 'solid', + }, + '.border-dashed': { + 'border-style': 'dashed', + }, + '.border-dotted': { + 'border-style': 'dotted', + }, + '.border-none': { + 'border-style': 'none', + }, + }, config('modules.borderStyle')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 44b35466c..302cba240 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -8,7 +8,6 @@ import backgroundSize from './generators/backgroundSize' import borderCollapse from './generators/borderCollapse' import borderColors from './generators/borderColors' import borderRadius from './generators/borderRadius' -import borderStyle from './generators/borderStyle' export default [ { name: 'lists', generator: lists }, @@ -21,5 +20,4 @@ export default [ { name: 'borderCollapse', generator: borderCollapse }, { name: 'borderColors', generator: borderColors }, { name: 'borderRadius', generator: borderRadius }, - { name: 'borderStyle', generator: borderStyle }, ] From 2a0b64fa1402af8096b74fb137d8065bf635e463 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:38:44 -0500 Subject: [PATCH 39/60] Port borderRadius module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/borderRadius.js | 57 ---------------------------------- src/plugins/borderRadius.js | 43 +++++++++++++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 45 insertions(+), 59 deletions(-) delete mode 100644 src/generators/borderRadius.js create mode 100644 src/plugins/borderRadius.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 6d0285e02..1869495d3 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import borderRadius from './plugins/borderRadius' import borderStyle from './plugins/borderStyle' import borderWidths from './plugins/borderWidths' import cursor from './plugins/cursor' @@ -41,6 +42,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.borderRadius === false ? () => {} : borderRadius(), config.modules.borderStyle === false ? () => {} : borderStyle(), config.modules.borderWidths === false ? () => {} : borderWidths(), config.modules.cursor === false ? () => {} : cursor(), diff --git a/src/generators/borderRadius.js b/src/generators/borderRadius.js deleted file mode 100644 index ba40d09aa..000000000 --- a/src/generators/borderRadius.js +++ /dev/null @@ -1,57 +0,0 @@ -import _ from 'lodash' -import defineClasses from '../util/defineClasses' - -function defineBorderRadiusUtilities(borderRadiuses) { - const generators = [ - (radius, modifier) => - defineClasses({ - [`rounded${modifier}`]: { - 'border-radius': `${radius}`, - }, - }), - (radius, modifier) => - defineClasses({ - [`rounded-t${modifier}`]: { - 'border-top-left-radius': `${radius}`, - 'border-top-right-radius': `${radius}`, - }, - [`rounded-r${modifier}`]: { - 'border-top-right-radius': `${radius}`, - 'border-bottom-right-radius': `${radius}`, - }, - [`rounded-b${modifier}`]: { - 'border-bottom-right-radius': `${radius}`, - 'border-bottom-left-radius': `${radius}`, - }, - [`rounded-l${modifier}`]: { - 'border-top-left-radius': `${radius}`, - 'border-bottom-left-radius': `${radius}`, - }, - }), - (radius, modifier) => - defineClasses({ - [`rounded-tl${modifier}`]: { - 'border-top-left-radius': `${radius}`, - }, - [`rounded-tr${modifier}`]: { - 'border-top-right-radius': `${radius}`, - }, - [`rounded-br${modifier}`]: { - 'border-bottom-right-radius': `${radius}`, - }, - [`rounded-bl${modifier}`]: { - 'border-bottom-left-radius': `${radius}`, - }, - }), - ] - - return _.flatMap(generators, generator => { - return _.flatMap(borderRadiuses, (radius, modifier) => { - return generator(radius, modifier === 'default' ? '' : `-${modifier}`) - }) - }) -} - -module.exports = function({ borderRadius }) { - return defineBorderRadiusUtilities(borderRadius) -} diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js new file mode 100644 index 000000000..ebee3b689 --- /dev/null +++ b/src/plugins/borderRadius.js @@ -0,0 +1,43 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const generators = [ + (value, modifier) => ({ + [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` }, + }), + (value, modifier) => ({ + [`.${e(`rounded-t${modifier}`)}`]: { + borderTopLeftRadius: `${value}`, + borderTopRightRadius: `${value}`, + }, + [`.${e(`rounded-r${modifier}`)}`]: { + borderTopRightRadius: `${value}`, + borderBottomRightRadius: `${value}`, + }, + [`.${e(`rounded-b${modifier}`)}`]: { + borderBottomRightRadius: `${value}`, + borderBottomLeftRadius: `${value}`, + }, + [`.${e(`rounded-l${modifier}`)}`]: { + borderTopLeftRadius: `${value}`, + borderBottomLeftRadius: `${value}`, + }, + }), + (value, modifier) => ({ + [`.${e(`rounded-tl${modifier}`)}`]: { borderTopLeftRadius: `${value}` }, + [`.${e(`rounded-tr${modifier}`)}`]: { borderTopRightRadius: `${value}` }, + [`.${e(`rounded-br${modifier}`)}`]: { borderBottomRightRadius: `${value}` }, + [`.${e(`rounded-bl${modifier}`)}`]: { borderBottomLeftRadius: `${value}` }, + }), + ] + + const utilities = _.flatMap(generators, generator => { + return _.flatMap(config('borderRadius'), (value, modifier) => { + return generator(value, modifier === 'default' ? '' : `-${modifier}`) + }) + }) + + addUtilities(utilities, config('modules.borderRadius')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 302cba240..89213282f 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -7,7 +7,6 @@ import backgroundRepeat from './generators/backgroundRepeat' import backgroundSize from './generators/backgroundSize' import borderCollapse from './generators/borderCollapse' import borderColors from './generators/borderColors' -import borderRadius from './generators/borderRadius' export default [ { name: 'lists', generator: lists }, @@ -19,5 +18,4 @@ export default [ { name: 'backgroundSize', generator: backgroundSize }, { name: 'borderCollapse', generator: borderCollapse }, { name: 'borderColors', generator: borderColors }, - { name: 'borderRadius', generator: borderRadius }, ] From 4715bda13487d8d47e8efbc6bc599d688e2a7fe6 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:41:31 -0500 Subject: [PATCH 40/60] Port borderColors module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/borderColors.js | 10 ---------- src/plugins/borderColors.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/borderColors.js create mode 100644 src/plugins/borderColors.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 1869495d3..a3614ab95 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import borderColors from './plugins/borderColors' import borderRadius from './plugins/borderRadius' import borderStyle from './plugins/borderStyle' import borderWidths from './plugins/borderWidths' @@ -42,6 +43,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.borderColors === false ? () => {} : borderColors(), config.modules.borderRadius === false ? () => {} : borderRadius(), config.modules.borderStyle === false ? () => {} : borderStyle(), config.modules.borderWidths === false ? () => {} : borderWidths(), diff --git a/src/generators/borderColors.js b/src/generators/borderColors.js deleted file mode 100644 index 7ea0f0ab2..000000000 --- a/src/generators/borderColors.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ borderColors }) { - return _.map(_.omit(borderColors, 'default'), (color, className) => { - return defineClass(`border-${className}`, { - 'border-color': color, - }) - }) -} diff --git a/src/plugins/borderColors.js b/src/plugins/borderColors.js new file mode 100644 index 000000000..5157b7c95 --- /dev/null +++ b/src/plugins/borderColors.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(_.omit(config('borderColors'), 'default'), (value, modifier) => { + return [`.${e(`border-${modifier}`)}`, { + 'border-color': value, + }] + })) + + addUtilities(utilities, config('modules.borderColors')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 89213282f..287a8d4a7 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -6,7 +6,6 @@ import backgroundPosition from './generators/backgroundPosition' import backgroundRepeat from './generators/backgroundRepeat' import backgroundSize from './generators/backgroundSize' import borderCollapse from './generators/borderCollapse' -import borderColors from './generators/borderColors' export default [ { name: 'lists', generator: lists }, @@ -17,5 +16,4 @@ export default [ { name: 'backgroundRepeat', generator: backgroundRepeat }, { name: 'backgroundSize', generator: backgroundSize }, { name: 'borderCollapse', generator: borderCollapse }, - { name: 'borderColors', generator: borderColors }, ] From 96439a33e6697a0f5858f6841a387e69a83d70f3 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:44:43 -0500 Subject: [PATCH 41/60] Port borderCollapse module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/borderCollapse.js | 8 -------- src/plugins/borderCollapse.js | 8 ++++++++ src/plugins/cursor.js | 12 ++++++------ src/utilityModules.js | 2 -- 5 files changed, 16 insertions(+), 16 deletions(-) delete mode 100644 src/generators/borderCollapse.js create mode 100644 src/plugins/borderCollapse.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index a3614ab95..31ef0d330 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import borderCollapse from './plugins/borderCollapse' import borderColors from './plugins/borderColors' import borderRadius from './plugins/borderRadius' import borderStyle from './plugins/borderStyle' @@ -43,6 +44,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.borderCollapse === false ? () => {} : borderCollapse(), config.modules.borderColors === false ? () => {} : borderColors(), config.modules.borderRadius === false ? () => {} : borderRadius(), config.modules.borderStyle === false ? () => {} : borderStyle(), diff --git a/src/generators/borderCollapse.js b/src/generators/borderCollapse.js deleted file mode 100644 index 321c89742..000000000 --- a/src/generators/borderCollapse.js +++ /dev/null @@ -1,8 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'border-collapse': { 'border-collapse': 'collapse' }, - 'border-separate': { 'border-collapse': 'separate' }, - }) -} diff --git a/src/plugins/borderCollapse.js b/src/plugins/borderCollapse.js new file mode 100644 index 000000000..a50c7170a --- /dev/null +++ b/src/plugins/borderCollapse.js @@ -0,0 +1,8 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.border-collapse': { 'border-collapse': 'collapse' }, + '.border-separate': { 'border-collapse': 'separate' }, + }, config('modules.borderCollapse')) + } +} diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js index 35a74d16a..bd5026ee1 100644 --- a/src/plugins/cursor.js +++ b/src/plugins/cursor.js @@ -1,12 +1,12 @@ export default function () { return function ({ addUtilities, config }) { addUtilities({ - '.cursor-auto': { cursor: 'auto' }, - '.cursor-default': { cursor: 'default' }, - '.cursor-pointer': { cursor: 'pointer' }, - '.cursor-wait': { cursor: 'wait' }, - '.cursor-move': { cursor: 'move' }, - '.cursor-not-allowed': { cursor: 'not-allowed' }, + '.cursor-auto': { cursor: 'auto' }, + '.cursor-default': { cursor: 'default' }, + '.cursor-pointer': { cursor: 'pointer' }, + '.cursor-wait': { cursor: 'wait' }, + '.cursor-move': { cursor: 'move' }, + '.cursor-not-allowed': { cursor: 'not-allowed' }, }, config('modules.cursor')) } } diff --git a/src/utilityModules.js b/src/utilityModules.js index 287a8d4a7..57635b65d 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -5,7 +5,6 @@ import backgroundColors from './generators/backgroundColors' import backgroundPosition from './generators/backgroundPosition' import backgroundRepeat from './generators/backgroundRepeat' import backgroundSize from './generators/backgroundSize' -import borderCollapse from './generators/borderCollapse' export default [ { name: 'lists', generator: lists }, @@ -15,5 +14,4 @@ export default [ { name: 'backgroundPosition', generator: backgroundPosition }, { name: 'backgroundRepeat', generator: backgroundRepeat }, { name: 'backgroundSize', generator: backgroundSize }, - { name: 'borderCollapse', generator: borderCollapse }, ] From 5a372877a6be4ddade65906b01df4540672fbe16 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:46:11 -0500 Subject: [PATCH 42/60] Port backgroundSize module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/backgroundSize.js | 10 ---------- src/plugins/backgroundSize.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/backgroundSize.js create mode 100644 src/plugins/backgroundSize.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 31ef0d330..66e8d0f8a 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import backgroundSize from './plugins/backgroundSize' import borderCollapse from './plugins/borderCollapse' import borderColors from './plugins/borderColors' import borderRadius from './plugins/borderRadius' @@ -44,6 +45,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.backgroundSize === false ? () => {} : backgroundSize(), config.modules.borderCollapse === false ? () => {} : borderCollapse(), config.modules.borderColors === false ? () => {} : borderColors(), config.modules.borderRadius === false ? () => {} : borderRadius(), diff --git a/src/generators/backgroundSize.js b/src/generators/backgroundSize.js deleted file mode 100644 index 607401a32..000000000 --- a/src/generators/backgroundSize.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ backgroundSize }) { - return _.map(backgroundSize, (size, className) => { - return defineClass(`bg-${className}`, { - 'background-size': size, - }) - }) -} diff --git a/src/plugins/backgroundSize.js b/src/plugins/backgroundSize.js new file mode 100644 index 000000000..6472dccdd --- /dev/null +++ b/src/plugins/backgroundSize.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('backgroundSize'), (value, modifier) => { + return [`.${e(`bg-${modifier}`)}`, { + 'background-size': value, + }] + })) + + addUtilities(utilities, config('modules.opacity')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 57635b65d..255d5a8c6 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -4,7 +4,6 @@ import backgroundAttachment from './generators/backgroundAttachment' import backgroundColors from './generators/backgroundColors' import backgroundPosition from './generators/backgroundPosition' import backgroundRepeat from './generators/backgroundRepeat' -import backgroundSize from './generators/backgroundSize' export default [ { name: 'lists', generator: lists }, @@ -13,5 +12,4 @@ export default [ { name: 'backgroundColors', generator: backgroundColors }, { name: 'backgroundPosition', generator: backgroundPosition }, { name: 'backgroundRepeat', generator: backgroundRepeat }, - { name: 'backgroundSize', generator: backgroundSize }, ] From 6112b3e34556220388cb525aef4fbc15335f0141 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:47:13 -0500 Subject: [PATCH 43/60] Port backgroundRepeat module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/backgroundRepeat.js | 10 ---------- src/plugins/backgroundRepeat.js | 10 ++++++++++ src/utilityModules.js | 2 -- 4 files changed, 12 insertions(+), 12 deletions(-) delete mode 100644 src/generators/backgroundRepeat.js create mode 100644 src/plugins/backgroundRepeat.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 66e8d0f8a..38f75e054 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import backgroundRepeat from './plugins/backgroundRepeat' import backgroundSize from './plugins/backgroundSize' import borderCollapse from './plugins/borderCollapse' import borderColors from './plugins/borderColors' @@ -45,6 +46,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.backgroundRepeat === false ? () => {} : backgroundRepeat(), config.modules.backgroundSize === false ? () => {} : backgroundSize(), config.modules.borderCollapse === false ? () => {} : borderCollapse(), config.modules.borderColors === false ? () => {} : borderColors(), diff --git a/src/generators/backgroundRepeat.js b/src/generators/backgroundRepeat.js deleted file mode 100644 index fe3147d7f..000000000 --- a/src/generators/backgroundRepeat.js +++ /dev/null @@ -1,10 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'bg-repeat': { 'background-repeat': 'repeat' }, - 'bg-no-repeat': { 'background-repeat': 'no-repeat' }, - 'bg-repeat-x': { 'background-repeat': 'repeat-x' }, - 'bg-repeat-y': { 'background-repeat': 'repeat-y' }, - }) -} diff --git a/src/plugins/backgroundRepeat.js b/src/plugins/backgroundRepeat.js new file mode 100644 index 000000000..a73f74262 --- /dev/null +++ b/src/plugins/backgroundRepeat.js @@ -0,0 +1,10 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.bg-repeat': { 'background-repeat': 'repeat' }, + '.bg-no-repeat': { 'background-repeat': 'no-repeat' }, + '.bg-repeat-x': { 'background-repeat': 'repeat-x' }, + '.bg-repeat-y': { 'background-repeat': 'repeat-y' }, + }, config('modules.backgroundRepeat')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 255d5a8c6..b37f69aa7 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -3,7 +3,6 @@ import appearance from './generators/appearance' import backgroundAttachment from './generators/backgroundAttachment' import backgroundColors from './generators/backgroundColors' import backgroundPosition from './generators/backgroundPosition' -import backgroundRepeat from './generators/backgroundRepeat' export default [ { name: 'lists', generator: lists }, @@ -11,5 +10,4 @@ export default [ { name: 'backgroundAttachment', generator: backgroundAttachment }, { name: 'backgroundColors', generator: backgroundColors }, { name: 'backgroundPosition', generator: backgroundPosition }, - { name: 'backgroundRepeat', generator: backgroundRepeat }, ] From 0cd679b4ff9751965c536b560aef43ecf7c40b0b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:48:27 -0500 Subject: [PATCH 44/60] Port backgroundPosition module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/backgroundPosition.js | 15 --------------- src/plugins/backgroundPosition.js | 15 +++++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 17 insertions(+), 17 deletions(-) delete mode 100644 src/generators/backgroundPosition.js create mode 100644 src/plugins/backgroundPosition.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 38f75e054..e4a37dc85 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import backgroundPosition from './plugins/backgroundPosition' import backgroundRepeat from './plugins/backgroundRepeat' import backgroundSize from './plugins/backgroundSize' import borderCollapse from './plugins/borderCollapse' @@ -46,6 +47,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.backgroundPosition === false ? () => {} : backgroundPosition(), config.modules.backgroundRepeat === false ? () => {} : backgroundRepeat(), config.modules.backgroundSize === false ? () => {} : backgroundSize(), config.modules.borderCollapse === false ? () => {} : borderCollapse(), diff --git a/src/generators/backgroundPosition.js b/src/generators/backgroundPosition.js deleted file mode 100644 index 1a1f9b93a..000000000 --- a/src/generators/backgroundPosition.js +++ /dev/null @@ -1,15 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'bg-bottom': { 'background-position': 'bottom' }, - 'bg-center': { 'background-position': 'center' }, - 'bg-left': { 'background-position': 'left' }, - 'bg-left-bottom': { 'background-position': 'left bottom' }, - 'bg-left-top': { 'background-position': 'left top' }, - 'bg-right': { 'background-position': 'right' }, - 'bg-right-bottom': { 'background-position': 'right bottom' }, - 'bg-right-top': { 'background-position': 'right top' }, - 'bg-top': { 'background-position': 'top' }, - }) -} diff --git a/src/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js new file mode 100644 index 000000000..517c160dd --- /dev/null +++ b/src/plugins/backgroundPosition.js @@ -0,0 +1,15 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.bg-bottom': { 'background-position': 'bottom' }, + '.bg-center': { 'background-position': 'center' }, + '.bg-left': { 'background-position': 'left' }, + '.bg-left-bottom': { 'background-position': 'left bottom' }, + '.bg-left-top': { 'background-position': 'left top' }, + '.bg-right': { 'background-position': 'right' }, + '.bg-right-bottom': { 'background-position': 'right bottom' }, + '.bg-right-top': { 'background-position': 'right top' }, + '.bg-top': { 'background-position': 'top' }, + }, config('modules.backgroundPosition')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index b37f69aa7..d9ff1ae75 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -2,12 +2,10 @@ import lists from './generators/lists' import appearance from './generators/appearance' import backgroundAttachment from './generators/backgroundAttachment' import backgroundColors from './generators/backgroundColors' -import backgroundPosition from './generators/backgroundPosition' export default [ { name: 'lists', generator: lists }, { name: 'appearance', generator: appearance }, { name: 'backgroundAttachment', generator: backgroundAttachment }, { name: 'backgroundColors', generator: backgroundColors }, - { name: 'backgroundPosition', generator: backgroundPosition }, ] From c39ed44c13403c59ac8a2548c29ed3787ec830fb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:50:03 -0500 Subject: [PATCH 45/60] Port backgroundColors module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/backgroundColors.js | 10 ---------- src/plugins/backgroundColors.js | 13 +++++++++++++ src/utilityModules.js | 2 -- 4 files changed, 15 insertions(+), 12 deletions(-) delete mode 100644 src/generators/backgroundColors.js create mode 100644 src/plugins/backgroundColors.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index e4a37dc85..d7b6333d7 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import backgroundColors from './plugins/backgroundColors' import backgroundPosition from './plugins/backgroundPosition' import backgroundRepeat from './plugins/backgroundRepeat' import backgroundSize from './plugins/backgroundSize' @@ -47,6 +48,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.backgroundColors === false ? () => {} : backgroundColors(), config.modules.backgroundPosition === false ? () => {} : backgroundPosition(), config.modules.backgroundRepeat === false ? () => {} : backgroundRepeat(), config.modules.backgroundSize === false ? () => {} : backgroundSize(), diff --git a/src/generators/backgroundColors.js b/src/generators/backgroundColors.js deleted file mode 100644 index 955a072be..000000000 --- a/src/generators/backgroundColors.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ backgroundColors }) { - return _.map(backgroundColors, (color, className) => { - return defineClass(`bg-${className}`, { - 'background-color': color, - }) - }) -} diff --git a/src/plugins/backgroundColors.js b/src/plugins/backgroundColors.js new file mode 100644 index 000000000..767213c92 --- /dev/null +++ b/src/plugins/backgroundColors.js @@ -0,0 +1,13 @@ +import _ from 'lodash' + +export default function () { + return function ({ addUtilities, config, e }) { + const utilities = _.fromPairs(_.map(config('backgroundColors'), (value, modifier) => { + return [`.${e(`bg-${modifier}`)}`, { + 'background-color': value, + }] + })) + + addUtilities(utilities, config('modules.backgroundColors')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index d9ff1ae75..880f4a904 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -1,11 +1,9 @@ import lists from './generators/lists' import appearance from './generators/appearance' import backgroundAttachment from './generators/backgroundAttachment' -import backgroundColors from './generators/backgroundColors' export default [ { name: 'lists', generator: lists }, { name: 'appearance', generator: appearance }, { name: 'backgroundAttachment', generator: backgroundAttachment }, - { name: 'backgroundColors', generator: backgroundColors }, ] From a6e96c8919a4a7bf3f860e77ef3d030a4cb2f578 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:51:25 -0500 Subject: [PATCH 46/60] Port backgroundAttachment module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/backgroundAttachment.js | 9 --------- src/plugins/backgroundAttachment.js | 9 +++++++++ src/utilityModules.js | 2 -- 4 files changed, 11 insertions(+), 11 deletions(-) delete mode 100644 src/generators/backgroundAttachment.js create mode 100644 src/plugins/backgroundAttachment.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index d7b6333d7..97da2fe3c 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import backgroundAttachment from './plugins/backgroundAttachment' import backgroundColors from './plugins/backgroundColors' import backgroundPosition from './plugins/backgroundPosition' import backgroundRepeat from './plugins/backgroundRepeat' @@ -48,6 +49,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.backgroundAttachment === false ? () => {} : backgroundAttachment(), config.modules.backgroundColors === false ? () => {} : backgroundColors(), config.modules.backgroundPosition === false ? () => {} : backgroundPosition(), config.modules.backgroundRepeat === false ? () => {} : backgroundRepeat(), diff --git a/src/generators/backgroundAttachment.js b/src/generators/backgroundAttachment.js deleted file mode 100644 index 04e77c459..000000000 --- a/src/generators/backgroundAttachment.js +++ /dev/null @@ -1,9 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'bg-fixed': { 'background-attachment': 'fixed' }, - 'bg-local': { 'background-attachment': 'local' }, - 'bg-scroll': { 'background-attachment': 'scroll' }, - }) -} diff --git a/src/plugins/backgroundAttachment.js b/src/plugins/backgroundAttachment.js new file mode 100644 index 000000000..67f51f1ec --- /dev/null +++ b/src/plugins/backgroundAttachment.js @@ -0,0 +1,9 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.bg-fixed': { 'background-attachment': 'fixed' }, + '.bg-local': { 'background-attachment': 'local' }, + '.bg-scroll': { 'background-attachment': 'scroll' }, + }, config('modules.backgroundAttachment')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 880f4a904..c4bfdfa61 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -1,9 +1,7 @@ import lists from './generators/lists' import appearance from './generators/appearance' -import backgroundAttachment from './generators/backgroundAttachment' export default [ { name: 'lists', generator: lists }, { name: 'appearance', generator: appearance }, - { name: 'backgroundAttachment', generator: backgroundAttachment }, ] From a0de7e096309dffad60b9590712eafeadac194df Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:52:22 -0500 Subject: [PATCH 47/60] Port appearance module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/appearance.js | 7 ------- src/plugins/appearance.js | 7 +++++++ src/utilityModules.js | 2 -- 4 files changed, 9 insertions(+), 9 deletions(-) delete mode 100644 src/generators/appearance.js create mode 100644 src/plugins/appearance.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 97da2fe3c..1a629b805 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' import backgroundColors from './plugins/backgroundColors' import backgroundPosition from './plugins/backgroundPosition' @@ -49,6 +50,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.appearance === false ? () => {} : appearance(), config.modules.backgroundAttachment === false ? () => {} : backgroundAttachment(), config.modules.backgroundColors === false ? () => {} : backgroundColors(), config.modules.backgroundPosition === false ? () => {} : backgroundPosition(), diff --git a/src/generators/appearance.js b/src/generators/appearance.js deleted file mode 100644 index b97b7f1e2..000000000 --- a/src/generators/appearance.js +++ /dev/null @@ -1,7 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'appearance-none': { appearance: 'none' }, - }) -} diff --git a/src/plugins/appearance.js b/src/plugins/appearance.js new file mode 100644 index 000000000..e2039eff9 --- /dev/null +++ b/src/plugins/appearance.js @@ -0,0 +1,7 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.appearance-none': { appearance: 'none' }, + }, config('modules.appearance')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index c4bfdfa61..3e98e3493 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -1,7 +1,5 @@ import lists from './generators/lists' -import appearance from './generators/appearance' export default [ { name: 'lists', generator: lists }, - { name: 'appearance', generator: appearance }, ] From 0d333f22418dc1acd07d9b7581e715e64add833b Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Wed, 9 Jan 2019 21:54:47 -0500 Subject: [PATCH 48/60] Port lists module to plugin --- src/defaultPlugins.js | 2 ++ src/generators/lists.js | 10 ---------- src/plugins/lists.js | 10 ++++++++++ src/utilityModules.js | 3 --- 4 files changed, 12 insertions(+), 13 deletions(-) delete mode 100644 src/generators/lists.js create mode 100644 src/plugins/lists.js diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 1a629b805..aebadcb8a 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -1,3 +1,4 @@ +import lists from './plugins/lists' import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' import backgroundColors from './plugins/backgroundColors' @@ -50,6 +51,7 @@ import zIndex from './plugins/zIndex' export default function (config) { return [ + config.modules.lists === false ? () => {} : lists(), config.modules.appearance === false ? () => {} : appearance(), config.modules.backgroundAttachment === false ? () => {} : backgroundAttachment(), config.modules.backgroundColors === false ? () => {} : backgroundColors(), diff --git a/src/generators/lists.js b/src/generators/lists.js deleted file mode 100644 index bda288913..000000000 --- a/src/generators/lists.js +++ /dev/null @@ -1,10 +0,0 @@ -import defineClasses from '../util/defineClasses' - -export default function() { - return defineClasses({ - 'list-reset': { - 'list-style': 'none', - padding: '0', - }, - }) -} diff --git a/src/plugins/lists.js b/src/plugins/lists.js new file mode 100644 index 000000000..be5188528 --- /dev/null +++ b/src/plugins/lists.js @@ -0,0 +1,10 @@ +export default function () { + return function ({ addUtilities, config }) { + addUtilities({ + '.list-reset': { + 'list-style': 'none', + padding: '0', + }, + }, config('modules.lists')) + } +} diff --git a/src/utilityModules.js b/src/utilityModules.js index 3e98e3493..344b6da17 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -1,5 +1,2 @@ -import lists from './generators/lists' - export default [ - { name: 'lists', generator: lists }, ] From eeb42cd6bb9eb2a6e812e805aba4b27258395f51 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 11 Jan 2019 12:10:26 -0500 Subject: [PATCH 49/60] Provide our own rawCache to avoid performance issues --- src/processTailwindFeatures.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index 189df0bdb..a3e6f7fe4 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -29,6 +29,22 @@ export default function(getConfig) { substituteResponsiveAtRules(config), substituteScreenAtRules(config), substituteClassApplyAtRules(config, utilities), + function (root, result) { + root.rawCache = { + colon: ': ', + indent: ' ', + beforeDecl: '\n', + beforeRule: '\n', + beforeOpen: ' ', + beforeClose: '\n', + beforeComment: '\n', + after: '\n', + emptyBody: '', + commentLeft: ' ', + commentRight: ' ', + semicolon: false + } + }, ]).process(css, { from: _.get(css, 'source.input.file') }) } } From 5ade923fa416d2695a353558449555d3b74d34d0 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 11 Jan 2019 12:29:33 -0500 Subject: [PATCH 50/60] Fix tests and lint warnings --- __tests__/applyAtRule.test.js | 31 +- __tests__/containerPlugin.test.js | 105 +++-- __tests__/processPlugins.test.js | 612 ++++++++++++++-------------- __tests__/variantsAtRule.test.js | 4 +- src/defaultPlugins.js | 3 +- src/plugins/appearance.js | 13 +- src/plugins/backgroundAttachment.js | 17 +- src/plugins/backgroundColors.js | 19 +- src/plugins/backgroundPosition.js | 29 +- src/plugins/backgroundRepeat.js | 19 +- src/plugins/backgroundSize.js | 19 +- src/plugins/borderCollapse.js | 15 +- src/plugins/borderColors.js | 19 +- src/plugins/borderRadius.js | 4 +- src/plugins/borderStyle.js | 33 +- src/plugins/borderWidths.js | 4 +- src/plugins/cursor.js | 23 +- src/plugins/display.js | 51 +-- src/plugins/flexbox.js | 231 +++++------ src/plugins/float.js | 27 +- src/plugins/fontWeights.js | 19 +- src/plugins/fonts.js | 19 +- src/plugins/height.js | 19 +- src/plugins/leading.js | 19 +- src/plugins/lists.js | 17 +- src/plugins/margin.js | 4 +- src/plugins/maxHeight.js | 19 +- src/plugins/maxWidth.js | 19 +- src/plugins/minHeight.js | 19 +- src/plugins/minWidth.js | 19 +- src/plugins/negativeMargin.js | 4 +- src/plugins/objectFit.js | 21 +- src/plugins/objectPosition.js | 29 +- src/plugins/opacity.js | 19 +- src/plugins/outline.js | 13 +- src/plugins/overflow.js | 39 +- src/plugins/padding.js | 4 +- src/plugins/pointerEvents.js | 15 +- src/plugins/position.js | 55 +-- src/plugins/resize.js | 19 +- src/plugins/shadows.js | 21 +- src/plugins/svgFill.js | 19 +- src/plugins/svgStroke.js | 19 +- src/plugins/tableLayout.js | 15 +- src/plugins/textAlign.js | 19 +- src/plugins/textColors.js | 19 +- src/plugins/textSizes.js | 19 +- src/plugins/textStyle.js | 43 +- src/plugins/tracking.js | 19 +- src/plugins/userSelect.js | 15 +- src/plugins/verticalAlign.js | 23 +- src/plugins/visibility.js | 15 +- src/plugins/whitespace.js | 33 +- src/plugins/width.js | 19 +- src/plugins/zIndex.js | 19 +- src/processTailwindFeatures.js | 16 +- src/utilityModules.js | 3 +- 57 files changed, 1090 insertions(+), 915 deletions(-) diff --git a/__tests__/applyAtRule.test.js b/__tests__/applyAtRule.test.js index a6f149457..410317402 100644 --- a/__tests__/applyAtRule.test.js +++ b/__tests__/applyAtRule.test.js @@ -1,12 +1,15 @@ import postcss from 'postcss' -import plugin from '../src/lib/substituteClassApplyAtRules' -import generateUtilities from '../src/legacy/generateUtilities' +import substituteClassApplyAtRules from '../src/lib/substituteClassApplyAtRules' +import processPlugins from '../src/util/processPlugins' +import defaultPlugins from '../src/defaultPlugins' import defaultConfig from '../defaultConfig.stub.js' -const defaultUtilities = generateUtilities(defaultConfig, []) +const { utilities: defaultUtilities } = processPlugins(defaultPlugins(defaultConfig), defaultConfig) function run(input, config = defaultConfig, utilities = defaultUtilities) { - return postcss([plugin(config, utilities)]).process(input, { from: undefined }) + return postcss([substituteClassApplyAtRules(config, utilities)]).process(input, { + from: undefined, + }) } test("it copies a class's declarations into itself", () => { @@ -206,10 +209,12 @@ test('you can apply utility classes without using the given prefix', () => { experiments: { shadowLookup: true }, } - return run(input, config, generateUtilities(config, [])).then(result => { - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) - }) + return run(input, config, processPlugins(defaultPlugins(defaultConfig), config).utilities).then( + result => { + expect(result.css).toEqual(expected) + expect(result.warnings().length).toBe(0) + } + ) }) test('you can apply utility classes without using the given prefix when using a function for the prefix', () => { @@ -232,8 +237,10 @@ test('you can apply utility classes without using the given prefix when using a experiments: { shadowLookup: true }, } - return run(input, config, generateUtilities(config, [])).then(result => { - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) - }) + return run(input, config, processPlugins(defaultPlugins(defaultConfig), config).utilities).then( + result => { + expect(result.css).toEqual(expected) + expect(result.warnings().length).toBe(0) + } + ) }) diff --git a/__tests__/containerPlugin.test.js b/__tests__/containerPlugin.test.js index 74d4ff763..9b0612e83 100644 --- a/__tests__/containerPlugin.test.js +++ b/__tests__/containerPlugin.test.js @@ -16,31 +16,13 @@ function config(overrides) { xl: '1200px', }, options: { - prefix: "", + prefix: '', important: false, - separator: ":" - } + separator: ':', + }, }) } -function processPluginsWithValidConfig(config) { - return processPlugins( - _.defaultsDeep(config, { - screens: { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px', - }, - options: { - prefix: '', - important: false, - separator: ':', - }, - }) - ) -} - test.only('options are not required', () => { const { components } = processPlugins([container()], config()) @@ -62,14 +44,17 @@ test.only('options are not required', () => { }) test.only('screens can be specified explicitly', () => { - const { components } = processPlugins([ - container({ - screens: { - sm: '400px', - lg: '500px', - }, - }), - ], config()) + const { components } = processPlugins( + [ + container({ + screens: { + sm: '400px', + lg: '500px', + }, + }), + ], + config() + ) expect(css(components)).toMatchCss(` .container { width: 100% } @@ -83,11 +68,14 @@ test.only('screens can be specified explicitly', () => { }) test.only('screens can be an array', () => { - const { components } = processPlugins([ - container({ - screens: ['400px', '500px'], - }), - ], config()) + const { components } = processPlugins( + [ + container({ + screens: ['400px', '500px'], + }), + ], + config() + ) expect(css(components)).toMatchCss(` .container { width: 100% } @@ -101,11 +89,14 @@ test.only('screens can be an array', () => { }) test.only('the container can be centered by default', () => { - const { components } = processPlugins([ - container({ - center: true, - }), - ], config()) + const { components } = processPlugins( + [ + container({ + center: true, + }), + ], + config() + ) expect(css(components)).toMatchCss(` .container { @@ -129,11 +120,14 @@ test.only('the container can be centered by default', () => { }) test.only('horizontal padding can be included by default', () => { - const { components } = processPlugins([ - container({ - padding: '2rem', - }), - ], config()) + const { components } = processPlugins( + [ + container({ + padding: '2rem', + }), + ], + config() + ) expect(css(components)).toMatchCss(` .container { @@ -157,16 +151,19 @@ test.only('horizontal padding can be included by default', () => { }) test.only('setting all options at once', () => { - const { components } = processPlugins([ - container({ - screens: { - sm: '400px', - lg: '500px', - }, - center: true, - padding: '2rem', - }), - ], config()) + const { components } = processPlugins( + [ + container({ + screens: { + sm: '400px', + lg: '500px', + }, + center: true, + padding: '2rem', + }), + ], + config() + ) expect(css(components)).toMatchCss(` .container { diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index 300d8ccc8..84b90950e 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -1,39 +1,39 @@ -import _ from "lodash" -import postcss from "postcss" -import processPlugins from "../src/util/processPlugins" +import _ from 'lodash' +import postcss from 'postcss' +import processPlugins from '../src/util/processPlugins' function css(nodes) { return postcss.root({ nodes }).toString() } -function config(overrides) { +function makeConfig(overrides) { return _.defaultsDeep(overrides, { options: { - prefix: "", + prefix: '', important: false, - separator: ":" - } + separator: ':', + }, }) } -test("plugins can create utilities with object syntax", () => { +test('plugins can create utilities with object syntax', () => { const { components, utilities } = processPlugins( [ function({ addUtilities }) { addUtilities({ - ".object-fill": { - "object-fit": "fill" + '.object-fill': { + 'object-fit': 'fill', }, - ".object-contain": { - "object-fit": "contain" + '.object-contain': { + 'object-fit': 'contain', + }, + '.object-cover': { + 'object-fit': 'cover', }, - ".object-cover": { - "object-fit": "cover" - } }) - } + }, ], - config() + makeConfig() ) expect(components.length).toBe(0) @@ -52,30 +52,30 @@ test("plugins can create utilities with object syntax", () => { `) }) -test("plugins can create utilities with arrays of objects", () => { +test('plugins can create utilities with arrays of objects', () => { const { components, utilities } = processPlugins( [ function({ addUtilities }) { addUtilities([ { - ".object-fill": { - "object-fit": "fill" - } + '.object-fill': { + 'object-fit': 'fill', + }, }, { - ".object-contain": { - "object-fit": "contain" - } + '.object-contain': { + 'object-fit': 'contain', + }, }, { - ".object-cover": { - "object-fit": "cover" - } - } + '.object-cover': { + 'object-fit': 'cover', + }, + }, ]) - } + }, ], - config() + makeConfig() ) expect(components.length).toBe(0) @@ -94,33 +94,33 @@ test("plugins can create utilities with arrays of objects", () => { `) }) -test("plugins can create utilities with raw PostCSS nodes", () => { +test('plugins can create utilities with raw PostCSS nodes', () => { const { components, utilities } = processPlugins( [ function({ addUtilities }) { addUtilities([ - postcss.rule({ selector: ".object-fill" }).append([ + postcss.rule({ selector: '.object-fill' }).append([ postcss.decl({ - prop: "object-fit", - value: "fill" - }) + prop: 'object-fit', + value: 'fill', + }), ]), - postcss.rule({ selector: ".object-contain" }).append([ + postcss.rule({ selector: '.object-contain' }).append([ postcss.decl({ - prop: "object-fit", - value: "contain" - }) + prop: 'object-fit', + value: 'contain', + }), ]), - postcss.rule({ selector: ".object-cover" }).append([ + postcss.rule({ selector: '.object-cover' }).append([ postcss.decl({ - prop: "object-fit", - value: "cover" - }) - ]) + prop: 'object-fit', + value: 'cover', + }), + ]), ]) - } + }, ], - config() + makeConfig() ) expect(components.length).toBe(0) @@ -139,32 +139,32 @@ test("plugins can create utilities with raw PostCSS nodes", () => { `) }) -test("plugins can create utilities with mixed object styles and PostCSS nodes", () => { +test('plugins can create utilities with mixed object styles and PostCSS nodes', () => { const { components, utilities } = processPlugins( [ function({ addUtilities }) { addUtilities([ { - ".object-fill": { - objectFit: "fill" - } + '.object-fill': { + objectFit: 'fill', + }, }, - postcss.rule({ selector: ".object-contain" }).append([ + postcss.rule({ selector: '.object-contain' }).append([ postcss.decl({ - prop: "object-fit", - value: "contain" - }) + prop: 'object-fit', + value: 'contain', + }), ]), - postcss.rule({ selector: ".object-cover" }).append([ + postcss.rule({ selector: '.object-cover' }).append([ postcss.decl({ - prop: "object-fit", - value: "cover" - }) - ]) + prop: 'object-fit', + value: 'cover', + }), + ]), ]) - } + }, ], - config() + makeConfig() ) expect(components.length).toBe(0) @@ -183,27 +183,27 @@ test("plugins can create utilities with mixed object styles and PostCSS nodes", `) }) -test("plugins can create utilities with variants", () => { +test('plugins can create utilities with variants', () => { const { components, utilities } = processPlugins( [ function({ addUtilities }) { addUtilities( { - ".object-fill": { - "object-fit": "fill" + '.object-fill': { + 'object-fit': 'fill', }, - ".object-contain": { - "object-fit": "contain" + '.object-contain': { + 'object-fit': 'contain', + }, + '.object-cover': { + 'object-fit': 'cover', }, - ".object-cover": { - "object-fit": "cover" - } }, - ["responsive", "hover", "group-hover", "focus"] + ['responsive', 'hover', 'group-hover', 'focus'] ) - } + }, ], - config() + makeConfig() ) expect(components.length).toBe(0) @@ -222,24 +222,24 @@ test("plugins can create utilities with variants", () => { `) }) -test("plugins can create components with object syntax", () => { +test('plugins can create components with object syntax', () => { const { components, utilities } = processPlugins( [ function({ addComponents }) { addComponents({ - ".btn-blue": { - backgroundColor: "blue", - color: "white", - padding: ".5rem 1rem", - borderRadius: ".25rem" + '.btn-blue': { + backgroundColor: 'blue', + color: 'white', + padding: '.5rem 1rem', + borderRadius: '.25rem', + }, + '.btn-blue:hover': { + backgroundColor: 'darkblue', }, - ".btn-blue:hover": { - backgroundColor: "darkblue" - } }) - } + }, ], - config() + makeConfig() ) expect(utilities.length).toBe(0) @@ -256,39 +256,39 @@ test("plugins can create components with object syntax", () => { `) }) -test("plugins can create components with raw PostCSS nodes", () => { +test('plugins can create components with raw PostCSS nodes', () => { const { components, utilities } = processPlugins( [ function({ addComponents }) { addComponents([ - postcss.rule({ selector: ".btn-blue" }).append([ + postcss.rule({ selector: '.btn-blue' }).append([ postcss.decl({ - prop: "background-color", - value: "blue" + prop: 'background-color', + value: 'blue', }), postcss.decl({ - prop: "color", - value: "white" + prop: 'color', + value: 'white', }), postcss.decl({ - prop: "padding", - value: ".5rem 1rem" + prop: 'padding', + value: '.5rem 1rem', }), postcss.decl({ - prop: "border-radius", - value: ".25rem" - }) + prop: 'border-radius', + value: '.25rem', + }), ]), - postcss.rule({ selector: ".btn-blue:hover" }).append([ + postcss.rule({ selector: '.btn-blue:hover' }).append([ postcss.decl({ - prop: "background-color", - value: "darkblue" - }) - ]) + prop: 'background-color', + value: 'darkblue', + }), + ]), ]) - } + }, ], - config() + makeConfig() ) expect(utilities.length).toBe(0) @@ -305,38 +305,38 @@ test("plugins can create components with raw PostCSS nodes", () => { `) }) -test("plugins can create components with mixed object styles and raw PostCSS nodes", () => { +test('plugins can create components with mixed object styles and raw PostCSS nodes', () => { const { components, utilities } = processPlugins( [ function({ addComponents }) { addComponents([ - postcss.rule({ selector: ".btn-blue" }).append([ + postcss.rule({ selector: '.btn-blue' }).append([ postcss.decl({ - prop: "background-color", - value: "blue" + prop: 'background-color', + value: 'blue', }), postcss.decl({ - prop: "color", - value: "white" + prop: 'color', + value: 'white', }), postcss.decl({ - prop: "padding", - value: ".5rem 1rem" + prop: 'padding', + value: '.5rem 1rem', }), postcss.decl({ - prop: "border-radius", - value: ".25rem" - }) + prop: 'border-radius', + value: '.25rem', + }), ]), { - ".btn-blue:hover": { - backgroundColor: "darkblue" - } - } + '.btn-blue:hover': { + backgroundColor: 'darkblue', + }, + }, ]) - } + }, ], - config() + makeConfig() ) expect(utilities.length).toBe(0) @@ -353,33 +353,33 @@ test("plugins can create components with mixed object styles and raw PostCSS nod `) }) -test("plugins can create components with media queries with object syntax", () => { +test('plugins can create components with media queries with object syntax', () => { const { components, utilities } = processPlugins( [ function({ addComponents }) { addComponents({ - ".container": { - width: "100%" + '.container': { + width: '100%', }, - "@media (min-width: 100px)": { - ".container": { - maxWidth: "100px" - } + '@media (min-width: 100px)': { + '.container': { + maxWidth: '100px', + }, }, - "@media (min-width: 200px)": { - ".container": { - maxWidth: "200px" - } + '@media (min-width: 200px)': { + '.container': { + maxWidth: '200px', + }, + }, + '@media (min-width: 300px)': { + '.container': { + maxWidth: '300px', + }, }, - "@media (min-width: 300px)": { - ".container": { - maxWidth: "300px" - } - } }) - } + }, ], - config() + makeConfig() ) expect(utilities.length).toBe(0) @@ -405,36 +405,36 @@ test("plugins can create components with media queries with object syntax", () = `) }) -test("media queries can be defined multiple times using objects-in-array syntax", () => { +test('media queries can be defined multiple times using objects-in-array syntax', () => { const { components, utilities } = processPlugins( [ function({ addComponents }) { addComponents([ { - ".container": { - width: "100%" + '.container': { + width: '100%', + }, + '@media (min-width: 100px)': { + '.container': { + maxWidth: '100px', + }, }, - "@media (min-width: 100px)": { - ".container": { - maxWidth: "100px" - } - } }, { - ".btn": { - padding: "1rem .5rem", - display: "block" + '.btn': { + padding: '1rem .5rem', + display: 'block', }, - "@media (min-width: 100px)": { - ".btn": { - display: "inline-block" - } - } - } + '@media (min-width: 100px)': { + '.btn': { + display: 'inline-block', + }, + }, + }, ]) - } + }, ], - config() + makeConfig() ) expect(utilities.length).toBe(0) @@ -459,35 +459,35 @@ test("media queries can be defined multiple times using objects-in-array syntax" `) }) -test("plugins can create nested rules", () => { +test('plugins can create nested rules', () => { const { components, utilities } = processPlugins( [ function({ addComponents }) { addComponents({ - ".btn-blue": { - backgroundColor: "blue", - color: "white", - padding: ".5rem 1rem", - borderRadius: ".25rem", - "&:hover": { - backgroundColor: "darkblue" + '.btn-blue': { + backgroundColor: 'blue', + color: 'white', + padding: '.5rem 1rem', + borderRadius: '.25rem', + '&:hover': { + backgroundColor: 'darkblue', }, - "@media (min-width: 500px)": { - "&:hover": { - backgroundColor: "orange" - } + '@media (min-width: 500px)': { + '&:hover': { + backgroundColor: 'orange', + }, }, - "> a": { - color: "red" + '> a': { + color: 'red', }, - "h1 &": { - color: "purple" - } - } + 'h1 &': { + color: 'purple', + }, + }, }) - } + }, ], - config() + makeConfig() ) expect(utilities.length).toBe(0) @@ -515,18 +515,18 @@ test("plugins can create nested rules", () => { `) }) -test("plugins can create rules with escaped selectors", () => { +test('plugins can create rules with escaped selectors', () => { const { components, utilities } = processPlugins( [ function({ e, addUtilities }) { addUtilities({ - [`.${e("top-1/4")}`]: { - top: "25%" - } + [`.${e('top-1/4')}`]: { + top: '25%', + }, }) - } + }, ], - config() + makeConfig() ) expect(components.length).toBe(0) @@ -539,35 +539,35 @@ test("plugins can create rules with escaped selectors", () => { `) }) -test("plugins can access the current config", () => { +test('plugins can access the current config', () => { const { components, utilities } = processPlugins( [ function({ addComponents, config }) { const containerClasses = [ { - ".container": { - width: "100%" - } - } + '.container': { + width: '100%', + }, + }, ] - _.forEach(config("screens"), breakpoint => { + _.forEach(config('screens'), breakpoint => { containerClasses.push({ [`@media (min-width: ${breakpoint})`]: { - ".container": { maxWidth: breakpoint } - } + '.container': { maxWidth: breakpoint }, + }, }) }) addComponents(containerClasses) - } + }, ], - config({ + makeConfig({ screens: { - sm: "576px", - md: "768px", - lg: "992px", - xl: "1200px" - } + sm: '576px', + md: '768px', + lg: '992px', + xl: '1200px', + }, }) ) @@ -599,24 +599,24 @@ test("plugins can access the current config", () => { `) }) -test("plugins can provide fallbacks to keys missing from the config", () => { +test('plugins can provide fallbacks to keys missing from the config', () => { const { components, utilities } = processPlugins( [ function({ addComponents, config }) { addComponents({ - ".btn": { - borderRadius: config("borderRadius.default", ".25rem") - } + '.btn': { + borderRadius: config('borderRadius.default', '.25rem'), + }, }) - } + }, ], - config({ + makeConfig({ borderRadius: { - "1": "1px", - "2": "2px", - "4": "4px", - "8": "8px" - } + '1': '1px', + '2': '2px', + '4': '4px', + '8': '8px', + }, }) ) @@ -628,18 +628,18 @@ test("plugins can provide fallbacks to keys missing from the config", () => { `) }) -test("variants are optional when adding utilities", () => { +test('variants are optional when adding utilities', () => { const { utilities } = processPlugins( [ function({ addUtilities }) { addUtilities({ - ".border-collapse": { - "border-collapse": "collapse" - } + '.border-collapse': { + 'border-collapse': 'collapse', + }, }) - } + }, ], - config() + makeConfig() ) expect(css(utilities)).toMatchCss(` @@ -650,38 +650,38 @@ test("variants are optional when adding utilities", () => { }`) }) -test("plugins can add multiple sets of utilities and components", () => { +test('plugins can add multiple sets of utilities and components', () => { const { components, utilities } = processPlugins( [ function({ addUtilities, addComponents }) { addComponents({ - ".card": { - padding: "1rem", - borderRadius: ".25rem" - } + '.card': { + padding: '1rem', + borderRadius: '.25rem', + }, }) addUtilities({ - ".skew-12deg": { - transform: "skewY(-12deg)" - } + '.skew-12deg': { + transform: 'skewY(-12deg)', + }, }) addComponents({ - ".btn": { - padding: "1rem .5rem", - display: "inline-block" - } + '.btn': { + padding: '1rem .5rem', + display: 'inline-block', + }, }) addUtilities({ - ".border-collapse": { - borderCollapse: "collapse" - } + '.border-collapse': { + borderCollapse: 'collapse', + }, }) - } + }, ], - config() + makeConfig() ) expect(css(utilities)).toMatchCss(` @@ -708,22 +708,22 @@ test("plugins can add multiple sets of utilities and components", () => { `) }) -test("plugins respect prefix and important options by default when adding utilities", () => { +test('plugins respect prefix and important options by default when adding utilities', () => { const { utilities } = processPlugins( [ function({ addUtilities }) { addUtilities({ - ".rotate-90": { - transform: "rotate(90deg)" - } + '.rotate-90': { + transform: 'rotate(90deg)', + }, }) - } + }, ], - config({ + makeConfig({ options: { - prefix: "tw-", - important: true - } + prefix: 'tw-', + important: true, + }, }) ) @@ -741,16 +741,16 @@ test("component declarations respect the 'prefix' option by default", () => { [ function({ addComponents }) { addComponents({ - ".btn-blue": { - backgroundColor: "blue" - } + '.btn-blue': { + backgroundColor: 'blue', + }, }) - } + }, ], - config({ + makeConfig({ options: { - prefix: "tw-" - } + prefix: 'tw-', + }, }) ) @@ -767,18 +767,18 @@ test("component declarations can optionally ignore 'prefix' option", () => { function({ addComponents }) { addComponents( { - ".btn-blue": { - backgroundColor: "blue" - } + '.btn-blue': { + backgroundColor: 'blue', + }, }, { respectPrefix: false } ) - } + }, ], - config({ + makeConfig({ options: { - prefix: "tw-" - } + prefix: 'tw-', + }, }) ) @@ -794,16 +794,16 @@ test("component declarations are not affected by the 'important' option", () => [ function({ addComponents }) { addComponents({ - ".btn-blue": { - backgroundColor: "blue" - } + '.btn-blue': { + backgroundColor: 'blue', + }, }) - } + }, ], - config({ + makeConfig({ options: { - important: true - } + important: true, + }, }) ) @@ -820,18 +820,18 @@ test("plugins can apply the user's chosen prefix to components manually", () => function({ addComponents, prefix }) { addComponents( { - [prefix(".btn-blue")]: { - backgroundColor: "blue" - } + [prefix('.btn-blue')]: { + backgroundColor: 'blue', + }, }, { respectPrefix: false } ) - } + }, ], - config({ + makeConfig({ options: { - prefix: "tw-" - } + prefix: 'tw-', + }, }) ) @@ -842,27 +842,27 @@ test("plugins can apply the user's chosen prefix to components manually", () => `) }) -test("prefix can optionally be ignored for utilities", () => { +test('prefix can optionally be ignored for utilities', () => { const { utilities } = processPlugins( [ function({ addUtilities }) { addUtilities( { - ".rotate-90": { - transform: "rotate(90deg)" - } + '.rotate-90': { + transform: 'rotate(90deg)', + }, }, { - respectPrefix: false + respectPrefix: false, } ) - } + }, ], - config({ + makeConfig({ options: { - prefix: "tw-", - important: true - } + prefix: 'tw-', + important: true, + }, }) ) @@ -875,27 +875,27 @@ test("prefix can optionally be ignored for utilities", () => { `) }) -test("important can optionally be ignored for utilities", () => { +test('important can optionally be ignored for utilities', () => { const { utilities } = processPlugins( [ function({ addUtilities }) { addUtilities( { - ".rotate-90": { - transform: "rotate(90deg)" - } + '.rotate-90': { + transform: 'rotate(90deg)', + }, }, { - respectImportant: false + respectImportant: false, } ) - } + }, ], - config({ + makeConfig({ options: { - prefix: "tw-", - important: true - } + prefix: 'tw-', + important: true, + }, }) ) @@ -908,29 +908,29 @@ test("important can optionally be ignored for utilities", () => { `) }) -test("variants can still be specified when ignoring prefix and important options", () => { +test('variants can still be specified when ignoring prefix and important options', () => { const { utilities } = processPlugins( [ function({ addUtilities }) { addUtilities( { - ".rotate-90": { - transform: "rotate(90deg)" - } + '.rotate-90': { + transform: 'rotate(90deg)', + }, }, { - variants: ["responsive", "hover", "focus"], + variants: ['responsive', 'hover', 'focus'], respectImportant: false, - respectPrefix: false + respectPrefix: false, } ) - } + }, ], - config({ + makeConfig({ options: { - prefix: "tw-", - important: true - } + prefix: 'tw-', + important: true, + }, }) ) @@ -943,24 +943,24 @@ test("variants can still be specified when ignoring prefix and important options `) }) -test("prefix will prefix all classes in a selector", () => { +test('prefix will prefix all classes in a selector', () => { const { components } = processPlugins( [ function({ addComponents, prefix }) { addComponents( { - [prefix(".btn-blue .w-1\\/4 > h1.text-xl + a .bar")]: { - backgroundColor: "blue" - } + [prefix('.btn-blue .w-1\\/4 > h1.text-xl + a .bar')]: { + backgroundColor: 'blue', + }, }, { respectPrefix: false } ) - } + }, ], - config({ + makeConfig({ options: { - prefix: "tw-" - } + prefix: 'tw-', + }, }) ) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index 589d10f76..cce5e2572 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -4,7 +4,9 @@ import config from '../defaultConfig.stub.js' import processPlugins from '../src/util/processPlugins' function run(input, opts = config) { - return postcss([plugin(opts, processPlugins(opts.plugins, opts))]).process(input, { from: undefined }) + return postcss([plugin(opts, processPlugins(opts.plugins, opts))]).process(input, { + from: undefined, + }) } test('it can generate hover variants', () => { diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index aebadcb8a..20b7720f7 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -49,7 +49,8 @@ import whitespace from './plugins/whitespace' import width from './plugins/width' import zIndex from './plugins/zIndex' -export default function (config) { +// eslint-disable-next-line complexity +export default function(config) { return [ config.modules.lists === false ? () => {} : lists(), config.modules.appearance === false ? () => {} : appearance(), diff --git a/src/plugins/appearance.js b/src/plugins/appearance.js index e2039eff9..a1cd31b9b 100644 --- a/src/plugins/appearance.js +++ b/src/plugins/appearance.js @@ -1,7 +1,10 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.appearance-none': { appearance: 'none' }, - }, config('modules.appearance')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.appearance-none': { appearance: 'none' }, + }, + config('modules.appearance') + ) } } diff --git a/src/plugins/backgroundAttachment.js b/src/plugins/backgroundAttachment.js index 67f51f1ec..75fc3f4c4 100644 --- a/src/plugins/backgroundAttachment.js +++ b/src/plugins/backgroundAttachment.js @@ -1,9 +1,12 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.bg-fixed': { 'background-attachment': 'fixed' }, - '.bg-local': { 'background-attachment': 'local' }, - '.bg-scroll': { 'background-attachment': 'scroll' }, - }, config('modules.backgroundAttachment')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.bg-fixed': { 'background-attachment': 'fixed' }, + '.bg-local': { 'background-attachment': 'local' }, + '.bg-scroll': { 'background-attachment': 'scroll' }, + }, + config('modules.backgroundAttachment') + ) } } diff --git a/src/plugins/backgroundColors.js b/src/plugins/backgroundColors.js index 767213c92..0d7d47d25 100644 --- a/src/plugins/backgroundColors.js +++ b/src/plugins/backgroundColors.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('backgroundColors'), (value, modifier) => { - return [`.${e(`bg-${modifier}`)}`, { - 'background-color': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('backgroundColors'), (value, modifier) => { + return [ + `.${e(`bg-${modifier}`)}`, + { + 'background-color': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.backgroundColors')) } diff --git a/src/plugins/backgroundPosition.js b/src/plugins/backgroundPosition.js index 517c160dd..3a5144b45 100644 --- a/src/plugins/backgroundPosition.js +++ b/src/plugins/backgroundPosition.js @@ -1,15 +1,18 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.bg-bottom': { 'background-position': 'bottom' }, - '.bg-center': { 'background-position': 'center' }, - '.bg-left': { 'background-position': 'left' }, - '.bg-left-bottom': { 'background-position': 'left bottom' }, - '.bg-left-top': { 'background-position': 'left top' }, - '.bg-right': { 'background-position': 'right' }, - '.bg-right-bottom': { 'background-position': 'right bottom' }, - '.bg-right-top': { 'background-position': 'right top' }, - '.bg-top': { 'background-position': 'top' }, - }, config('modules.backgroundPosition')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.bg-bottom': { 'background-position': 'bottom' }, + '.bg-center': { 'background-position': 'center' }, + '.bg-left': { 'background-position': 'left' }, + '.bg-left-bottom': { 'background-position': 'left bottom' }, + '.bg-left-top': { 'background-position': 'left top' }, + '.bg-right': { 'background-position': 'right' }, + '.bg-right-bottom': { 'background-position': 'right bottom' }, + '.bg-right-top': { 'background-position': 'right top' }, + '.bg-top': { 'background-position': 'top' }, + }, + config('modules.backgroundPosition') + ) } } diff --git a/src/plugins/backgroundRepeat.js b/src/plugins/backgroundRepeat.js index a73f74262..d7f9aac55 100644 --- a/src/plugins/backgroundRepeat.js +++ b/src/plugins/backgroundRepeat.js @@ -1,10 +1,13 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.bg-repeat': { 'background-repeat': 'repeat' }, - '.bg-no-repeat': { 'background-repeat': 'no-repeat' }, - '.bg-repeat-x': { 'background-repeat': 'repeat-x' }, - '.bg-repeat-y': { 'background-repeat': 'repeat-y' }, - }, config('modules.backgroundRepeat')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.bg-repeat': { 'background-repeat': 'repeat' }, + '.bg-no-repeat': { 'background-repeat': 'no-repeat' }, + '.bg-repeat-x': { 'background-repeat': 'repeat-x' }, + '.bg-repeat-y': { 'background-repeat': 'repeat-y' }, + }, + config('modules.backgroundRepeat') + ) } } diff --git a/src/plugins/backgroundSize.js b/src/plugins/backgroundSize.js index 6472dccdd..80bd9eec4 100644 --- a/src/plugins/backgroundSize.js +++ b/src/plugins/backgroundSize.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('backgroundSize'), (value, modifier) => { - return [`.${e(`bg-${modifier}`)}`, { - 'background-size': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('backgroundSize'), (value, modifier) => { + return [ + `.${e(`bg-${modifier}`)}`, + { + 'background-size': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.opacity')) } diff --git a/src/plugins/borderCollapse.js b/src/plugins/borderCollapse.js index a50c7170a..b3e39ca93 100644 --- a/src/plugins/borderCollapse.js +++ b/src/plugins/borderCollapse.js @@ -1,8 +1,11 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.border-collapse': { 'border-collapse': 'collapse' }, - '.border-separate': { 'border-collapse': 'separate' }, - }, config('modules.borderCollapse')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.border-collapse': { 'border-collapse': 'collapse' }, + '.border-separate': { 'border-collapse': 'separate' }, + }, + config('modules.borderCollapse') + ) } } diff --git a/src/plugins/borderColors.js b/src/plugins/borderColors.js index 5157b7c95..251c92963 100644 --- a/src/plugins/borderColors.js +++ b/src/plugins/borderColors.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(_.omit(config('borderColors'), 'default'), (value, modifier) => { - return [`.${e(`border-${modifier}`)}`, { - 'border-color': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(_.omit(config('borderColors'), 'default'), (value, modifier) => { + return [ + `.${e(`border-${modifier}`)}`, + { + 'border-color': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.borderColors')) } diff --git a/src/plugins/borderRadius.js b/src/plugins/borderRadius.js index ebee3b689..05f748465 100644 --- a/src/plugins/borderRadius.js +++ b/src/plugins/borderRadius.js @@ -1,7 +1,7 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { +export default function() { + return function({ addUtilities, config, e }) { const generators = [ (value, modifier) => ({ [`.${e(`rounded${modifier}`)}`]: { borderRadius: `${value}` }, diff --git a/src/plugins/borderStyle.js b/src/plugins/borderStyle.js index 50134739c..120033aec 100644 --- a/src/plugins/borderStyle.js +++ b/src/plugins/borderStyle.js @@ -1,18 +1,21 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.border-solid': { - 'border-style': 'solid', +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.border-solid': { + 'border-style': 'solid', + }, + '.border-dashed': { + 'border-style': 'dashed', + }, + '.border-dotted': { + 'border-style': 'dotted', + }, + '.border-none': { + 'border-style': 'none', + }, }, - '.border-dashed': { - 'border-style': 'dashed', - }, - '.border-dotted': { - 'border-style': 'dotted', - }, - '.border-none': { - 'border-style': 'none', - }, - }, config('modules.borderStyle')) + config('modules.borderStyle') + ) } } diff --git a/src/plugins/borderWidths.js b/src/plugins/borderWidths.js index 58e625e1c..29960705b 100644 --- a/src/plugins/borderWidths.js +++ b/src/plugins/borderWidths.js @@ -1,7 +1,7 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { +export default function() { + return function({ addUtilities, config, e }) { const generators = [ (value, modifier) => ({ [`.${e(`border${modifier}`)}`]: { borderWidth: `${value}` }, diff --git a/src/plugins/cursor.js b/src/plugins/cursor.js index bd5026ee1..aae914fb1 100644 --- a/src/plugins/cursor.js +++ b/src/plugins/cursor.js @@ -1,12 +1,15 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.cursor-auto': { cursor: 'auto' }, - '.cursor-default': { cursor: 'default' }, - '.cursor-pointer': { cursor: 'pointer' }, - '.cursor-wait': { cursor: 'wait' }, - '.cursor-move': { cursor: 'move' }, - '.cursor-not-allowed': { cursor: 'not-allowed' }, - }, config('modules.cursor')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.cursor-auto': { cursor: 'auto' }, + '.cursor-default': { cursor: 'default' }, + '.cursor-pointer': { cursor: 'pointer' }, + '.cursor-wait': { cursor: 'wait' }, + '.cursor-move': { cursor: 'move' }, + '.cursor-not-allowed': { cursor: 'not-allowed' }, + }, + config('modules.cursor') + ) } } diff --git a/src/plugins/display.js b/src/plugins/display.js index a843f0a63..3208ca3c8 100644 --- a/src/plugins/display.js +++ b/src/plugins/display.js @@ -1,27 +1,30 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.block': { - display: 'block', +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.block': { + display: 'block', + }, + '.inline-block': { + display: 'inline-block', + }, + '.inline': { + display: 'inline', + }, + '.table': { + display: 'table', + }, + '.table-row': { + display: 'table-row', + }, + '.table-cell': { + display: 'table-cell', + }, + '.hidden': { + display: 'none', + }, }, - '.inline-block': { - display: 'inline-block', - }, - '.inline': { - display: 'inline', - }, - '.table': { - display: 'table', - }, - '.table-row': { - display: 'table-row', - }, - '.table-cell': { - display: 'table-cell', - }, - '.hidden': { - display: 'none', - }, - }, config('modules.display')) + config('modules.display') + ) } } diff --git a/src/plugins/flexbox.js b/src/plugins/flexbox.js index 79f2e8be3..ef38e2234 100644 --- a/src/plugins/flexbox.js +++ b/src/plugins/flexbox.js @@ -1,117 +1,120 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.flex': { - display: 'flex', +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.flex': { + display: 'flex', + }, + '.inline-flex': { + display: 'inline-flex', + }, + '.flex-row': { + 'flex-direction': 'row', + }, + '.flex-row-reverse': { + 'flex-direction': 'row-reverse', + }, + '.flex-col': { + 'flex-direction': 'column', + }, + '.flex-col-reverse': { + 'flex-direction': 'column-reverse', + }, + '.flex-wrap': { + 'flex-wrap': 'wrap', + }, + '.flex-wrap-reverse': { + 'flex-wrap': 'wrap-reverse', + }, + '.flex-no-wrap': { + 'flex-wrap': 'nowrap', + }, + '.items-start': { + 'align-items': 'flex-start', + }, + '.items-end': { + 'align-items': 'flex-end', + }, + '.items-center': { + 'align-items': 'center', + }, + '.items-baseline': { + 'align-items': 'baseline', + }, + '.items-stretch': { + 'align-items': 'stretch', + }, + '.self-auto': { + 'align-self': 'auto', + }, + '.self-start': { + 'align-self': 'flex-start', + }, + '.self-end': { + 'align-self': 'flex-end', + }, + '.self-center': { + 'align-self': 'center', + }, + '.self-stretch': { + 'align-self': 'stretch', + }, + '.justify-start': { + 'justify-content': 'flex-start', + }, + '.justify-end': { + 'justify-content': 'flex-end', + }, + '.justify-center': { + 'justify-content': 'center', + }, + '.justify-between': { + 'justify-content': 'space-between', + }, + '.justify-around': { + 'justify-content': 'space-around', + }, + '.content-center': { + 'align-content': 'center', + }, + '.content-start': { + 'align-content': 'flex-start', + }, + '.content-end': { + 'align-content': 'flex-end', + }, + '.content-between': { + 'align-content': 'space-between', + }, + '.content-around': { + 'align-content': 'space-around', + }, + '.flex-1': { + flex: '1 1 0%', + }, + '.flex-auto': { + flex: '1 1 auto', + }, + '.flex-initial': { + flex: '0 1 auto', + }, + '.flex-none': { + flex: 'none', + }, + '.flex-grow': { + 'flex-grow': '1', + }, + '.flex-shrink': { + 'flex-shrink': '1', + }, + '.flex-no-grow': { + 'flex-grow': '0', + }, + '.flex-no-shrink': { + 'flex-shrink': '0', + }, }, - '.inline-flex': { - display: 'inline-flex', - }, - '.flex-row': { - 'flex-direction': 'row', - }, - '.flex-row-reverse': { - 'flex-direction': 'row-reverse', - }, - '.flex-col': { - 'flex-direction': 'column', - }, - '.flex-col-reverse': { - 'flex-direction': 'column-reverse', - }, - '.flex-wrap': { - 'flex-wrap': 'wrap', - }, - '.flex-wrap-reverse': { - 'flex-wrap': 'wrap-reverse', - }, - '.flex-no-wrap': { - 'flex-wrap': 'nowrap', - }, - '.items-start': { - 'align-items': 'flex-start', - }, - '.items-end': { - 'align-items': 'flex-end', - }, - '.items-center': { - 'align-items': 'center', - }, - '.items-baseline': { - 'align-items': 'baseline', - }, - '.items-stretch': { - 'align-items': 'stretch', - }, - '.self-auto': { - 'align-self': 'auto', - }, - '.self-start': { - 'align-self': 'flex-start', - }, - '.self-end': { - 'align-self': 'flex-end', - }, - '.self-center': { - 'align-self': 'center', - }, - '.self-stretch': { - 'align-self': 'stretch', - }, - '.justify-start': { - 'justify-content': 'flex-start', - }, - '.justify-end': { - 'justify-content': 'flex-end', - }, - '.justify-center': { - 'justify-content': 'center', - }, - '.justify-between': { - 'justify-content': 'space-between', - }, - '.justify-around': { - 'justify-content': 'space-around', - }, - '.content-center': { - 'align-content': 'center', - }, - '.content-start': { - 'align-content': 'flex-start', - }, - '.content-end': { - 'align-content': 'flex-end', - }, - '.content-between': { - 'align-content': 'space-between', - }, - '.content-around': { - 'align-content': 'space-around', - }, - '.flex-1': { - flex: '1 1 0%', - }, - '.flex-auto': { - flex: '1 1 auto', - }, - '.flex-initial': { - flex: '0 1 auto', - }, - '.flex-none': { - flex: 'none', - }, - '.flex-grow': { - 'flex-grow': '1', - }, - '.flex-shrink': { - 'flex-shrink': '1', - }, - '.flex-no-grow': { - 'flex-grow': '0', - }, - '.flex-no-shrink': { - 'flex-shrink': '0', - }, - }, config('modules.flexbox')) + config('modules.flexbox') + ) } } diff --git a/src/plugins/float.js b/src/plugins/float.js index 7a7eece99..6ae4eb86e 100644 --- a/src/plugins/float.js +++ b/src/plugins/float.js @@ -1,14 +1,17 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.float-right': { float: 'right' }, - '.float-left': { float: 'left' }, - '.float-none': { float: 'none' }, - '.clearfix:after': { - content: '""', - display: 'table', - clear: 'both', - } - }, config('modules.float')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.float-right': { float: 'right' }, + '.float-left': { float: 'left' }, + '.float-none': { float: 'none' }, + '.clearfix:after': { + content: '""', + display: 'table', + clear: 'both', + }, + }, + config('modules.float') + ) } } diff --git a/src/plugins/fontWeights.js b/src/plugins/fontWeights.js index 6d669e973..659956cd2 100644 --- a/src/plugins/fontWeights.js +++ b/src/plugins/fontWeights.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('fontWeights'), (value, modifier) => { - return [`.${e(`font-${modifier}`)}`, { - 'font-weight': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('fontWeights'), (value, modifier) => { + return [ + `.${e(`font-${modifier}`)}`, + { + 'font-weight': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.fontWeights')) } diff --git a/src/plugins/fonts.js b/src/plugins/fonts.js index 25b9efc5e..1cd374d88 100644 --- a/src/plugins/fonts.js +++ b/src/plugins/fonts.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('fonts'), (value, modifier) => { - return [`.${e(`font-${modifier}`)}`, { - 'font-family': _.isArray(value) ? value.join(', ') : value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('fonts'), (value, modifier) => { + return [ + `.${e(`font-${modifier}`)}`, + { + 'font-family': _.isArray(value) ? value.join(', ') : value, + }, + ] + }) + ) addUtilities(utilities, config('modules.fonts')) } diff --git a/src/plugins/height.js b/src/plugins/height.js index 67c0ab745..17d3b6a69 100644 --- a/src/plugins/height.js +++ b/src/plugins/height.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('height'), (value, modifier) => { - return [`.${e(`h-${modifier}`)}`, { - 'height': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('height'), (value, modifier) => { + return [ + `.${e(`h-${modifier}`)}`, + { + height: value, + }, + ] + }) + ) addUtilities(utilities, config('modules.height')) } diff --git a/src/plugins/leading.js b/src/plugins/leading.js index 5dc9a4df0..b1b5c5216 100644 --- a/src/plugins/leading.js +++ b/src/plugins/leading.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('leading'), (value, modifier) => { - return [`.${e(`leading-${modifier}`)}`, { - 'line-height': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('leading'), (value, modifier) => { + return [ + `.${e(`leading-${modifier}`)}`, + { + 'line-height': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.leading')) } diff --git a/src/plugins/lists.js b/src/plugins/lists.js index be5188528..13cb1c786 100644 --- a/src/plugins/lists.js +++ b/src/plugins/lists.js @@ -1,10 +1,13 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.list-reset': { - 'list-style': 'none', - padding: '0', +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.list-reset': { + 'list-style': 'none', + padding: '0', + }, }, - }, config('modules.lists')) + config('modules.lists') + ) } } diff --git a/src/plugins/margin.js b/src/plugins/margin.js index 96737c405..b7c748876 100644 --- a/src/plugins/margin.js +++ b/src/plugins/margin.js @@ -1,7 +1,7 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { +export default function() { + return function({ addUtilities, config, e }) { const generators = [ (size, modifier) => ({ [`.${e(`m-${modifier}`)}`]: { margin: `${size}` }, diff --git a/src/plugins/maxHeight.js b/src/plugins/maxHeight.js index b6f50dcdf..ba1784db6 100644 --- a/src/plugins/maxHeight.js +++ b/src/plugins/maxHeight.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('maxHeight'), (value, modifier) => { - return [`.${e(`max-h-${modifier}`)}`, { - 'max-height': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('maxHeight'), (value, modifier) => { + return [ + `.${e(`max-h-${modifier}`)}`, + { + 'max-height': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.maxHeight')) } diff --git a/src/plugins/maxWidth.js b/src/plugins/maxWidth.js index dadd826ae..ba3798e45 100644 --- a/src/plugins/maxWidth.js +++ b/src/plugins/maxWidth.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('maxWidth'), (value, modifier) => { - return [`.${e(`max-w-${modifier}`)}`, { - 'max-width': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('maxWidth'), (value, modifier) => { + return [ + `.${e(`max-w-${modifier}`)}`, + { + 'max-width': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.maxWidth')) } diff --git a/src/plugins/minHeight.js b/src/plugins/minHeight.js index a094c05a1..6f2966e90 100644 --- a/src/plugins/minHeight.js +++ b/src/plugins/minHeight.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('minHeight'), (value, modifier) => { - return [`.${e(`min-h-${modifier}`)}`, { - 'min-height': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('minHeight'), (value, modifier) => { + return [ + `.${e(`min-h-${modifier}`)}`, + { + 'min-height': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.minHeight')) } diff --git a/src/plugins/minWidth.js b/src/plugins/minWidth.js index a5da08634..bd56df4f3 100644 --- a/src/plugins/minWidth.js +++ b/src/plugins/minWidth.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('minWidth'), (value, modifier) => { - return [`.${e(`min-w-${modifier}`)}`, { - 'min-width': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('minWidth'), (value, modifier) => { + return [ + `.${e(`min-w-${modifier}`)}`, + { + 'min-width': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.minWidth')) } diff --git a/src/plugins/negativeMargin.js b/src/plugins/negativeMargin.js index 1863f978c..e3796f9e9 100644 --- a/src/plugins/negativeMargin.js +++ b/src/plugins/negativeMargin.js @@ -1,7 +1,7 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { +export default function() { + return function({ addUtilities, config, e }) { const generators = [ (size, modifier) => ({ [`.${e(`-m-${modifier}`)}`]: { margin: `${size}` }, diff --git a/src/plugins/objectFit.js b/src/plugins/objectFit.js index 9452858c8..cd0487915 100644 --- a/src/plugins/objectFit.js +++ b/src/plugins/objectFit.js @@ -1,11 +1,14 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.object-contain': { 'object-fit': 'contain' }, - '.object-cover': { 'object-fit': 'cover' }, - '.object-fill': { 'object-fit': 'fill' }, - '.object-none': { 'object-fit': 'none' }, - '.object-scale-down': { 'object-fit': 'scale-down' }, - }, config('modules.objectFit')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.object-contain': { 'object-fit': 'contain' }, + '.object-cover': { 'object-fit': 'cover' }, + '.object-fill': { 'object-fit': 'fill' }, + '.object-none': { 'object-fit': 'none' }, + '.object-scale-down': { 'object-fit': 'scale-down' }, + }, + config('modules.objectFit') + ) } } diff --git a/src/plugins/objectPosition.js b/src/plugins/objectPosition.js index d89830d2d..54af2a1ef 100644 --- a/src/plugins/objectPosition.js +++ b/src/plugins/objectPosition.js @@ -1,15 +1,18 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.object-bottom': { 'object-position': 'bottom' }, - '.object-center': { 'object-position': 'center' }, - '.object-left': { 'object-position': 'left' }, - '.object-left-bottom': { 'object-position': 'left bottom' }, - '.object-left-top': { 'object-position': 'left top' }, - '.object-right': { 'object-position': 'right' }, - '.object-right-bottom': { 'object-position': 'right bottom' }, - '.object-right-top': { 'object-position': 'right top' }, - '.object-top': { 'object-position': 'top' }, - }, config('modules.objectPosition')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.object-bottom': { 'object-position': 'bottom' }, + '.object-center': { 'object-position': 'center' }, + '.object-left': { 'object-position': 'left' }, + '.object-left-bottom': { 'object-position': 'left bottom' }, + '.object-left-top': { 'object-position': 'left top' }, + '.object-right': { 'object-position': 'right' }, + '.object-right-bottom': { 'object-position': 'right bottom' }, + '.object-right-top': { 'object-position': 'right top' }, + '.object-top': { 'object-position': 'top' }, + }, + config('modules.objectPosition') + ) } } diff --git a/src/plugins/opacity.js b/src/plugins/opacity.js index f4dedb7db..68dd37dbb 100644 --- a/src/plugins/opacity.js +++ b/src/plugins/opacity.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('opacity'), (value, modifier) => { - return [`.${e(`opacity-${modifier}`)}`, { - 'opacity': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('opacity'), (value, modifier) => { + return [ + `.${e(`opacity-${modifier}`)}`, + { + opacity: value, + }, + ] + }) + ) addUtilities(utilities, config('modules.opacity')) } diff --git a/src/plugins/outline.js b/src/plugins/outline.js index 79616768f..552f7e511 100644 --- a/src/plugins/outline.js +++ b/src/plugins/outline.js @@ -1,7 +1,10 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.outline-none': { outline: '0' }, - }, config('modules.outline')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.outline-none': { outline: '0' }, + }, + config('modules.outline') + ) } } diff --git a/src/plugins/overflow.js b/src/plugins/overflow.js index 37dd6f2b7..c4faedd66 100644 --- a/src/plugins/overflow.js +++ b/src/plugins/overflow.js @@ -1,20 +1,23 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.overflow-auto': { overflow: 'auto' }, - '.overflow-hidden': { overflow: 'hidden' }, - '.overflow-visible': { overflow: 'visible' }, - '.overflow-scroll': { overflow: 'scroll' }, - '.overflow-x-auto': { 'overflow-x': 'auto' }, - '.overflow-y-auto': { 'overflow-y': 'auto' }, - '.overflow-x-hidden': { 'overflow-x': 'hidden' }, - '.overflow-y-hidden': { 'overflow-y': 'hidden' }, - '.overflow-x-visible': { 'overflow-x': 'visible' }, - '.overflow-y-visible': { 'overflow-y': 'visible' }, - '.overflow-x-scroll': { 'overflow-x': 'scroll' }, - '.overflow-y-scroll': { 'overflow-y': 'scroll' }, - '.scrolling-touch': { '-webkit-overflow-scrolling': 'touch' }, - '.scrolling-auto': { '-webkit-overflow-scrolling': 'auto' }, - }, config('modules.overflow')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.overflow-auto': { overflow: 'auto' }, + '.overflow-hidden': { overflow: 'hidden' }, + '.overflow-visible': { overflow: 'visible' }, + '.overflow-scroll': { overflow: 'scroll' }, + '.overflow-x-auto': { 'overflow-x': 'auto' }, + '.overflow-y-auto': { 'overflow-y': 'auto' }, + '.overflow-x-hidden': { 'overflow-x': 'hidden' }, + '.overflow-y-hidden': { 'overflow-y': 'hidden' }, + '.overflow-x-visible': { 'overflow-x': 'visible' }, + '.overflow-y-visible': { 'overflow-y': 'visible' }, + '.overflow-x-scroll': { 'overflow-x': 'scroll' }, + '.overflow-y-scroll': { 'overflow-y': 'scroll' }, + '.scrolling-touch': { '-webkit-overflow-scrolling': 'touch' }, + '.scrolling-auto': { '-webkit-overflow-scrolling': 'auto' }, + }, + config('modules.overflow') + ) } } diff --git a/src/plugins/padding.js b/src/plugins/padding.js index 85025861f..519604576 100644 --- a/src/plugins/padding.js +++ b/src/plugins/padding.js @@ -1,7 +1,7 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { +export default function() { + return function({ addUtilities, config, e }) { const generators = [ (size, modifier) => ({ [`.${e(`p-${modifier}`)}`]: { padding: `${size}` }, diff --git a/src/plugins/pointerEvents.js b/src/plugins/pointerEvents.js index eb5daaaff..31ee1f8c2 100644 --- a/src/plugins/pointerEvents.js +++ b/src/plugins/pointerEvents.js @@ -1,8 +1,11 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.pointer-events-none': { 'pointer-events': 'none' }, - '.pointer-events-auto': { 'pointer-events': 'auto' }, - }, config('modules.pointerEvents')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.pointer-events-none': { 'pointer-events': 'none' }, + '.pointer-events-auto': { 'pointer-events': 'auto' }, + }, + config('modules.pointerEvents') + ) } } diff --git a/src/plugins/position.js b/src/plugins/position.js index cdc62d073..595235700 100644 --- a/src/plugins/position.js +++ b/src/plugins/position.js @@ -1,29 +1,32 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.static': { position: 'static' }, - '.fixed': { position: 'fixed' }, - '.absolute': { position: 'absolute' }, - '.relative': { position: 'relative' }, - '.sticky': { position: 'sticky' }, - '.pin-none': { - top: 'auto', - right: 'auto', - bottom: 'auto', - left: 'auto', +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.static': { position: 'static' }, + '.fixed': { position: 'fixed' }, + '.absolute': { position: 'absolute' }, + '.relative': { position: 'relative' }, + '.sticky': { position: 'sticky' }, + '.pin-none': { + top: 'auto', + right: 'auto', + bottom: 'auto', + left: 'auto', + }, + '.pin': { + top: 0, + right: 0, + bottom: 0, + left: 0, + }, + '.pin-y': { top: 0, bottom: 0 }, + '.pin-x': { right: 0, left: 0 }, + '.pin-t': { top: 0 }, + '.pin-r': { right: 0 }, + '.pin-b': { bottom: 0 }, + '.pin-l': { left: 0 }, }, - '.pin': { - top: 0, - right: 0, - bottom: 0, - left: 0, - }, - '.pin-y': { top: 0, bottom: 0 }, - '.pin-x': { right: 0, left: 0 }, - '.pin-t': { top: 0 }, - '.pin-r': { right: 0 }, - '.pin-b': { bottom: 0 }, - '.pin-l': { left: 0 }, - }, config('modules.position')) + config('modules.position') + ) } } diff --git a/src/plugins/resize.js b/src/plugins/resize.js index e92bd8bff..362686c05 100644 --- a/src/plugins/resize.js +++ b/src/plugins/resize.js @@ -1,10 +1,13 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.resize-none': { resize: 'none' }, - '.resize-y': { resize: 'vertical' }, - '.resize-x': { resize: 'horizontal' }, - '.resize': { resize: 'both' }, - }, config('modules.resize')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.resize-none': { resize: 'none' }, + '.resize-y': { resize: 'vertical' }, + '.resize-x': { resize: 'horizontal' }, + '.resize': { resize: 'both' }, + }, + config('modules.resize') + ) } } diff --git a/src/plugins/shadows.js b/src/plugins/shadows.js index 9a20bac7c..b19054ed4 100644 --- a/src/plugins/shadows.js +++ b/src/plugins/shadows.js @@ -1,13 +1,18 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('shadows'), (value, modifier) => { - const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}` - return [`.${className}`, { - 'box-shadow': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('shadows'), (value, modifier) => { + const className = modifier === 'default' ? 'shadow' : `shadow-${modifier}` + return [ + `.${e(className)}`, + { + 'box-shadow': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.shadows')) } diff --git a/src/plugins/svgFill.js b/src/plugins/svgFill.js index 8d4f2ac96..f4ccba344 100644 --- a/src/plugins/svgFill.js +++ b/src/plugins/svgFill.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('svgFill'), (value, modifier) => { - return [`.${e(`fill-${modifier}`)}`, { - 'fill': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('svgFill'), (value, modifier) => { + return [ + `.${e(`fill-${modifier}`)}`, + { + fill: value, + }, + ] + }) + ) addUtilities(utilities, config('modules.svgFill')) } diff --git a/src/plugins/svgStroke.js b/src/plugins/svgStroke.js index 9632d7d71..9937cc01f 100644 --- a/src/plugins/svgStroke.js +++ b/src/plugins/svgStroke.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('svgStroke'), (value, modifier) => { - return [`.${e(`stroke-${modifier}`)}`, { - 'stroke': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('svgStroke'), (value, modifier) => { + return [ + `.${e(`stroke-${modifier}`)}`, + { + stroke: value, + }, + ] + }) + ) addUtilities(utilities, config('modules.svgStroke')) } diff --git a/src/plugins/tableLayout.js b/src/plugins/tableLayout.js index 572481b2c..98b090cdd 100644 --- a/src/plugins/tableLayout.js +++ b/src/plugins/tableLayout.js @@ -1,8 +1,11 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.table-auto': { 'table-layout': 'auto' }, - '.table-fixed': { 'table-layout': 'fixed' }, - }, config('modules.tableLayout')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.table-auto': { 'table-layout': 'auto' }, + '.table-fixed': { 'table-layout': 'fixed' }, + }, + config('modules.tableLayout') + ) } } diff --git a/src/plugins/textAlign.js b/src/plugins/textAlign.js index c957c70a3..80ce95c39 100644 --- a/src/plugins/textAlign.js +++ b/src/plugins/textAlign.js @@ -1,10 +1,13 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.text-left': { 'text-align': 'left' }, - '.text-center': { 'text-align': 'center' }, - '.text-right': { 'text-align': 'right' }, - '.text-justify': { 'text-align': 'justify' }, - }, config('modules.textAlign')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.text-left': { 'text-align': 'left' }, + '.text-center': { 'text-align': 'center' }, + '.text-right': { 'text-align': 'right' }, + '.text-justify': { 'text-align': 'justify' }, + }, + config('modules.textAlign') + ) } } diff --git a/src/plugins/textColors.js b/src/plugins/textColors.js index 2ff8d3853..9652313da 100644 --- a/src/plugins/textColors.js +++ b/src/plugins/textColors.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('textColors'), (value, modifier) => { - return [`.${e(`text-${modifier}`)}`, { - 'color': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('textColors'), (value, modifier) => { + return [ + `.${e(`text-${modifier}`)}`, + { + color: value, + }, + ] + }) + ) addUtilities(utilities, config('modules.textColors')) } diff --git a/src/plugins/textSizes.js b/src/plugins/textSizes.js index a09715070..c2f896b90 100644 --- a/src/plugins/textSizes.js +++ b/src/plugins/textSizes.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('textSizes'), (value, modifier) => { - return [`.${e(`text-${modifier}`)}`, { - 'font-size': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('textSizes'), (value, modifier) => { + return [ + `.${e(`text-${modifier}`)}`, + { + 'font-size': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.textSizes')) } diff --git a/src/plugins/textStyle.js b/src/plugins/textStyle.js index f83eb6703..7a0c03bd7 100644 --- a/src/plugins/textStyle.js +++ b/src/plugins/textStyle.js @@ -1,26 +1,29 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.italic': { 'font-style': 'italic' }, - '.roman': { 'font-style': 'normal' }, +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.italic': { 'font-style': 'italic' }, + '.roman': { 'font-style': 'normal' }, - '.uppercase': { 'text-transform': 'uppercase' }, - '.lowercase': { 'text-transform': 'lowercase' }, - '.capitalize': { 'text-transform': 'capitalize' }, - '.normal-case': { 'text-transform': 'none' }, + '.uppercase': { 'text-transform': 'uppercase' }, + '.lowercase': { 'text-transform': 'lowercase' }, + '.capitalize': { 'text-transform': 'capitalize' }, + '.normal-case': { 'text-transform': 'none' }, - '.underline': { 'text-decoration': 'underline' }, - '.line-through': { 'text-decoration': 'line-through' }, - '.no-underline': { 'text-decoration': 'none' }, + '.underline': { 'text-decoration': 'underline' }, + '.line-through': { 'text-decoration': 'line-through' }, + '.no-underline': { 'text-decoration': 'none' }, - '.antialiased': { - '-webkit-font-smoothing': 'antialiased', - '-moz-osx-font-smoothing': 'grayscale', + '.antialiased': { + '-webkit-font-smoothing': 'antialiased', + '-moz-osx-font-smoothing': 'grayscale', + }, + '.subpixel-antialiased': { + '-webkit-font-smoothing': 'auto', + '-moz-osx-font-smoothing': 'auto', + }, }, - '.subpixel-antialiased': { - '-webkit-font-smoothing': 'auto', - '-moz-osx-font-smoothing': 'auto', - }, - }, config('modules.textStyle')) + config('modules.textStyle') + ) } } diff --git a/src/plugins/tracking.js b/src/plugins/tracking.js index 91405c700..1fd6f185c 100644 --- a/src/plugins/tracking.js +++ b/src/plugins/tracking.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config }) { - const utilities = _.fromPairs(_.map(config('tracking'), (value, modifier) => { - return [`.tracking-${modifier}`, { - 'letter-spacing': value, - }] - })) +export default function() { + return function({ addUtilities, config }) { + const utilities = _.fromPairs( + _.map(config('tracking'), (value, modifier) => { + return [ + `.tracking-${modifier}`, + { + 'letter-spacing': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.tracking')) } diff --git a/src/plugins/userSelect.js b/src/plugins/userSelect.js index 0eccdeb36..5fc759c15 100644 --- a/src/plugins/userSelect.js +++ b/src/plugins/userSelect.js @@ -1,8 +1,11 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.select-none': { 'user-select': 'none' }, - '.select-text': { 'user-select': 'text' }, - }, config('modules.userSelect')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.select-none': { 'user-select': 'none' }, + '.select-text': { 'user-select': 'text' }, + }, + config('modules.userSelect') + ) } } diff --git a/src/plugins/verticalAlign.js b/src/plugins/verticalAlign.js index 76a759dbe..374a9da91 100644 --- a/src/plugins/verticalAlign.js +++ b/src/plugins/verticalAlign.js @@ -1,12 +1,15 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.align-baseline': { 'vertical-align': 'baseline' }, - '.align-top': { 'vertical-align': 'top' }, - '.align-middle': { 'vertical-align': 'middle' }, - '.align-bottom': { 'vertical-align': 'bottom' }, - '.align-text-top': { 'vertical-align': 'text-top' }, - '.align-text-bottom': { 'vertical-align': 'text-bottom' }, - }, config('modules.verticalAlign')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.align-baseline': { 'vertical-align': 'baseline' }, + '.align-top': { 'vertical-align': 'top' }, + '.align-middle': { 'vertical-align': 'middle' }, + '.align-bottom': { 'vertical-align': 'bottom' }, + '.align-text-top': { 'vertical-align': 'text-top' }, + '.align-text-bottom': { 'vertical-align': 'text-bottom' }, + }, + config('modules.verticalAlign') + ) } } diff --git a/src/plugins/visibility.js b/src/plugins/visibility.js index dac62c620..9c5061d6e 100644 --- a/src/plugins/visibility.js +++ b/src/plugins/visibility.js @@ -1,8 +1,11 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.visible': { visibility: 'visible' }, - '.invisible': { visibility: 'hidden' }, - }, config('modules.visibility')) +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.visible': { visibility: 'visible' }, + '.invisible': { visibility: 'hidden' }, + }, + config('modules.visibility') + ) } } diff --git a/src/plugins/whitespace.js b/src/plugins/whitespace.js index 42b658836..4f3b2bee4 100644 --- a/src/plugins/whitespace.js +++ b/src/plugins/whitespace.js @@ -1,20 +1,23 @@ -export default function () { - return function ({ addUtilities, config }) { - addUtilities({ - '.whitespace-normal': { 'white-space': 'normal' }, - '.whitespace-no-wrap': { 'white-space': 'nowrap' }, - '.whitespace-pre': { 'white-space': 'pre' }, - '.whitespace-pre-line': { 'white-space': 'pre-line' }, - '.whitespace-pre-wrap': { 'white-space': 'pre-wrap' }, +export default function() { + return function({ addUtilities, config }) { + addUtilities( + { + '.whitespace-normal': { 'white-space': 'normal' }, + '.whitespace-no-wrap': { 'white-space': 'nowrap' }, + '.whitespace-pre': { 'white-space': 'pre' }, + '.whitespace-pre-line': { 'white-space': 'pre-line' }, + '.whitespace-pre-wrap': { 'white-space': 'pre-wrap' }, - '.break-words': { 'word-wrap': 'break-word' }, - '.break-normal': { 'word-wrap': 'normal' }, + '.break-words': { 'word-wrap': 'break-word' }, + '.break-normal': { 'word-wrap': 'normal' }, - '.truncate': { - overflow: 'hidden', - 'text-overflow': 'ellipsis', - 'white-space': 'nowrap', + '.truncate': { + overflow: 'hidden', + 'text-overflow': 'ellipsis', + 'white-space': 'nowrap', + }, }, - }, config('modules.whitespace')) + config('modules.whitespace') + ) } } diff --git a/src/plugins/width.js b/src/plugins/width.js index 517df2340..a83ed16e6 100644 --- a/src/plugins/width.js +++ b/src/plugins/width.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config, e }) { - const utilities = _.fromPairs(_.map(config('width'), (value, modifier) => { - return [`.${e(`w-${modifier}`)}`, { - 'width': value, - }] - })) +export default function() { + return function({ addUtilities, config, e }) { + const utilities = _.fromPairs( + _.map(config('width'), (value, modifier) => { + return [ + `.${e(`w-${modifier}`)}`, + { + width: value, + }, + ] + }) + ) addUtilities(utilities, config('modules.width')) } diff --git a/src/plugins/zIndex.js b/src/plugins/zIndex.js index 68b08991f..31f224b58 100644 --- a/src/plugins/zIndex.js +++ b/src/plugins/zIndex.js @@ -1,12 +1,17 @@ import _ from 'lodash' -export default function () { - return function ({ addUtilities, config }) { - const utilities = _.fromPairs(_.map(config('zIndex'), (value, modifier) => { - return [`.z-${modifier}`, { - 'z-index': value, - }] - })) +export default function() { + return function({ addUtilities, config }) { + const utilities = _.fromPairs( + _.map(config('zIndex'), (value, modifier) => { + return [ + `.z-${modifier}`, + { + 'z-index': value, + }, + ] + }) + ) addUtilities(utilities, config('modules.zIndex')) } diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index a3e6f7fe4..8b6af360d 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -8,28 +8,22 @@ import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules' import substituteScreenAtRules from './lib/substituteScreenAtRules' import substituteClassApplyAtRules from './lib/substituteClassApplyAtRules' -import generateUtilities from './legacy/generateUtilities' import processPlugins from './util/processPlugins' - import defaultPlugins from './defaultPlugins' export default function(getConfig) { return function(css) { const config = getConfig() - const processedPlugins = processPlugins([ - ...defaultPlugins(config), - ...config.plugins - ], config) - const utilities = generateUtilities(config, processedPlugins.utilities) + const processedPlugins = processPlugins([...defaultPlugins(config), ...config.plugins], config) return postcss([ - substituteTailwindAtRules(config, processedPlugins, utilities), + substituteTailwindAtRules(config, processedPlugins, processedPlugins.utilities), evaluateTailwindFunctions(config), substituteVariantsAtRules(config, processedPlugins), substituteResponsiveAtRules(config), substituteScreenAtRules(config), - substituteClassApplyAtRules(config, utilities), - function (root, result) { + substituteClassApplyAtRules(config, processedPlugins.utilities), + function(root) { root.rawCache = { colon: ': ', indent: ' ', @@ -42,7 +36,7 @@ export default function(getConfig) { emptyBody: '', commentLeft: ' ', commentRight: ' ', - semicolon: false + semicolon: false, } }, ]).process(css, { from: _.get(css, 'source.input.file') }) diff --git a/src/utilityModules.js b/src/utilityModules.js index 344b6da17..9859f0797 100644 --- a/src/utilityModules.js +++ b/src/utilityModules.js @@ -1,2 +1 @@ -export default [ -] +export default [] From f01d79f76bfa5934cb6ef4bcee4c87a2b8a267f4 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 11 Jan 2019 13:07:20 -0500 Subject: [PATCH 51/60] Add a comment to explain performance optimization --- src/processTailwindFeatures.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index 8b6af360d..778571a09 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -23,6 +23,15 @@ export default function(getConfig) { substituteResponsiveAtRules(config), substituteScreenAtRules(config), substituteClassApplyAtRules(config, processedPlugins.utilities), + + // This quick plugin is necessary to avoid a serious performance + // hit due to nodes created by postcss-js having an empty `raws` + // value, and PostCSS not providing a default `raws.semicolon` + // value. This turns determining what value to use there into an + // O(n) operation instead of an O(1) operation. + // + // The latest version of PostCSS 7.x has this patched internally, + // but patching from userland until we upgrade from v6 to v7. function(root) { root.rawCache = { colon: ': ', From 060d23439de45065aec734b031e4be2445acbd40 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 15:06:08 -0500 Subject: [PATCH 52/60] Remove code obsoleted by upgrading PostCSS --- src/processTailwindFeatures.js | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index 778571a09..25858cb0d 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -23,31 +23,6 @@ export default function(getConfig) { substituteResponsiveAtRules(config), substituteScreenAtRules(config), substituteClassApplyAtRules(config, processedPlugins.utilities), - - // This quick plugin is necessary to avoid a serious performance - // hit due to nodes created by postcss-js having an empty `raws` - // value, and PostCSS not providing a default `raws.semicolon` - // value. This turns determining what value to use there into an - // O(n) operation instead of an O(1) operation. - // - // The latest version of PostCSS 7.x has this patched internally, - // but patching from userland until we upgrade from v6 to v7. - function(root) { - root.rawCache = { - colon: ': ', - indent: ' ', - beforeDecl: '\n', - beforeRule: '\n', - beforeOpen: ' ', - beforeClose: '\n', - beforeComment: '\n', - after: '\n', - emptyBody: '', - commentLeft: ' ', - commentRight: ' ', - semicolon: false, - } - }, ]).process(css, { from: _.get(css, 'source.input.file') }) } } From 20588c9ea74a7795de8513a0a370494338127ad7 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 15:10:29 -0500 Subject: [PATCH 53/60] Remove unused code --- src/generators/zIndex.js | 10 ---------- src/legacy/generateUtilities.js | 20 -------------------- 2 files changed, 30 deletions(-) delete mode 100644 src/generators/zIndex.js delete mode 100644 src/legacy/generateUtilities.js diff --git a/src/generators/zIndex.js b/src/generators/zIndex.js deleted file mode 100644 index cea79b2f7..000000000 --- a/src/generators/zIndex.js +++ /dev/null @@ -1,10 +0,0 @@ -import _ from 'lodash' -import defineClass from '../util/defineClass' - -export default function({ zIndex }) { - return _.map(zIndex, (value, modifier) => { - return defineClass(`z-${modifier}`, { - 'z-index': value, - }) - }) -} diff --git a/src/legacy/generateUtilities.js b/src/legacy/generateUtilities.js deleted file mode 100644 index 8101961d0..000000000 --- a/src/legacy/generateUtilities.js +++ /dev/null @@ -1,20 +0,0 @@ -import postcss from 'postcss' -import utilityModules from '../utilityModules' -import prefixTree from '../util/prefixTree' -import generateModules from '../util/generateModules' - -export default function(config, pluginUtilities) { - const utilities = generateModules(utilityModules, config.modules, config) - - if (config.options.important) { - utilities.walkDecls(decl => (decl.important = true)) - } - - const tailwindUtilityTree = postcss.root({ - nodes: utilities.nodes, - }) - - prefixTree(tailwindUtilityTree, config.options.prefix) - - return [...tailwindUtilityTree.nodes, ...pluginUtilities] -} From ca524ef7c2a78a8977e6d09787800aefb539c690 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 15:12:00 -0500 Subject: [PATCH 54/60] Remove more dead code --- __tests__/generateModules.test.js | 133 ------------------------------ src/util/generateModules.js | 20 ----- 2 files changed, 153 deletions(-) delete mode 100644 __tests__/generateModules.test.js delete mode 100644 src/util/generateModules.js diff --git a/__tests__/generateModules.test.js b/__tests__/generateModules.test.js deleted file mode 100644 index d9fdb1dff..000000000 --- a/__tests__/generateModules.test.js +++ /dev/null @@ -1,133 +0,0 @@ -import generateModules from '../src/util/generateModules' -import defineClasses from '../src/util/defineClasses' - -function textAlign() { - return defineClasses({ - 'text-left': { 'text-align': 'left' }, - 'text-right': { 'text-align': 'right' }, - 'text-center': { 'text-align': 'center' }, - }) -} - -function display() { - return defineClasses({ - block: { display: 'block' }, - inline: { display: 'inline' }, - 'inline-block': { display: 'inline-block' }, - }) -} - -function borderStyle() { - return defineClasses({ - 'border-solid': { 'border-style': 'solid' }, - 'border-dashed': { 'border-style': 'dashed' }, - 'border-dotted': { 'border-style': 'dotted' }, - }) -} - -test('an empty variants list generates a @variants at-rule with no parameters', () => { - const result = generateModules([{ name: 'textAlign', generator: textAlign }], { - textAlign: [], - }) - - const expected = ` - @variants { - .text-left { text-align: left } - .text-right { text-align: right } - .text-center { text-align: center } - } - ` - expect(result.toString()).toMatchCss(expected) -}) - -test('a `false` variants list generates no output', () => { - const result = generateModules([{ name: 'textAlign', generator: textAlign }], { - textAlign: false, - }) - - expect(result.toString()).toMatchCss('') -}) - -test('specified variants are included in the @variants at-rule', () => { - const result = generateModules([{ name: 'textAlign', generator: textAlign }], { - textAlign: ['responsive', 'hover'], - }) - - const expected = ` - @variants responsive, hover { - .text-left { text-align: left } - .text-right { text-align: right } - .text-center { text-align: center } - } - ` - expect(result.toString()).toMatchCss(expected) -}) - -test('options must provide variants for every module', () => { - expect(() => { - generateModules( - [{ name: 'textAlign', generator: textAlign }, { name: 'display', generator: display }], - { - textAlign: [], - } - ) - }).toThrow() -}) - -test('variants can be different for each module', () => { - const result = generateModules( - [ - { name: 'textAlign', generator: textAlign }, - { name: 'display', generator: display }, - { name: 'borderStyle', generator: borderStyle }, - ], - { - textAlign: [], - display: false, - borderStyle: ['responsive', 'hover', 'focus'], - } - ) - - const expected = ` - @variants { - .text-left { text-align: left } - .text-right { text-align: right } - .text-center { text-align: center } - } - - @variants responsive, hover, focus { - .border-solid { border-style: solid } - .border-dashed { border-style: dashed } - .border-dotted { border-style: dotted } - } - ` - expect(result.toString()).toMatchCss(expected) -}) - -test('generators can reference the generatorOptions object', () => { - const result = generateModules( - [ - { - name: 'parameterized', - generator: generatorParams => { - return defineClasses({ - foo: { color: generatorParams.color }, - }) - }, - }, - ], - { - parameterized: [], - }, - { - color: 'blue', - } - ) - - const expected = ` - @variants { - .foo { color: blue } - } - ` - expect(result.toString()).toMatchCss(expected) -}) diff --git a/src/util/generateModules.js b/src/util/generateModules.js deleted file mode 100644 index 060f12943..000000000 --- a/src/util/generateModules.js +++ /dev/null @@ -1,20 +0,0 @@ -import _ from 'lodash' -import postcss from 'postcss' -import wrapWithVariants from '../util/wrapWithVariants' - -export default function(modules, moduleOptions, generatorOptions = {}) { - modules.forEach(module => { - if (!_.has(moduleOptions, module.name)) { - throw new Error(`Module \`${module.name}\` is missing from moduleOptions.`) - } - }) - - return postcss.root({ - nodes: _(modules) - .reject(module => moduleOptions[module.name] === false) - .flatMap(module => - wrapWithVariants(module.generator(generatorOptions), moduleOptions[module.name]) - ) - .value(), - }) -} From fe1b30b2d21f3e5dc672784d2fdfc2a749faaab3 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 15:24:13 -0500 Subject: [PATCH 55/60] Remove prefixTree, update relevant tests --- __tests__/prefixSelector.test.js | 26 ++++++++++++ __tests__/prefixTree.test.js | 70 -------------------------------- __tests__/processPlugins.test.js | 38 +++++++++++++++++ src/util/prefixTree.js | 9 ---- 4 files changed, 64 insertions(+), 79 deletions(-) create mode 100644 __tests__/prefixSelector.test.js delete mode 100644 __tests__/prefixTree.test.js delete mode 100644 src/util/prefixTree.js diff --git a/__tests__/prefixSelector.test.js b/__tests__/prefixSelector.test.js new file mode 100644 index 000000000..ae55d580e --- /dev/null +++ b/__tests__/prefixSelector.test.js @@ -0,0 +1,26 @@ +import prefix from '../src/util/prefixSelector' + +test('it prefixes classes with the provided prefix', () => { + expect(prefix('tw-', '.foo')).toEqual('.tw-foo') +}) + +test('it handles a function as the prefix', () => { + const prefixFunc = selector => { + return selector === '.foo' ? 'tw-' : '' + } + + expect(prefix(prefixFunc, '.foo')).toEqual('.tw-foo') + expect(prefix(prefixFunc, '.bar')).toEqual('.bar') +}) + +test('it properly prefixes selectors with non-standard characters', () => { + expect(prefix('tw-', '.hello\\:world')).toEqual('.tw-hello\\:world') + expect(prefix('tw-', '.foo\\/bar')).toEqual('.tw-foo\\/bar') + expect(prefix('tw-', '.wew\\.lad')).toEqual('.tw-wew\\.lad') +}) + +test('it prefixes all classes in a selector', () => { + expect(prefix('tw-', '.btn-blue .w-1\\/4 > h1.text-xl + a .bar')).toEqual( + '.tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar' + ) +}) diff --git a/__tests__/prefixTree.test.js b/__tests__/prefixTree.test.js deleted file mode 100644 index 877aade19..000000000 --- a/__tests__/prefixTree.test.js +++ /dev/null @@ -1,70 +0,0 @@ -import postcss from 'postcss' -import prefixTree from '../src/util/prefixTree' - -test('it prefixes classes with the provided prefix', () => { - const input = postcss.parse(` - .foo { color: red; } - .apple, .pear { color: green; } - `) - - const expected = ` - .tw-foo { color: red; } - .tw-apple, .tw-pear { color: green; } - ` - - const result = prefixTree(input, 'tw-').toResult() - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) -}) - -test('it handles a function as the prefix', () => { - const input = postcss.parse(` - .foo { color: red; } - .apple, .pear { color: green; } - `) - - const expected = ` - .tw-foo { color: red; } - .apple, .pear { color: green; } - ` - - const prefixFunc = selector => { - return selector === '.foo' ? 'tw-' : '' - } - - const result = prefixTree(input, prefixFunc).toResult() - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) -}) - -test('it properly prefixes selectors with non-standard characters', () => { - const input = postcss.parse(` - .hello\\:world { color: blue; } - .foo\\/bar { color: green; } - .wew\\.lad { color: red; } - `) - - const expected = ` - .tw-hello\\:world { color: blue; } - .tw-foo\\/bar { color: green; } - .tw-wew\\.lad { color: red; } - ` - - const result = prefixTree(input, 'tw-').toResult() - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) -}) - -test('it prefixes all classes in a selector', () => { - const input = postcss.parse(` - .btn-blue .w-1\\/4 > h1.text-xl + a .bar { color: red; } - `) - - const expected = ` - .tw-btn-blue .tw-w-1\\/4 > h1.tw-text-xl + a .tw-bar { color: red; } - ` - - const result = prefixTree(input, 'tw-').toResult() - expect(result.css).toEqual(expected) - expect(result.warnings().length).toBe(0) -}) diff --git a/__tests__/processPlugins.test.js b/__tests__/processPlugins.test.js index 84b90950e..740bc0fcb 100644 --- a/__tests__/processPlugins.test.js +++ b/__tests__/processPlugins.test.js @@ -761,6 +761,44 @@ test("component declarations respect the 'prefix' option by default", () => { `) }) +test('all selectors in a rule are prefixed', () => { + const { utilities, components } = processPlugins( + [ + function({ addUtilities, addComponents }) { + addUtilities({ + '.rotate-90, .rotate-1\\/4': { + transform: 'rotate(90deg)', + }, + }) + addComponents({ + '.btn-blue, .btn-red': { + padding: '10px', + }, + }) + }, + ], + makeConfig({ + options: { + prefix: 'tw-', + }, + }) + ) + + expect(css(utilities)).toMatchCss(` + @variants { + .tw-rotate-90, .tw-rotate-1\\/4 { + transform: rotate(90deg) + } + } + `) + + expect(css(components)).toMatchCss(` + .tw-btn-blue, .tw-btn-red { + padding: 10px + } + `) +}) + test("component declarations can optionally ignore 'prefix' option", () => { const { components } = processPlugins( [ diff --git a/src/util/prefixTree.js b/src/util/prefixTree.js deleted file mode 100644 index 44499e9e6..000000000 --- a/src/util/prefixTree.js +++ /dev/null @@ -1,9 +0,0 @@ -import prefixSelector from './prefixSelector' - -export default function(css, prefix) { - css.walkRules(rule => { - rule.selectors = rule.selectors.map(selector => prefixSelector(prefix, selector)) - }) - - return css -} From d255978d03501e35c263c42ddb376fe3b6041a74 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 15:27:53 -0500 Subject: [PATCH 56/60] Delete even more dead code --- src/utilityModules.js | 1 - 1 file changed, 1 deletion(-) delete mode 100644 src/utilityModules.js diff --git a/src/utilityModules.js b/src/utilityModules.js deleted file mode 100644 index 9859f0797..000000000 --- a/src/utilityModules.js +++ /dev/null @@ -1 +0,0 @@ -export default [] From b948c2549974f13cc7229f6977ca40fde610f5fb Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 15:31:00 -0500 Subject: [PATCH 57/60] Delete possibly last remnants of dead code --- __tests__/defineClass.test.js | 27 --------------------------- __tests__/defineClasses.test.js | 19 ------------------- src/util/defineClass.js | 18 ------------------ src/util/defineClasses.js | 8 -------- 4 files changed, 72 deletions(-) delete mode 100644 __tests__/defineClass.test.js delete mode 100644 __tests__/defineClasses.test.js delete mode 100644 src/util/defineClass.js delete mode 100644 src/util/defineClasses.js diff --git a/__tests__/defineClass.test.js b/__tests__/defineClass.test.js deleted file mode 100644 index cb8fe09b5..000000000 --- a/__tests__/defineClass.test.js +++ /dev/null @@ -1,27 +0,0 @@ -import c from '../src/util/collapseWhitespace' -import defineClass from '../src/util/defineClass' - -/** - * Tests - */ -it('creates a proper single-word class with rules', () => { - let output = defineClass('flex', { display: 'flex' }) - expect(c(output.toString())).toEqual(`.flex { display: flex }`) -}) - -it('does not modify the case of selector names', () => { - let output = defineClass('inlineBlock', { display: 'inline-block' }) - expect(c(output.toString())).toEqual(`.inlineBlock { display: inline-block }`) -}) - -it('does not modify the case of property names', () => { - let output = defineClass('smooth', { - '-webkit-font-smoothing': 'antialiased', - }) - expect(c(output.toString())).toEqual(`.smooth { -webkit-font-smoothing: antialiased }`) -}) - -it('escapes non-standard characters in selectors', () => { - let output = defineClass('w-1/4', { width: '25%' }) - expect(c(output.toString())).toEqual(`.w-1\\/4 { width: 25% }`) -}) diff --git a/__tests__/defineClasses.test.js b/__tests__/defineClasses.test.js deleted file mode 100644 index 4c6087440..000000000 --- a/__tests__/defineClasses.test.js +++ /dev/null @@ -1,19 +0,0 @@ -import c from '../src/util/collapseWhitespace' -import defineClasses from '../src/util/defineClasses' - -/** - * Tests - */ -it('it generates a set of helper classes from a config', () => { - let output = defineClasses({ - flex: { - display: 'flex', - }, - 'inline-flex': { - display: 'inline-flex', - }, - }) - expect(output).toBeInstanceOf(Array) - expect(c(output[0].toString())).toEqual(`.flex { display: flex }`) - expect(c(output[1].toString())).toEqual(`.inline-flex { display: inline-flex }`) -}) diff --git a/src/util/defineClass.js b/src/util/defineClass.js deleted file mode 100644 index 8ccb3aa69..000000000 --- a/src/util/defineClass.js +++ /dev/null @@ -1,18 +0,0 @@ -import _ from 'lodash' -import postcss from 'postcss' -import escapeClassName from './escapeClassName' - -export default function(className, properties) { - const decls = _.map(properties, (value, property) => { - return postcss.decl({ - prop: `${property}`, - value: `${value}`, - }) - }) - - return postcss - .rule({ - selector: `.${escapeClassName(className)}`, - }) - .append(decls) -} diff --git a/src/util/defineClasses.js b/src/util/defineClasses.js deleted file mode 100644 index 4f80aef30..000000000 --- a/src/util/defineClasses.js +++ /dev/null @@ -1,8 +0,0 @@ -import _ from 'lodash' -import defineClass from './defineClass' - -export default function defineClasses(classes) { - return _.map(classes, (properties, className) => { - return defineClass(className, properties) - }) -} From adc5d2597c78cc44af36cbe7fda30a277123b613 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 15:34:56 -0500 Subject: [PATCH 58/60] Remove unnecessary parameter --- src/lib/substituteTailwindAtRules.js | 4 ++-- src/processTailwindFeatures.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js index d9ca2e407..887dc3a7c 100644 --- a/src/lib/substituteTailwindAtRules.js +++ b/src/lib/substituteTailwindAtRules.js @@ -8,7 +8,7 @@ function updateSource(nodes, source) { }) } -export default function(config, { components: pluginComponents }, generatedUtilities) { +export default function(config, { components: pluginComponents, utilities: pluginUtilities }) { return function(css) { css.walkAtRules('tailwind', atRule => { if (atRule.params === 'preflight') { @@ -26,7 +26,7 @@ export default function(config, { components: pluginComponents }, generatedUtili } if (atRule.params === 'utilities') { - atRule.before(updateSource(generatedUtilities, atRule.source)) + atRule.before(updateSource(pluginUtilities, atRule.source)) atRule.remove() } }) diff --git a/src/processTailwindFeatures.js b/src/processTailwindFeatures.js index 25858cb0d..34b4299cf 100644 --- a/src/processTailwindFeatures.js +++ b/src/processTailwindFeatures.js @@ -17,7 +17,7 @@ export default function(getConfig) { const processedPlugins = processPlugins([...defaultPlugins(config), ...config.plugins], config) return postcss([ - substituteTailwindAtRules(config, processedPlugins, processedPlugins.utilities), + substituteTailwindAtRules(config, processedPlugins), evaluateTailwindFunctions(config), substituteVariantsAtRules(config, processedPlugins), substituteResponsiveAtRules(config), From 057b4ea76723b0e121cfb1727651c77a9901ed4d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 15:42:43 -0500 Subject: [PATCH 59/60] More dead code discovered and deleted --- src/util/collapseWhitespace.js | 3 --- 1 file changed, 3 deletions(-) delete mode 100644 src/util/collapseWhitespace.js diff --git a/src/util/collapseWhitespace.js b/src/util/collapseWhitespace.js deleted file mode 100644 index 842031b59..000000000 --- a/src/util/collapseWhitespace.js +++ /dev/null @@ -1,3 +0,0 @@ -export default function collapseWhitespace(str) { - return str.replace(/(\n|\r|\r\n)/g, ' ').replace(/\s+/g, ' ') -} From e120f59ed4e0a666c4c220b1f74f0e070f54cdbf Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Mon, 14 Jan 2019 19:24:51 -0500 Subject: [PATCH 60/60] Simplify defaultPlugins module --- src/defaultPlugins.js | 113 ++++++++++++++++++++++-------------------- 1 file changed, 59 insertions(+), 54 deletions(-) diff --git a/src/defaultPlugins.js b/src/defaultPlugins.js index 20b7720f7..3d648d8a0 100644 --- a/src/defaultPlugins.js +++ b/src/defaultPlugins.js @@ -49,58 +49,63 @@ import whitespace from './plugins/whitespace' import width from './plugins/width' import zIndex from './plugins/zIndex' -// eslint-disable-next-line complexity -export default function(config) { - return [ - config.modules.lists === false ? () => {} : lists(), - config.modules.appearance === false ? () => {} : appearance(), - config.modules.backgroundAttachment === false ? () => {} : backgroundAttachment(), - config.modules.backgroundColors === false ? () => {} : backgroundColors(), - config.modules.backgroundPosition === false ? () => {} : backgroundPosition(), - config.modules.backgroundRepeat === false ? () => {} : backgroundRepeat(), - config.modules.backgroundSize === false ? () => {} : backgroundSize(), - config.modules.borderCollapse === false ? () => {} : borderCollapse(), - config.modules.borderColors === false ? () => {} : borderColors(), - config.modules.borderRadius === false ? () => {} : borderRadius(), - config.modules.borderStyle === false ? () => {} : borderStyle(), - config.modules.borderWidths === false ? () => {} : borderWidths(), - config.modules.cursor === false ? () => {} : cursor(), - config.modules.display === false ? () => {} : display(), - config.modules.flexbox === false ? () => {} : flexbox(), - config.modules.float === false ? () => {} : float(), - config.modules.fonts === false ? () => {} : fonts(), - config.modules.fontWeights === false ? () => {} : fontWeights(), - config.modules.height === false ? () => {} : height(), - config.modules.leading === false ? () => {} : leading(), - config.modules.margin === false ? () => {} : margin(), - config.modules.maxHeight === false ? () => {} : maxHeight(), - config.modules.maxWidth === false ? () => {} : maxWidth(), - config.modules.minHeight === false ? () => {} : minHeight(), - config.modules.minWidth === false ? () => {} : minWidth(), - config.modules.negativeMargin === false ? () => {} : negativeMargin(), - config.modules.objectFit === false ? () => {} : objectFit(), - config.modules.objectPosition === false ? () => {} : objectPosition(), - config.modules.opacity === false ? () => {} : opacity(), - config.modules.outline === false ? () => {} : outline(), - config.modules.overflow === false ? () => {} : overflow(), - config.modules.padding === false ? () => {} : padding(), - config.modules.pointerEvents === false ? () => {} : pointerEvents(), - config.modules.position === false ? () => {} : position(), - config.modules.resize === false ? () => {} : resize(), - config.modules.shadows === false ? () => {} : shadows(), - config.modules.svgFill === false ? () => {} : svgFill(), - config.modules.svgStroke === false ? () => {} : svgStroke(), - config.modules.tableLayout === false ? () => {} : tableLayout(), - config.modules.textAlign === false ? () => {} : textAlign(), - config.modules.textColors === false ? () => {} : textColors(), - config.modules.textSizes === false ? () => {} : textSizes(), - config.modules.textStyle === false ? () => {} : textStyle(), - config.modules.tracking === false ? () => {} : tracking(), - config.modules.userSelect === false ? () => {} : userSelect(), - config.modules.verticalAlign === false ? () => {} : verticalAlign(), - config.modules.visibility === false ? () => {} : visibility(), - config.modules.whitespace === false ? () => {} : whitespace(), - config.modules.width === false ? () => {} : width(), - config.modules.zIndex === false ? () => {} : zIndex(), - ] +function loadPlugins(modules, plugins) { + return Object.keys(plugins) + .filter(plugin => modules[plugin] !== false) + .map(plugin => plugins[plugin]()) +} + +export default function(config) { + return loadPlugins(config.modules, { + lists, + appearance, + backgroundAttachment, + backgroundColors, + backgroundPosition, + backgroundRepeat, + backgroundSize, + borderCollapse, + borderColors, + borderRadius, + borderStyle, + borderWidths, + cursor, + display, + flexbox, + float, + fonts, + fontWeights, + height, + leading, + margin, + maxHeight, + maxWidth, + minHeight, + minWidth, + negativeMargin, + objectFit, + objectPosition, + opacity, + outline, + overflow, + padding, + pointerEvents, + position, + resize, + shadows, + svgFill, + svgStroke, + tableLayout, + textAlign, + textColors, + textSizes, + textStyle, + tracking, + userSelect, + verticalAlign, + visibility, + whitespace, + width, + zIndex, + }) }