Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/zoobestik/csso-webpack-plugin
CSSO full restructuring minification files to serve your webpack bundles
https://github.com/zoobestik/csso-webpack-plugin
compress css csso minify optimization webpack
Last synced: about 14 hours ago
JSON representation
CSSO full restructuring minification files to serve your webpack bundles
- Host: GitHub
- URL: https://github.com/zoobestik/csso-webpack-plugin
- Owner: zoobestik
- License: mit
- Created: 2017-03-06T17:09:38.000Z (over 7 years ago)
- Default Branch: dev
- Last Pushed: 2021-04-09T19:02:23.000Z (over 3 years ago)
- Last Synced: 2024-11-10T19:08:05.502Z (9 days ago)
- Topics: compress, css, csso, minify, optimization, webpack
- Language: JavaScript
- Homepage:
- Size: 381 KB
- Stars: 107
- Watchers: 3
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
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