Skip to content

0no-co/tiny-css-prefixer

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

18 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

tiny-css-prefixer

Bare essentials CSS prefixing helpers in less than 1KB ๐ŸŒˆ

version gzip size

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'

About

CSS prefixing helpers in less than 1KB ๐ŸŒˆ

Resources

License

Stars

Watchers

Forks

Packages

No packages published