Registry / devops / css-split-webpack-plugin

css-split-webpack-plugin

JSON →
library0.2.6jsnpmunverified

Splits large CSS bundles into multiple smaller files to work around the ~4000-selector limit in Internet Explorer 9. Wraps PostCSS-based splitting into a webpack plugin, designed to be used after ExtractTextPlugin. Latest version 0.2.6, last updated in 2016. Key differentiator: simple configuration with options for rule limit, preserving original file, and creating an import file. Not maintained; no TypeScript types.

devops
npm install css-split-webpack-plugin
github ↗package ↗
INSTALL
IMPORT
SIG · CSS-SPLIT-WEBPACK-
C
css-split-webpack-plugin
devopsjavascriptv0.2.6
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

CSSSplitWebpackPlugin
✓ import CSSSplitWebpackPlugin from 'css-split-webpack-plugin';
✗ const CSSSplitWebpackPlugin = require('css-split-webpack-plugin');
CommonJS require works but default export is .default; ESM import directly gets the default export.
default
✓ import { default as CSSSplitWebpackPlugin } from 'css-split-webpack-plugin';
✗ const { default } = require('css-split-webpack-plugin').default;
Named import of default is unusual; prefer direct default import.

Demonstrates a complete webpack config using ExtractTextPlugin and CSSSplitWebpackPlugin, splitting after CSS extraction.

const ExtractTextPlugin = require('extract-text-webpack-plugin'); const CSSSplitWebpackPlugin = require('css-split-webpack-plugin').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}), ], };
Debug
Known issues
deprecatedPackage not updated since 2016. Webpack 4+ users may need alternatives.
fix
Consider modern alternatives like webpack-fix-style-only-entries or postcss-chunk.
affects: all
gotchaMust be placed after ExtractTextPlugin in plugins array, otherwise CSS won't be processed.
fix
Order: new ExtractTextPlugin(...), new CSSSplitWebpackPlugin(...).
affects: all
gotchaDefault export is CommonJS .default; using require directly without .default returns an object with a default property.
fix
Use require('css-split-webpack-plugin').default or import plugin from 'css-split-webpack-plugin'.
affects: all
Errors
Common errors & fixes
TypeError: CSSSplitWebpackPlugin is not a constructor
Using require without .default property, getting the default export object instead of constructor.
fix
Use require('css-split-webpack-plugin').default or import CSSSplitWebpackPlugin from 'css-split-webpack-plugin'.
Unhandled rejection: Error: No CSS to split - did you add ExtractTextPlugin before this plugin?
Plugin order wrong: CSSSplitWebpackPlugin placed before ExtractTextPlugin.
fix
Ensure ExtractTextPlugin appears first in plugins array.
Upgrade
Version history
0.2.6latest on npm
Audit
Dependencies
webpackrequiredWebpack plugin; peer dependency on webpack >=1
Agent activity
7 hits · last 30 days
node
6
Resources
githubhttps://github.com/metalabdesign/css-split-webpack-plugin ↗
packagehttps://www.npmjs.com/package/css-split-webpack-plugin ↗