Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including @gem-mine/css-split-webpack-plugin with all npm packages installed. Try it out:

require("webpack/package.json"); // webpack is a peer dependency. var cssSplitWebpackPlugin = require("@gem-mine/css-split-webpack-plugin")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@gem-mine/css-split-webpack-plugin v0.2.7


Split your CSS for stupid browsers using webpack and postcss.

build status coverage license version downloads

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

The following configuration options are available:

size: default: 4000 The maximum number of CSS rules allowed in a single file. To make things work with IE this value should be somewhere around 4000.

imports: default: false If you originally built your app to only ever consider using one CSS file then this flag is for you. It creates an additional CSS file that imports all of the split files. You pass true to turn this feature on, or a string with the name you'd like the generated file to have.

filename: default: "[name]-[part].[ext]" Control how the split files have their names generated. The default uses the parent's filename and extension, but adds in the part number.

preserve: default: false. Keep the original unsplit file as well. Sometimes this is desirable if you want to target a specific browser (IE) with the split files and then serve the unsplit ones to everyone else.

defer: default: 'false'. You can pass true here to cause this plugin to split the CSS on the emit phase. Sometimes this is needed if you have other plugins that operate on the CSS also in the emit phase. Unfortunately by doing this you potentially lose chunk linking and source maps. Use only when necessary.

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free