# csso-webpack-plugin
> CSSO minification files to serve your webpack bundles
Latest version **3.0.0** (published 2025-08-20) · 0 weekly downloads
## Install
```sh
npm install csso-webpack-plugin
pnpm add csso-webpack-plugin
yarn add csso-webpack-plugin
bun add csso-webpack-plugin
```
## Health
**Score 35/100 (D)** — status: maintenance-mode.
Positive: has types; no vulnerabilities; high quality score.
Warnings: low downloads; no esm support.
Negative: stale; low maintenance score.
## Facts
| | |
|---|---|
| Version | 3.0.0 |
| Published | 2025-08-20 |
| First published | 2017-03-06 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Node | ^10.13.0 \|\| ^12.20.0 \|\| ^14.13.0 \|\| >=15.0.0 |
| Dependencies | 5 |
| Unpacked size | 17.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 108 |
| Author | zoobestik |
| Maintainers | zoobestik |
| Keywords | css, minify, csso, webpack, optimisation |
## Links
- npm: https://www.npmjs.com/package/csso-webpack-plugin
- Repository: https://github.com/zoobestik/csso-webpack-plugin
- Issues: https://github.com/zoobestik/csso-webpack-plugin/issues
- npm.io page: https://npm.io/package/csso-webpack-plugin
## Dependencies (5)
- [csso](https://npm.io/package/csso.md) ^5.0.5
- [core-js](https://npm.io/package/core-js.md) ^3.10.1
- [source-map](https://npm.io/package/source-map.md) ^0.7.3
- [@types/webpack](https://npm.io/package/@types/webpack.md) >=4.0
- [webpack-sources](https://npm.io/package/webpack-sources.md) >=1.0.1
## Alternatives
- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads
## Recent versions
- 3.0.0 (latest) — 2025-08-20
- 2.0.0-beta.3 — 2021-04-09
- 2.0.0-beta.2 — 2021-04-01
- 2.0.0-beta.1 — 2019-12-13
- 1.0.0-beta.12 — 2018-04-04
- 1.0.0-beta.11 — 2018-04-04
- 1.0.0-beta.10 — 2017-11-04
- 1.0.0-beta.9 — 2017-10-16
- 1.0.0-beta.8 — 2017-08-28
- 1.0.0-beta.7 — 2017-06-03
- 1.0.0-beta.6 — 2017-04-17
- 1.0.0-beta.5 — 2017-04-15
- 1.0.0-beta.4 — 2017-04-09
- 1.0.0-beta.3 — 2017-04-09
- 1.0.0-beta.2 — 2017-03-31
- … 5 more at https://npm.io/package/csso-webpack-plugin/versions
## README
# CSSO Webpack Plugin
[![npm][npm]][npm-url]
[![node][node]][node-url]
[](https://david-dm.org/zoobestik/csso-webpack-plugin)
[](https://travis-ci.org/zoobestik/csso-webpack-plugin)
[](http://npm-stats.com/~packages/csso-webpack-plugin)
**Why is not [csso-loader](https://www.npmjs.com/package/csso-loader) or [postcss-csso](https://github.com/lahmatiy/postcss-csso)?**
* **[Full restructuring](https://rawgithub.com/zoobestik/csso-webpack-plugin/dev/docs/img/better-full.svg)** in bundles:
* No problems with custom syntax like **css-modules** – `:global(.c .d) .a { color: #fff; }`
* Possible to generate both **pure and minimized** versions [at the same time](#options).
## Install
```bash
npm i -D csso-webpack-plugin
```
For **`node` < 8.0.0** use [1.x](https://github.com/zoobestik/csso-webpack-plugin/tree/v1) version with `csso@^3`:
```bash
npm i -D csso-webpack-plugin@1
```
## Usage
Plugin good to use in pair with [ExtractTextPlugin](https://github.com/webpack-contrib/extract-text-webpack-plugin) or [MiniCssExtractPlugin](https://github.com/webpack-contrib/mini-css-extract-plugin).
```js
const CssoWebpackPlugin = require('csso-webpack-plugin').default;
module.exports = {
module: { /* ... */ },
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new CssoWebpackPlugin(),
]
}
```
## Options
```js
new CssoWebpackPlugin([options: CssoOptions], [filter: function | RegExp])
```
Arguments:
* `options` — [csso options](https://github.com/css/csso#minifysource-options).
* `options.pluginOutputPostfix` — *function(file)* or *string postfix*, if passed, plugin will create two assets vanilla and compressed.
Example:
```javascript
{
plugins: [
new ExtractTextPlugin('test.css'),
new CssoWebpackPlugin({ pluginOutputPostfix: 'min' })
/* Generated:
test.css — uncompressed file
test.min.css — minimized with csso file
*/
]
}
```
* `filter` — Detect should be file processed. Defaults: *to ends with `.css`*.
## Flow support
I don't now why, but plugin ships with flow typings (*typedef too*). To use them in your project, add this to the `[libs]` section of your `.flowconfig`:
```
[libs]
node_modules/csso-webpack-plugin/lib/index.js.flow
```
## Acknowledgements
[](https://ru.linkedin.com/in/kbchernenko) [](https://www.linkedin.com/in/%D0%B5%D0%B3%D0%BE%D1%80-%D0%B0%D0%BB%D0%B5%D0%BA%D1%81%D0%B5%D0%B5%D0%B2-968a1265/) [](http://opensource.org/licenses/MIT)
[npm]: https://img.shields.io/npm/v/csso-webpack-plugin.svg
[npm-url]: https://npmjs.com/package/csso-webpack-plugin
[node]: https://img.shields.io/node/v/csso-webpack-plugin.svg
[node-url]: https://nodejs.org
[deps]: https://david-dm.org/zoobestik/csso-webpack-plugin.svg
[deps-url]: https://david-dm.org/zoobestik/csso-webpack-plugin
[tests]: http://img.shields.io/travis/zoobestik/csso-webpack-plugin.svg
[tests-url]: https://travis-ci.org/zoobestik/csso-webpack-plugin
[cover]: https://coveralls.io/repos/github/zoobestik/csso-webpack-plugin/badge.svg
[cover-url]: https://coveralls.io/github/zoobestik/csso-webpack-plugin
---
_Source: https://npm.io/package/csso-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._