PostCSS Flexbugs Strict

PostCSS plugin This project tries to encourage less ambiguous Flexbox CSS while fixing some of flexbug's issues.

Explanation

This started as a fork of postcss-flexbugs-fixes because I was not happy with some of the changes it made to support shorthand flex declarations. This is not the fault of that plugin (which is great!); it is an issue with the goal of supporting ambiguous declarations in browsers like IE and Safari. See https://github.com/luisrudge/postcss-flexbugs-fixes/issues/59

My solution was to change the goal. Instead of supporting declarations like flex: 100% 0; and flex: 1, we force users to declare all three values explicitly. Furthermore, we do not automatically translate any values from one unit to another. We force users to specify a unit that is compatible with all target browsers.

In my experience, most developers have no idea what the defaults of flex are let alone what flex: 1; means, and flex: 1 1 auto; is actually not much more code. It forces developers to think about exactly what they want.

Strict Behavior

flex declarations must contain 3 values.

Okay

.foo { flex: 1 0 0%; }

Bad

.foo { flex: 1; }

The grow and shrink values must be unit-less.

Bad

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

The basis value must have a unit, and cannot be 0px.

Bad

.foo { flex: 1 1 0px; }

Also bad

.foo { flex: 1 0 0; }

Translations

The calc check for flex-basis is benign so we still do it.

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('@spaced-out/postcss-flexbugs-strict')]);

See PostCSS docs for examples for your environment.