Skip to content
A webpack plugin to process generated assets with PostCSS pipeline
Branch: master
Clone or download
Pull request Compare This branch is 117 commits behind mistakster:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples
lib
test
.editorconfig
.gitignore
.npmignore
.travis.yml
README.md
index.js
package.json

README.md

postcss-pipeline-webpack-plugin

Build Status

A webpack plugin to process generated assets with PostCSS pipeline.

Preface

Webpack loaders are pretty cool but limited to process and generate only one file at a time. If you are extracting critical CSS or media queries into separate files, you are no longer able to process these files. This plugin was made to solve this problem.

Install

npm install --save postcss-pipeline-webpack-plugin 

Usage

const PostCssPipelineWebpackPlugin = require('postcss-pipeline-webpack-plugin');

const pipelinePlugin = new PostCssPipelineWebpackPlugin({
  // provide an optional function to filter out unwanted CSS 
  predicate: name => /foobar.css$/.test(name),
  // provide an optional string which will be using as a suffix for newly generated files
  suffix: 'processed',
  // provide any PostCSS plugins here
  pipeline: [],
  // you can pass any relevant SourceMap options
  // see https://github.com/postcss/postcss/blob/master/docs/source-maps.md
  map: {}
});

So, you can use this initialized instance of the plugin in webpack configuration later.

module.exports = {
  entry: './src/index.css',

  output: {
    path: path.resolve('./dest/'),
    filename: '[name].js'
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style', 'css?sourceMap&-autoprefixer')
      }
    ]
  },

  plugins: [
    new ExtractTextPlugin('styles.css'),
    pipelinePlugin    
  ]
};

Advanced techniques

For example, you may want to process your styles with postcss-critical-css plugin. It generates an additional file, which contains only styles between start- and stop-tags. You can’t use optimize generated styles before the plugin because minification removes all comments. So, you have to minify “all” and “critical” parts separately.

It’s pretty easy with postcss-pipeline-webpack-plugin. You can provide as many PostCSS pipelines as you need.

For your task, we need to set up two pipelines with one plugin in each other:

  • postcss-critical-split
  • postcss-csso
const PostCssPipelineWebpackPlugin = require('postcss-pipeline-webpack-plugin');
const criticalSplit = require('postcss-critical-split');
const csso = require('postcss-csso');

module.exports = {
  // ...  
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new PostCssPipelineWebpackPlugin({
      suffix: 'critical',
      pipeline: [
        criticalSplit({
          output: criticalSplit.output_types.CRITICAL_CSS
        })
      ]
    }),
    new PostCssPipelineWebpackPlugin({
      suffix: 'min',
      pipeline: [
        csso({
          restructure: false
        })
      ],
      map: {
        inline: false
      }
    })
  ]
};
  1. Webpack extracts all CSS into:
styles.css
  1. PostCSS generates critical CSS into styles.critical.css. So, you get:
styles.css
styles.critical.css
  1. PostCSS optimize both files with csso and create relevant SourceMaps:
styles.css
styles.critical.css
styles.min.css
styles.min.css.map
styles.critical.min.css
styles.critical.min.css.map

As you can see, webpack generates artifacts in one pass.

See full webpack.config.js for more details.

Change log

1.1.0

2016-12-27

  • [feat] suffix can contain any falsy value to skip rename
  • [bug] added module.exports to main file

1.0.0

2016-12-20

  • initial release

License

ISC

You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.