postcss-flexbugs-fixes

PostCSS Flexbugs Fixes

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

bug 4

Input

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

Output

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

bug 6

Input

.foo { flex: 1; }

Output

.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:

* {
    flex-shrink: 1;
}

bug 8.1.a

Input

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

Output

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

Usage

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

You can also disable bugs individually, possible keys bug4, bug6 and bug8a.

var plugin = require('postcss-flexbugs-fixes');
postcss([plugin({ bug6: false })]);

See PostCSS docs for examples for your environment.

Similar packages

Other packages similar to postcss-flexbugs-fixes

autoprefixer

Autoprefixer is a PostCSS plugin that adds vendor prefixes to CSS rules using values from Can I Use. While it does not specifically target flexbox bugs, it ensures that your CSS works across different browsers by adding necessary prefixes. It complements postcss-flexbugs-fixes by handling other cross-browser compatibility issues.

postcss-preset-env

PostCSS Preset Env allows you to use future CSS features today by converting modern CSS into something most browsers can understand. It includes autoprefixer and other plugins, but it does not specifically address flexbox bugs. It is more comprehensive in terms of modern CSS features but less focused on flexbox issues compared to postcss-flexbugs-fixes.