Convert preflight to plugin

This commit is contained in:
Adam Wathan 2019-02-07 15:19:54 -05:00
parent 76c40e4394
commit 690c7f2d52
6 changed files with 72 additions and 67 deletions

View file

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

View file

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

View file

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

View file

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

11
src/plugins/preflight.js Normal file
View file

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

View file

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