postcss-flexboxfixer

PostCSS plugin to rewrite code with existing vendor prefixes for flexbox code (especially -webkit-) and add equivalent un-prefixed CSS

Usage no npm install needed!

<script type="module">
  import postcssFlexboxfixer from 'https://cdn.skypack.dev/postcss-flexboxfixer';
</script>

README

PostCSS Flexboxfixer Build Status

PostCSS plugin to rewrite code with existing vendor prefixes for flexbox (especially -webkit- prefixed) and syntax based on older versions of the CSS specification, and add equivalent un-prefixed CSS.

For example, here's some CSS full of vendor-specific code and syntax based on older versions of the CSS specifications:

.foo {
  display: -webkit-box;
  -webkit-box-pack: justify;
}

The flexboxfixer plugin will add the equivalent standard declarations (while leaving the old CSS for backwards compatibility with older WebKit-based browsers):

.foo {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
}

Usage

postcss([ require('postcss-flexboxfixer') ])

To use in Node.js scripts:

npm install postcss-flexboxfixer

See PostCSS docs for examples for your environment.