archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Implement basic plugin system

Browse Source
This commit is contained in:
Adam Wathan 2018-02-27 09:57:21 -05:00
parent 36680cdf6e
commit 5f77aa0ec3
7 changed files with 102 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
__tests__/fixtures/tailwind-input.css
View File

@ -1,5 +1,7 @@
@tailwind preflight;
@tailwind components;
@tailwind utilities;
@responsive {

2
css/tailwind.css
View File

@ -1,3 +1,5 @@
@tailwind preflight;
@tailwind components;
@tailwind utilities;

3
defaultConfig.stub.js
View File

@ -859,6 +859,9 @@ module.exports = {
},
plugins: [],
/*
|-----------------------------------------------------------------------------
| Advanced Options https://tailwindcss.com/docs/configuration#options

6
src/index.js
View File

@ -5,9 +5,8 @@ import postcss from 'postcss'
import perfectionist from 'perfectionist'
import registerConfigAsDependency from './lib/registerConfigAsDependency'
import substituteTailwindPreflightAtRule from './lib/substituteTailwindPreflightAtRule'
import substituteTailwindAtRules from './lib/substituteTailwindAtRules'
import evaluateTailwindFunctions from './lib/evaluateTailwindFunctions'
import substituteTailwindUtilitiesAtRules from './lib/substituteTailwindUtilitiesAtRules'
import substituteVariantsAtRules from './lib/substituteVariantsAtRules'
import substituteResponsiveAtRules from './lib/substituteResponsiveAtRules'
import substituteScreenAtRules from './lib/substituteScreenAtRules'
@ -34,9 +33,8 @@ const plugin = postcss.plugin('tailwind', config => {
return postcss(
...plugins,
...[
substituteTailwindPreflightAtRule(lazyConfig),
substituteTailwindAtRules(lazyConfig),
evaluateTailwindFunctions(lazyConfig),
substituteTailwindUtilitiesAtRules(lazyConfig),
substituteVariantsAtRules(lazyConfig),
substituteResponsiveAtRules(lazyConfig),
substituteScreenAtRules(lazyConfig),

93
src/lib/substituteTailwindAtRules.js Normal file
View File

@ -0,0 +1,93 @@
import _ from 'lodash'
import applyClassPrefix from '../util/applyClassPrefix'
import container from '../generators/container'
import fs from 'fs'
import generateModules from '../util/generateModules'
import postcss from 'postcss'
import utilityModules from '../utilityModules'
import wrapWithVariants from '../util/wrapWithVariants'
function defineSelector(selector, properties) {
const decls = _.map(properties, (value, property) => {
return postcss.decl({
prop: `${property}`,
value: `${value}`,
})
})
return postcss.rule({ selector }).append(decls)
}
export default function(config) {
return function(css) {
const unwrappedConfig = config()
const pluginComponents = []
const pluginUtilities = []
unwrappedConfig.plugins.forEach(plugin => {
plugin({
selector: defineSelector,
addUtilities: (utilities, variants) => {
pluginUtilities.push(wrapWithVariants(utilities, variants))
},
addComponents: components => {
pluginComponents.push(...components)
},
})
})
css.walkAtRules('tailwind', atRule => {
if (atRule.params === 'preflight') {
atRule.before(
postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8'))
)
atRule.remove()
}
if (atRule.params === 'components') {
const tailwindComponentTree = postcss.root({
nodes: [...container(unwrappedConfig)],
})
const pluginComponentTree = postcss.root({
nodes: [...pluginComponents],
})
applyClassPrefix(tailwindComponentTree, unwrappedConfig.options.prefix)
tailwindComponentTree.walk(node => (node.source = atRule.source))
pluginComponentTree.walk(node => (node.source = atRule.source))
atRule.before(tailwindComponentTree)
atRule.before(pluginComponentTree)
atRule.remove()
}
if (atRule.params === 'utilities') {
const utilities = generateModules(utilityModules, unwrappedConfig.modules, unwrappedConfig)
if (unwrappedConfig.options.important) {
utilities.walkDecls(decl => (decl.important = true))
}
const tailwindUtilityTree = postcss.root({
nodes: [...utilities.nodes],
})
const pluginUtilityTree = postcss.root({
nodes: [...pluginUtilities],
})
applyClassPrefix(tailwindUtilityTree, unwrappedConfig.options.prefix)
tailwindUtilityTree.walk(node => (node.source = atRule.source))
pluginUtilityTree.walk(node => (node.source = atRule.source))
atRule.before(tailwindUtilityTree)
atRule.before(pluginUtilityTree)
atRule.remove()
}
})
}
}

15
src/lib/substituteTailwindPreflightAtRule.js
View File

@ -1,15 +0,0 @@
import fs from 'fs'
import postcss from 'postcss'
export default function() {
return function(css) {
css.walkAtRules('tailwind', atRule => {
if (atRule.params !== 'preflight') {
return
}
atRule.before(postcss.parse(fs.readFileSync(`${__dirname}/../../css/preflight.css`, 'utf8')))
atRule.remove()
})
}
}

34
src/lib/substituteTailwindUtilitiesAtRules.js
View File

@ -1,34 +0,0 @@
import postcss from 'postcss'
import applyClassPrefix from '../util/applyClassPrefix'
import generateModules from '../util/generateModules'
import container from '../generators/container'
import utilityModules from '../utilityModules'
export default function(config) {
return function(css) {
const unwrappedConfig = config()
css.walkAtRules('tailwind', atRule => {
if (atRule.params !== 'utilities') {
return
}
const utilities = generateModules(utilityModules, unwrappedConfig.modules, unwrappedConfig)
if (unwrappedConfig.options.important) {
utilities.walkDecls(decl => (decl.important = true))
}
const tailwindClasses = postcss.root({
nodes: [...container(unwrappedConfig), ...utilities.nodes],
})
applyClassPrefix(tailwindClasses, unwrappedConfig.options.prefix)
tailwindClasses.walk(node => (node.source = atRule.source))
atRule.before(tailwindClasses)
atRule.remove()
})
}
}