Convert preflight to plugin

__tests__/fixtures/tailwind-input.css

@@ -1,4 +1,4 @@
-@tailwind preflight;
+@tailwind base;
 
 @tailwind components;
 

preflight.css

@@ -1 +1 @@
-@tailwind preflight;
+@tailwind base;

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,
+ }),
+ ]
 }

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()

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)
+ }
+}

tailwind.css

@@ -1,4 +1,4 @@
-@tailwind preflight;
+@tailwind base;
 
 @tailwind components;