tools that make it easier to use postcss plugins with webpack
MIT License
webpack-postcss-tools
tools that make it easier to use postcss plugins with webpack's css-loader
webpack's css-loader
is a great way to include css your
frontend builds because it treats every css file as a separate webpack module
in the dependency graph. this means:
@import
statements just like require()
calls in js (i.e. bynode_modules
)the downside is things like variable resolution get tricky (more on that here).
these tools give you the full power of webpack's dependency management without sacrificing must-have css features.
check out the examples directory to see it working. the webpack config looks something like this:
var join = require('path').join;
var webpackPostcssTools = require('webpack-postcss-tools');
var map = webpackPostcssTools.makeVarMap('src/index.css');
module.exports = {
entry: './src/index',
resolve: {
// this is important if, like SUIT CSS, you specify a `style` property in
// the package.json
packageMains: ['webpack', 'browser', 'web', 'style', 'main']
},
output: {
path: join(__dirname, 'dist'),
filename: 'index.[hash].js'
},
module: {
loaders: [
{test: /\.css$/, loader: 'style!css?importLoaders=1!postcss'},
{
test: /\.((png)|(eot)|(woff)|(ttf)|(svg)|(gif))$/,
loader: 'file?name=/[hash].[ext]'
}
]
},
postcss: [
webpackPostcssTools.prependTildesToImports,
require('postcss-custom-properties')({
variables: map.vars
}),
require('postcss-custom-media')({
extensions: map.media
}),
require('postcss-custom-selector')({
extensions: map.selector
}),
require('postcss-calc')()
]
};