Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/7studio/postcss-reduce-idents
Reduce custom identifiers with PostCSS.
https://github.com/7studio/postcss-reduce-idents
Last synced: 7 days ago
JSON representation
Reduce custom identifiers with PostCSS.
- Host: GitHub
- URL: https://github.com/7studio/postcss-reduce-idents
- Owner: 7studio
- License: mit
- Created: 2015-11-02T09:02:18.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2015-10-08T13:51:33.000Z (about 9 years ago)
- Last Synced: 2023-04-03T15:26:28.061Z (over 1 year ago)
- Language: JavaScript
- Size: 254 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE-MIT
Awesome Lists containing this project
README
# [postcss][postcss]-reduce-idents [][ci] [][npm] [][deps]
> Reduce [custom identifiers][idents] with PostCSS.
## Install
With [npm](https://npmjs.org/package/postcss-reduce-idents) do:
```
npm install postcss-reduce-idents --save
```
## Example
### Input
This module will rename custom identifiers in your CSS files; it does so by
converting each name to a index, which is then encoded into a legal identifier.
A legal custom identifier in CSS is case sensitive and must start with a
letter, but can contain digits, hyphens and underscores. There are over 3,000
possible two character identifiers, and 51 possible single character identifiers
that will be generated.
```css
@keyframes whiteToBlack {
0% {
color: #fff
}
to {
color: #000
}
}
.one {
animation-name: whiteToBlack
}
```
### Output
```css
@keyframes a {
0% {
color: #fff
}
to {
color: #000
}
}
.one {
animation-name: a
}
```
Note that this module does not handle identifiers that are not linked together.
The following example will not be transformed in any way:
```css
@keyframes fadeOut {
0% { opacity: 1 }
to { opacity: 0 }
}
.fadeIn {
animation-name: fadeIn;
}
```
It works for `@keyframes`, `@counter-style` and custom `counter` values. See the
[documentation][idents] for more information, or the [tests](test.js) for more
examples.
## Usage
See the [PostCSS documentation](https://github.com/postcss/postcss#usage) for
examples for your environment.
## API
### reduceIdents([options])
#### options
##### counter
Type: `boolean`
Default: `true`
Pass `false` to disable reducing `content`, `counter-reset` and `counter-increment` declarations.
##### keyframes
Type: `boolean`
Default: `true`
Pass `false` to disable reducing `keyframes` rules and `animation` declarations.
##### counterStyle
Type: `boolean`
Default: `true`
Pass `false` to disable reducing `counter-style` rules and `list-style` and `system` declarations.
## Contributing
Pull requests are welcome. If you add functionality, then please add unit tests
to cover it.
## License
MIT © [Ben Briggs](http://beneb.info)
[ci]: https://travis-ci.org/ben-eb/postcss-reduce-idents
[deps]: https://gemnasium.com/ben-eb/postcss-reduce-idents
[idents]: https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident
[npm]: http://badge.fury.io/js/postcss-reduce-idents
[postcss]: https://github.com/postcss/postcss