From 690c7f2d526f4e5aca367961766f1a30a11d90de Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 7 Feb 2019 15:19:54 -0500 Subject: [PATCH 1/4] Convert preflight to plugin --- __tests__/fixtures/tailwind-input.css | 2 +- preflight.css | 2 +- src/corePlugins.js | 112 +++++++++++++------------- src/lib/substituteTailwindAtRules.js | 10 --- src/plugins/preflight.js | 11 +++ tailwind.css | 2 +- 6 files changed, 72 insertions(+), 67 deletions(-) create mode 100644 src/plugins/preflight.js diff --git a/__tests__/fixtures/tailwind-input.css b/__tests__/fixtures/tailwind-input.css index f48e73b26..6095e0b50 100644 --- a/__tests__/fixtures/tailwind-input.css +++ b/__tests__/fixtures/tailwind-input.css @@ -1,4 +1,4 @@ -@tailwind preflight; +@tailwind base; @tailwind components; diff --git a/preflight.css b/preflight.css index f58c35efd..2f02db53f 100644 --- a/preflight.css +++ b/preflight.css @@ -1 +1 @@ -@tailwind preflight; +@tailwind base; diff --git a/src/corePlugins.js b/src/corePlugins.js index a27a56998..47cc5a149 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -1,3 +1,4 @@ +import preflight from './plugins/preflight' import lists from './plugins/lists' import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' @@ -52,7 +53,7 @@ import zIndex from './plugins/zIndex' import _ from 'lodash' import configurePlugins from './util/configurePlugins' -function loadPlugins({ theme, variants, corePlugins }, plugins) { +function loadUtilityPlugins({ theme, variants, corePlugins: userCorePluginConfig }, plugins) { const defaultCorePluginConfig = _.fromPairs( Object.keys(plugins).map(plugin => [ plugin, @@ -63,60 +64,63 @@ function loadPlugins({ theme, variants, corePlugins }, plugins) { ]) ) - return configurePlugins(plugins, corePlugins, defaultCorePluginConfig) + return configurePlugins(plugins, userCorePluginConfig, defaultCorePluginConfig) } export default function(config) { - return loadPlugins(config, { - 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, - }) + return [ + preflight(), + ...loadUtilityPlugins(config, { + 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, + }), + ] } diff --git a/src/lib/substituteTailwindAtRules.js b/src/lib/substituteTailwindAtRules.js index f75eed99c..581ec8001 100644 --- a/src/lib/substituteTailwindAtRules.js +++ b/src/lib/substituteTailwindAtRules.js @@ -1,4 +1,3 @@ -import fs from 'fs' import _ from 'lodash' import postcss from 'postcss' @@ -14,15 +13,6 @@ export default function( ) { return function(css) { css.walkAtRules('tailwind', atRule => { - if (atRule.params === 'preflight') { - const preflightTree = postcss.parse( - fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8') - ) - - atRule.before(updateSource(preflightTree, atRule.source)) - atRule.remove() - } - if (atRule.params === 'base') { atRule.before(updateSource(pluginBase, atRule.source)) atRule.remove() diff --git a/src/plugins/preflight.js b/src/plugins/preflight.js new file mode 100644 index 000000000..83eea113d --- /dev/null +++ b/src/plugins/preflight.js @@ -0,0 +1,11 @@ +import fs from 'fs' +import postcss from 'postcss' + +export default function() { + return function({ addBase }) { + const preflightStyles = postcss.parse( + fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8') + ) + addBase(preflightStyles.nodes) + } +} diff --git a/tailwind.css b/tailwind.css index 5881ba48f..7f393742a 100644 --- a/tailwind.css +++ b/tailwind.css @@ -1,4 +1,4 @@ -@tailwind preflight; +@tailwind base; @tailwind components; From a9a0cf03e51401b99767958b9fd58855ff1d2e0f Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 7 Feb 2019 15:27:17 -0500 Subject: [PATCH 2/4] Move preflight CSS into plugins directory --- package.json | 2 +- {css => src/plugins/css}/preflight.css | 0 src/plugins/preflight.js | 4 +--- 3 files changed, 2 insertions(+), 4 deletions(-) rename {css => src/plugins/css}/preflight.css (100%) diff --git a/package.json b/package.json index 22aca9cf5..0271c3fcd 100644 --- a/package.json +++ b/package.json @@ -18,7 +18,7 @@ ], "scripts": { "prebabelify": "rimraf lib", - "babelify": "babel src --out-dir lib", + "babelify": "babel src --out-dir lib --copy-files", "prepare": "npm run babelify && babel-node src/build.js", "style": "eslint .", "test": "jest && eslint ." diff --git a/css/preflight.css b/src/plugins/css/preflight.css similarity index 100% rename from css/preflight.css rename to src/plugins/css/preflight.css diff --git a/src/plugins/preflight.js b/src/plugins/preflight.js index 83eea113d..56ccdd3b9 100644 --- a/src/plugins/preflight.js +++ b/src/plugins/preflight.js @@ -3,9 +3,7 @@ import postcss from 'postcss' export default function() { return function({ addBase }) { - const preflightStyles = postcss.parse( - fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8') - ) + const preflightStyles = postcss.parse(fs.readFileSync(`${__dirname}/css/preflight.css`, 'utf8')) addBase(preflightStyles.nodes) } } From 9a3eee5afc4a4cc01894e81b2af454f2eeca5208 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 7 Feb 2019 15:31:11 -0500 Subject: [PATCH 3/4] Don't handle preflight separately in corePlugins If we do, we have to handle disabling/custom configuration separately too, which we don't want. This really suggests I should prioritize adding a more black-box level test for this part of the codebase. --- src/corePlugins.js | 112 ++++++++++++++++++++++----------------------- 1 file changed, 55 insertions(+), 57 deletions(-) diff --git a/src/corePlugins.js b/src/corePlugins.js index 47cc5a149..ede2c9b04 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -53,7 +53,7 @@ import zIndex from './plugins/zIndex' import _ from 'lodash' import configurePlugins from './util/configurePlugins' -function loadUtilityPlugins({ theme, variants, corePlugins: userCorePluginConfig }, plugins) { +function loadPlugins({ theme, variants, corePlugins }, plugins) { const defaultCorePluginConfig = _.fromPairs( Object.keys(plugins).map(plugin => [ plugin, @@ -64,63 +64,61 @@ function loadUtilityPlugins({ theme, variants, corePlugins: userCorePluginConfig ]) ) - return configurePlugins(plugins, userCorePluginConfig, defaultCorePluginConfig) + return configurePlugins(plugins, corePlugins, defaultCorePluginConfig) } export default function(config) { - return [ - preflight(), - ...loadUtilityPlugins(config, { - 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, - }), - ] + return loadPlugins(config, { + preflight, + 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, + }) } From a9bab6ebb633c96cbcf768aabd64d842793b146d Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 8 Feb 2019 09:26:34 -0500 Subject: [PATCH 4/4] Add preflight to tailwindcss/plugins folder --- plugins/preflight.js | 1 + 1 file changed, 1 insertion(+) create mode 100644 plugins/preflight.js diff --git a/plugins/preflight.js b/plugins/preflight.js new file mode 100644 index 000000000..9c427e26f --- /dev/null +++ b/plugins/preflight.js @@ -0,0 +1 @@ +module.exports = require('../lib/plugins/preflight').default