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; }
grow
and shrink
values must be unit-less.
The Bad
.foo { flex: 100% 1 0%; }
basis
value must have a unit, and cannot be 0px
.
The 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.
8.1.a
bugInput
.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.