tiny-css-prefixer
v1.1.4
Published
CSS prefixing helpers in less than 1KB
Downloads
3,063
Readme
tiny-css-prefixer
Bare essentials CSS prefixing helpers in less than 1KB 🌈
Currently supports prefixing properties for most browsers as it makes sense.
See SUPPORT.md
for more information on which prefixes and transformations have been omitted.
The API is fairly straightforward and only consists of two functions, prefixProperty
and prefixValue
.
prefixProperty('margin'); // 0b000
prefixProperty('appearance'); // 0b110
prefixValue('color', 'palevioletred'); // 'palevioletred'
prefixValue('position', 'sticky'); // '-webkit-sticky, sticky'
prefixProperty
returns a bitmap depending on which prefix should be
applied:
0b001
stands for-ms-
0b010
stands for-moz-
0b100
stands for-webkit
These are combined using a binary OR, so an example usage of the
prefixProperty
helper may look like the following:
const prefix = (prop, value) => {
const flag = prefixProperty(prop);
let css = `${prop}: ${value};\n`;
if (flag & 0b001) css += `-ms-${css}`;
if (flag & 0b010) css += `-moz-${css}`;
if (flag & 0b100) css += `-webkit-${css}`;
return css;
};
Additionally prefixValue
can accept full declarations to avoid
having to apply it before concatenation, which can be useful in case
you're trying to minimise string operations:
const declaration = 'position: sticky';
prefixValue(declaration, declaration); // 'position: -webkit-sticky, sticky'