PostCSS Flexbugs Fixes

PostCSS plugin This project tries to fix all of flexbug's issues.

bug 4

Input

css .foo { flex: 1; } .bar { flex: 1 1; } .foz { flex: 1 1 0; } .baz { flex: 1 1 0px; }

Output

css .foo { flex: 1 1; } .bar { flex: 1 1; } .foz { flex: 1 1; } .baz { flex: 1 1; }

bug 6

Input

css .foo { flex: 1; }

Output

css .foo { flex: 1 1 0%; }

This only fixes css classes that have the flex property set. To fix elements that are contained inside a flexbox container, use this global rule: css * { flex-shrink: 1; }

bug 8.1.a

Input

css .foo { flex: 1 0 calc(1vw - 1px); }

Output

css .foo { flex-grow: 1; flex-shrink: 0; flex-basis: calc(1vw - 1px); }

Usage

js postcss([require('postcss-flexbugs-fixes')]);

You can also disable bugs individually, possible keys bug4, bug6 and bug8a. js var plugin = require('postcss-flexbugs-fixes'); postcss([plugin({ bug6: false })]);

See PostCSS docs for examples for your environment.