aaac7fed
 liuqimichale
add
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
|
# [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`, custom `counter` values and grid area definitions. 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.
##### gridTemplate
Type: `boolean`
Default: `true`
Pass `false` to disable reducing `grid-template`, `grid-area` and `grid-template-areas` declarations.
##### encoder
Type: `function`
Default: [`lib/encode.js`](https://github.com/ben-eb/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
Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
| [<img src="https://avatars.githubusercontent.com/u/1282980?v=3" width="100px;"/><br /><sub>Ben Briggs</sub>](http://beneb.info)<br />[💻](https://github.com/ben-eb/postcss-reduce-idents/commits?author=ben-eb) [📖](https://github.com/ben-eb/postcss-reduce-idents/commits?author=ben-eb) 👀 [⚠️](https://github.com/ben-eb/postcss-reduce-idents/commits?author=ben-eb) | [<img src="https://avatars.githubusercontent.com/u/5635476?v=3" width="100px;"/><br /><sub>Bogdan Chadkin</sub>](https://github.com/TrySound)<br />[⚠️](https://github.com/ben-eb/postcss-reduce-idents/commits?author=TrySound) [💻](https://github.com/ben-eb/postcss-reduce-idents/commits?author=TrySound) | [<img src="https://avatars.githubusercontent.com/u/13041?v=3" width="100px;"/><br /><sub>Guillermo Rauch</sub>](http://twitter.com/rauchg)<br />[💻](https://github.com/ben-eb/postcss-reduce-idents/commits?author=rauchg) [📖](https://github.com/ben-eb/postcss-reduce-idents/commits?author=rauchg) [⚠️](https://github.com/ben-eb/postcss-reduce-idents/commits?author=rauchg) | [<img src="https://avatars.githubusercontent.com/u/566536?v=3" width="100px;"/><br /><sub>Sylvain Pollet-Villard</sub>](https://github.com/sylvainpolletvillard)<br />[💻](https://github.com/ben-eb/postcss-reduce-idents/commits?author=sylvainpolletvillard) [📖](https://github.com/ben-eb/postcss-reduce-idents/commits?author=sylvainpolletvillard) [⚠️](https://github.com/ben-eb/postcss-reduce-idents/commits?author=sylvainpolletvillard) |
| :---: | :---: | :---: | :---: |
<!-- ALL-CONTRIBUTORS-LIST:END -->
This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
## 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
|
