CSSO Webpack Plugin

3.0.0 verified Sat Apr 25 auth: no javascript

Webpack plugin for CSSO minification that processes CSS bundles to reduce size. Current stable is v2.0.0-beta.3, with v3.0.0 published but ships CSSO 5.x (breaking). Releases are irregular. Differentiators: supports full restructuring across chunks, works with CSS Modules custom syntax, can output both pure and minified versions simultaneously via pluginOutputPostfix. Alternative to csso-loader or postcss-csso.

Common errors

error TypeError: CssoWebpackPlugin is not a constructor ↓

cause Using CommonJS require without accessing .default export.

fix

Change to: const CssoWebpackPlugin = require('csso-webpack-plugin').default;

error Error: Cannot find module 'csso-webpack-plugin' ↓

cause Missing installation or wrong package name.

fix

Run: npm install --save-dev csso-webpack-plugin

error Module parse failed: Unexpected token (1:0) You may need an appropriate loader to handle this file type. ↓

cause CSS not processed by css-loader before plugin.

fix

Add a rule for .css files using css-loader and MiniCssExtractPlugin.loader.

Warnings

breaking Version 3.0.0 requires Node.js >=10 and CSSO 5.x, which may produce different output than CSSO 4.x. ↓

fix Use v2.x for Node <10 or CSSO 4.x compatibility.

breaking In v2.0.0, the plugin switched to async/await, dropping support for Node <8. ↓

fix Use v1.x for Node <8.

deprecated options.sourceMap is deprecated since v1.0.0-beta.8; use webpack devtool instead. ↓

fix Remove sourceMap option and set devtool in webpack config.

gotcha With CJS require, the plugin is on .default, not the returned object directly. ↓

fix Use require('csso-webpack-plugin').default or enable esModuleInterop.

gotcha The package ships Flow types in lib/index.js.flow but this may cause confusion for TypeScript users. ↓

fix Ignore .flow files; TypeScript types are bundled.

Install

npm install csso-webpack-plugin

yarn add csso-webpack-plugin

pnpm add csso-webpack-plugin

Imports

default
wrong
```
const CssoWebpackPlugin = require('csso-webpack-plugin')
```
correct
```
import CssoWebpackPlugin from 'csso-webpack-plugin'
```
CommonJS require returns the plugin as the default export; use .default if using CJS with ES module interop.
CssoWebpackPlugin
wrong
```
const CssoWebpackPlugin = require('csso-webpack-plugin')
```
correct
```
const CssoWebpackPlugin = require('csso-webpack-plugin').default
```
CommonJS require returns the module object, the plugin is on .default. In ESM, default import works directly.

CssoOptions

wrong

import { CssoOptions } from 'csso-webpack-plugin'

correct

import type { CssoOptions } from 'csso-webpack-plugin'

CssoOptions is a TypeScript type/interface, not a runtime value.

Quickstart

Basic webpack config using MiniCssExtractPlugin and CssoWebpackPlugin to minify CSS output.

import CssoWebpackPlugin from 'csso-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';

const config = {
  entry: './src/index.js',
  output: { filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: '[name].css' }),
    new CssoWebpackPlugin()
  ]
};

export default config;