# webpack-css-treeshaking-plugin

> a webpack loader to shake unused css code.

Latest version **1.1.27** (published 2017-09-19) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.27 |
| Published | 2017-09-19 |
| First published | 2017-08-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Known vulnerabilities | 0 (+6 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 84 |
| Author | linxi |
| Maintainers | lin-xi |
| Keywords | webpack-plugin, css tree shaking, tree-shake |

## Links

- npm: https://www.npmjs.com/package/webpack-css-treeshaking-plugin
- Repository: https://github.com/lin-xi/webpack-css-treeshaking-plugin
- Homepage: https://github.com/lin-xi/webpack-css-treeshaking-plugin#readme
- Issues: https://github.com/lin-xi/webpack-css-treeshaking-plugin/issues
- npm.io page: https://npm.io/package/webpack-css-treeshaking-plugin

## Dependencies (3)

- [lodash](https://npm.io/package/lodash.md) ^4.17.4
- [postcss](https://npm.io/package/postcss.md) ^6.0.11
- [postcss-selector-parser](https://npm.io/package/postcss-selector-parser.md) ^2.2.3

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.1.27 (latest) — 2017-09-19
- 1.1.26 — 2017-09-12
- 1.1.25 — 2017-09-11
- 1.1.24 — 2017-09-11
- 1.1.23 — 2017-09-11
- 1.1.21 — 2017-09-08
- 1.1.20 — 2017-09-08
- 1.1.19 — 2017-09-08
- 1.1.18 — 2017-09-08
- 1.1.17 — 2017-09-08
- 1.1.16 — 2017-09-08
- 1.1.15 — 2017-09-06
- 1.1.14 — 2017-09-06
- 1.1.13 — 2017-09-06
- 1.1.12 — 2017-09-06
- … 13 more at https://npm.io/package/webpack-css-treeshaking-plugin/versions

## README

<p style="text-align: center">
  <img src="css-tree-shaking.png"/>
</p>

# webpack-css-treeshaking-plugin

[![Build Status](https://travis-ci.org/lin-xi/webpack-css-treeshaking-plugin.svg?branch=master)](https://travis-ci.org/lin-xi/webpack-css-treeshaking-plugin)
[![Coverage Status](https://coveralls.io/repos/github/lin-xi/webpack-css-treeshaking-plugin/badge.svg?branch=master)](https://coveralls.io/github/lin-xi/webpack-css-treeshaking-plugin?branch=master)
[![npm package](https://img.shields.io/npm/v/webpack-css-treeshaking-plugin.svg)](https://www.npmjs.org/package/webpack-css-treeshaking-plugin)
[![NPM downloads](http://img.shields.io/npm/dm/webpack-css-treeshaking-plugin.svg)](https://npmjs.org/package/webpack-css-treeshaking-plugin)

a webpack plugin to shake unused css code

-------

## how to use

```javascript
npm install webpack-css-treeshaking-plugin -D
```

config it in your webpack configuration file, it depends on extracting styles to a file, so please use ExtractTextPlugin first. 

```javascript
var ExtractTextPlugin = require('extract-text-webpack-plugin')
const CssTreeShakingPlugin = require("webpack-css-treeshaking-plugin")

module.exports = {
  plugins: [
    new CssTreeShakingPlugin({
      remove: false,
      ignore: ['state-\d']
    }),
    new ExtractTextPlugin({
      filename: 'build/style.css'
    })
  ]
};
```

## configuration
 

property | type | default | discription
-------- | ---- | ------- | -----------
remove | boolean | false | whether to remove unused css
ignore | array | [] | items can be a string or a regexp


## architechture
<img src="architechture.png">

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