# optimize-css-assets-webpack-plugin

> A Webpack plugin to optimize \ minimize CSS assets.

Latest version **6.0.1** (published 2021-06-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install optimize-css-assets-webpack-plugin
pnpm add optimize-css-assets-webpack-plugin
yarn add optimize-css-assets-webpack-plugin
bun add optimize-css-assets-webpack-plugin
```

## Health

**Score 23/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.1 |
| Published | 2021-06-23 |
| First published | 2016-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/optimize-css-assets-webpack-plugin) |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 17.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1132 |
| Author | Nuno Rodrigues |
| Maintainers | nmfr |
| Keywords | CSS, duplicate, extract-text-webpack-plugin, minimize, optimize, remove, webpack |

## Links

- npm: https://www.npmjs.com/package/optimize-css-assets-webpack-plugin
- Repository: https://github.com/NMFR/optimize-css-assets-webpack-plugin
- Homepage: http://github.com/NMFR/optimize-css-assets-webpack-plugin
- Issues: https://github.com/NMFR/optimize-css-assets-webpack-plugin/issues
- npm.io page: https://npm.io/package/optimize-css-assets-webpack-plugin

## Dependencies (3)

- [cssnano](https://npm.io/package/cssnano.md) ^5.0.2
- [postcss](https://npm.io/package/postcss.md) ^8.2.1
- [last-call-webpack-plugin](https://npm.io/package/last-call-webpack-plugin.md) ^3.0.0

## 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

- 6.0.1 (latest) — 2021-06-23
- 5.0.8 — 2021-06-23
- 5.0.7 — 2021-06-22
- 6.0.0 — 2021-05-17
- 5.0.6 — 2021-05-17
- 5.0.5 — 2021-05-16
- 5.0.4 — 2020-08-30
- 5.0.3 — 2019-06-28
- 3.2.1 — 2019-06-28
- 5.0.2 — 2019-06-28
- 5.0.1 — 2018-08-29
- 5.0.0 — 2018-07-15
- 4.0.3 — 2018-06-26
- 4.0.2 — 2018-05-27
- 4.0.1 — 2018-05-01
- … 12 more at https://npm.io/package/optimize-css-assets-webpack-plugin/versions

## README

# Optimize CSS Assets Webpack Plugin

A Webpack plugin to optimize \ minimize CSS assets.

> :warning: For webpack v5 or above please use [css-minimizer-webpack-plugin](https://github.com/webpack-contrib/css-minimizer-webpack-plugin) instead.

## What does the plugin do?

It will search for CSS assets during the Webpack build and will optimize \ minimize the CSS (by default it uses [cssnano](http://github.com/ben-eb/cssnano) but a custom CSS processor can be specified).

### Solves [extract-text-webpack-plugin](http://github.com/webpack/extract-text-webpack-plugin) CSS duplication problem:

Since [extract-text-webpack-plugin](http://github.com/webpack/extract-text-webpack-plugin) only bundles (merges) text chunks, if it's used to bundle CSS, the bundle might have duplicate entries (chunks can be duplicate free but when merged, duplicate CSS can be created).

## Installation:

Using npm:
```shell
$ npm install --save-dev optimize-css-assets-webpack-plugin
```

> :warning: For webpack v3 or below please use `optimize-css-assets-webpack-plugin@3.2.0`. The `optimize-css-assets-webpack-plugin@4.0.0` version and above supports webpack v4.

## Configuration:

The plugin can receive the following options (all of them are optional):
* `assetNameRegExp`: A regular expression that indicates the names of the assets that should be optimized \ minimized. The regular expression provided is run against the filenames of the files exported by the `ExtractTextPlugin` instances in your configuration, not the filenames of your source CSS files. Defaults to `/\.css$/g`
* `cssProcessor`: The CSS processor used to optimize \ minimize the CSS, defaults to [`cssnano`](http://github.com/ben-eb/cssnano). This should be a function that follows `cssnano.process` interface (receives a CSS and options parameters and returns a Promise).
* `cssProcessorOptions`: The options passed to the `cssProcessor`, defaults to `{}`
* `cssProcessorPluginOptions`: The plugin options passed to the `cssProcessor`, defaults to `{}`
* `canPrint`: A boolean indicating if the plugin can print messages to the console, defaults to `true`

## Example:

``` javascript
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('styles.css'),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.optimize\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorPluginOptions: {
        preset: ['default', { discardComments: { removeAll: true } }],
      },
      canPrint: true
    })
  ]
};
```

## License

MIT (http://www.opensource.org/licenses/mit-license.php)

---
_Source: https://npm.io/package/optimize-css-assets-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._