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.

5.0.1

• Moving postcss to peer dependencies #74

5.0.1

• Adding postcss as dependency #74

5.0.0

• upgrade to postcss 8 #71

4.2.1

• Fix calc regex #69

4.2.0

• Don't change values that reference custom props #64

4.1.0

• Add option to disable bug fixes #53

4.0.0

• upgrade to postcss 7

3.3.1

• Autoremoval of 0% Basis #46. More context here

3.3.0

• Revert Autoremoval of 0% Basis #43

3.2.0

• Set flex basis if second value is not a number #41

3.1.0

• Fix safari issues with flex-basis #38

3.0.0

• upgrade to postcss 6

2.1.0

• Prevent mutating value when flex value is one of ['none', 'auto', 'content', 'inherit', 'initial', 'unset']

2.0.0

• upgrade to postcss 5

1.1.0

• Ignore flex set to none #24
• The default value of flex-basis is 0% #22

1.0

• Initial release