Convert preflight to plugin

Author: adamwathan

__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;