{"id":19432,"library":"css-split-webpack-plugin","title":"CSS Split Webpack Plugin","description":"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.","status":"deprecated","version":"0.2.6","language":"javascript","source_language":"en","source_url":"https://github.com/metalabdesign/css-split-webpack-plugin","tags":["javascript","webpack-plugin","postcss"],"install":[{"cmd":"npm install css-split-webpack-plugin","lang":"bash","label":"npm"},{"cmd":"yarn add css-split-webpack-plugin","lang":"bash","label":"yarn"},{"cmd":"pnpm add css-split-webpack-plugin","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Webpack plugin; peer dependency on webpack >=1","package":"webpack","optional":false}],"imports":[{"note":"CommonJS require works but default export is .default; ESM import directly gets the default export.","wrong":"const CSSSplitWebpackPlugin = require('css-split-webpack-plugin');","symbol":"CSSSplitWebpackPlugin","correct":"import CSSSplitWebpackPlugin from 'css-split-webpack-plugin';"},{"note":"Named import of default is unusual; prefer direct default import.","wrong":"const { default } = require('css-split-webpack-plugin').default;","symbol":"default","correct":"import { default as CSSSplitWebpackPlugin } from 'css-split-webpack-plugin';"}],"quickstart":{"code":"const ExtractTextPlugin = require('extract-text-webpack-plugin');\nconst CSSSplitWebpackPlugin = require('css-split-webpack-plugin').default;\n\nmodule.exports = {\n  entry: './index.js',\n  context: __dirname,\n  output: {\n    path: __dirname + '/dist',\n    publicPath: '/foo',\n    filename: 'bundle.js',\n  },\n  module: {\n    loaders: [{\n      test: /\\.css$/,\n      loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),\n    }],\n  },\n  plugins: [\n    new ExtractTextPlugin('styles.css'),\n    new CSSSplitWebpackPlugin({size: 4000}),\n  ],\n};","lang":"javascript","description":"Demonstrates a complete webpack config using ExtractTextPlugin and CSSSplitWebpackPlugin, splitting after CSS extraction."},"warnings":[{"fix":"Consider modern alternatives like webpack-fix-style-only-entries or postcss-chunk.","message":"Package not updated since 2016. Webpack 4+ users may need alternatives.","severity":"deprecated","affected_versions":"all"},{"fix":"Order: new ExtractTextPlugin(...), new CSSSplitWebpackPlugin(...).","message":"Must be placed after ExtractTextPlugin in plugins array, otherwise CSS won't be processed.","severity":"gotcha","affected_versions":"all"},{"fix":"Use require('css-split-webpack-plugin').default or import plugin from 'css-split-webpack-plugin'.","message":"Default export is CommonJS .default; using require directly without .default returns an object with a default property.","severity":"gotcha","affected_versions":"all"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Use require('css-split-webpack-plugin').default or import CSSSplitWebpackPlugin from 'css-split-webpack-plugin'.","cause":"Using require without .default property, getting the default export object instead of constructor.","error":"TypeError: CSSSplitWebpackPlugin is not a constructor"},{"fix":"Ensure ExtractTextPlugin appears first in plugins array.","cause":"Plugin order wrong: CSSSplitWebpackPlugin placed before ExtractTextPlugin.","error":"Unhandled rejection: Error: No CSS to split - did you add ExtractTextPlugin before this plugin?"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}