Split your CSS for stupid browsers using webpack and postcss.

Using webpack to generate your CSS is fun for some definitions of fun. Unfortunately the fun stops when you have a large app and need IE9 support because IE9 will ignore any more than ~4000 selectors in your lovely generated CSS bundle. The solution is to split your CSS bundle smartly into multiple smaller CSS files. Now you can.™ Supports source-maps.

npm install --save css-split-webpack-plugin

Simply add an instance of CSSSplitWebpackPlugin to your list of plugins in your webpack configuration file after ExtractTextPlugin. That's it!

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CSSSplitWebpackPlugin = require('../').default;

module.exports = {
  entry: './index.js',
  context: __dirname,
  output: {
    path: __dirname + '/dist',
    publicPath: '/foo',
    filename: 'bundle.js',
  },
  module: {
    loaders: [{
      test: /\.css$/,
      loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),
    }],
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new CSSSplitWebpackPlugin({size: 4000, imports: true}),
  ],
};