Mirror: CSS prefixing helpers in less than 1KB 馃寛
kitten.sh
1# `tiny-css-prefixer`
2
3**Bare essentials CSS prefixing helpers in less than 1KB 馃寛**
4
5[](https://www.npmjs.com/package/tiny-css-prefixer)
6[](https://unpkg.com/tiny-css-prefixer)
7
8Currently supports prefixing properties for most browsers as it makes sense.
9[See `SUPPORT.md` for more information on which prefixes and transformations have been omitted.](./SUPPORT.md)
10
11The API is fairly straightforward and only consists of two functions, `prefixProperty` and `prefixValue`.
12
13```js
14prefixProperty('margin'); // 0b000
15prefixProperty('appearance'); // 0b110
16
17prefixValue('color', 'palevioletred'); // 'palevioletred'
18prefixValue('position', 'sticky'); // '-webkit-sticky, sticky'
19```
20
21`prefixProperty` returns a bitmap depending on which prefix should be
22applied:
23
24- `0b001` stands for `-ms-`
25- `0b010` stands for `-moz-`
26- `0b100` stands for `-webkit`
27
28These are combined using a binary OR, so an example usage of the
29`prefixProperty` helper may look like the following:
30
31```js
32const prefix = (prop, value) => {
33 const flag = prefixProperty(prop);
34 let css = `${prop}: ${value};\n`;
35 if (flag & 0b001) css += `-ms-${css}`;
36 if (flag & 0b010) css += `-moz-${css}`;
37 if (flag & 0b100) css += `-webkit-${css}`;
38 return css;
39};
40```