https://github.com/leodido/postcss-clean

PostCss plugin to minify your CSS with clean-css
https://github.com/leodido/postcss-clean

clean-css css es2015 hacktoberfest javascript minification minify optimizer postcss postcss-plugin

Last synced: 10 months ago
JSON representation

PostCss plugin to minify your CSS with clean-css

• Host: GitHub
• URL: https://github.com/leodido/postcss-clean
• Owner: leodido
• License: mit
• Created: 2016-03-04T17:44:20.000Z (almost 10 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T20:14:32.000Z (about 3 years ago)
• Last Synced: 2024-10-14T20:43:45.291Z (over 1 year ago)
• Topics: clean-css, css, es2015, hacktoberfest, javascript, minification, minify, optimizer, postcss, postcss-plugin
• Language: JavaScript
• Homepage:
• Size: 218 KB
• Stars: 41
• Watchers: 3
• Forks: 8
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-fullstack - PostCSS-clean - css (CSS3 / PostCSS)

README

          
# [postcss][postcss]-clean ![GitHub Workflow Status (branch)](https://img.shields.io/github/workflow/status/leodido/postcss-clean/build/master?style=flat-square) [![NPM](https://img.shields.io/npm/v/postcss-clean.svg?style=flat-square)][npm] [![Coveralls branch](https://img.shields.io/coveralls/leodido/postcss-clean/master.svg?style=flat-square)](https://coveralls.io/r/leodido/postcss-clean?branch=master) [![NPM Monthly Downloads](https://img.shields.io/npm/dm/postcss-clean.svg?style=flat-square)][npm]

> PostCss plugin to minify your CSS

Compression will be handled by **[clean-css][clean-css]**, which according to [this benchmark](http://goalsmashers.github.io/css-minification-benchmark) is one of the top (probably the best) libraries for minifying CSS.

## Install

With [npm](https://npmjs.org/package/postcss-clean) do:

```

npm install postcss-clean --save

```

## Example

### Input

```css

.try {

  color: #607d8b;

  width: 32px;

}

```

### Output

```css

.try{color:#607d8b;width:32px}

```

### Input

```css

:host {

  display: block;

}

:host ::content {

  & > * {

    color: var(--primary-color);

  }

}

```

### Output

```css

:host{display:block}:host ::content>*{color:var(--my-color)}

```

**Note** this example assumes you combined postcss-clean with other plugins (e.g. [postcss-nesting][postcss-nesting]).

## API

### `clean([options])`

Note that **postcss-clean** is an asynchronous processor. It cannot be used like this:

```javascript

var out = postcss([ clean() ]).process(css).css;

console.log(out)

```

Instead make sure your runner uses the async APIs:

```javascript

postcss([ clean() ]).process(css).then(function(out) {

    console.log(out.css);

});

```

#### options

It simply proxies the [clean-css][clean-css] options. See the complete list of options [here][clean-css-opts].

## Usage

See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for examples for your environment.

## Contributing

Pull requests are welcome.

## License

MIT © Leonardo Di Donato

---

[![Analytics](https://ga-beacon.appspot.com/UA-49657176-1/postcss-clean?flat)](https://github.com/igrigorik/ga-beacon)

[clean-css]:       http://github.com/jakubpawlowicz/clean-css

[clean-css-opts]:  https://github.com/jakubpawlowicz/clean-css/tree/3.4#how-to-use-clean-css-api

[ci]:              https://travis-ci.org/leodido/postcss-clean

[deps]:            https://gemnasium.com/leodido/postcss-clean

[postcss]:         https://github.com/postcss/postcss

[postcss-nesting]: https://github.com/jonathantneal/postcss-nesting

[npm]:             https://www.npmjs.com/package/postcss-clean