mirror of
https://github.com/Snigdha-OS/documentation.git
synced 2025-09-12 20:04:57 +02:00
140 lines
2.8 KiB
Markdown
140 lines
2.8 KiB
Markdown
# [postcss][postcss]-reduce-idents
|
|
|
|
> 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`, custom `counter` values and grid area definitions. See the
|
|
[documentation][idents] for more information, or the [tests](src/__tests__) 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.
|
|
|
|
##### gridTemplate
|
|
|
|
Type: `boolean`
|
|
Default: `true`
|
|
|
|
Pass `false` to disable reducing `grid-template`, `grid-area`, `grid-column`, `grid-row` and `grid-template-areas` declarations.
|
|
|
|
##### encoder
|
|
|
|
Type: `function`
|
|
Default: [`lib/encode.js`](https://github.com/cssnano/postcss-reduce-idents/blob/master/src/lib/encode.js)
|
|
|
|
Pass a custom function to encode the identifier with (e.g.: as a way of prefixing them automatically).
|
|
|
|
It receives two parameters:
|
|
- A `String` with the node value.
|
|
- A `Number` identifying the index of the occurrence.
|
|
|
|
## Contributors
|
|
|
|
See [CONTRIBUTORS.md](https://github.com/cssnano/cssnano/blob/master/CONTRIBUTORS.md).
|
|
|
|
|
|
## License
|
|
|
|
MIT © [Ben Briggs](http://beneb.info)
|
|
|
|
[idents]: https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident
|
|
|
|
[postcss]: https://github.com/postcss/postcss
|