Repository files navigation

Bare essentials CSS prefixing helpers in less than 1KB 🌈

Currently supports prefixing properties for most browsers as it makes sense.SeeSUPPORT.md for more information on which prefixes and transformations have been omitted.

The API is fairly straightforward and only consists of two functions,prefixProperty andprefixValue.

prefixProperty('margin');// 0b000prefixProperty('appearance');// 0b110prefixValue('color','palevioletred');// 'palevioletred'prefixValue('position','sticky');// '-webkit-sticky, sticky'

prefixProperty returns a bitmap depending on which prefix should beapplied:

• 0b001 stands for-ms-
• 0b010 stands for-moz-
• 0b100 stands for-webkit

These are combined using a binary OR, so an example usage of theprefixProperty helper may look like the following:

constprefix=(prop,value)=>{constflag=prefixProperty(prop);letcss=`${prop}:${value};\n`;if(flag&0b001)css+=`-ms-${css}`;if(flag&0b010)css+=`-moz-${css}`;if(flag&0b100)css+=`-webkit-${css}`;returncss;};

AdditionallyprefixValue can accept full declarations to avoidhaving to apply it before concatenation, which can be useful in caseyou're trying to minimise string operations:

constdeclaration='position: sticky';prefixValue(declaration,declaration);// 'position: -webkit-sticky, sticky'