athea

Repositories Projects Packages

postcss-flexbugs-fixes (5.0.2)

Published 2026-02-24 14:02:56 +00:00 by atheaadmin

Installation

Setup this registry in your project .npmrc file:

registry=

To install the package using npm, run the following command:

npm install postcss-flexbugs-fixes@5.0.2

or add it to the package.json file:

"postcss-flexbugs-fixes": "5.0.2"

For more information on the npm registry, see the documentation.

About this package

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.

Dependencies

Development Dependencies

ID	Version
chai	^4.2.0
gulp	^4.0.2
gulp-eslint	^6.0.0
gulp-mocha	^7.0.2

Peer Dependencies

ID	Version
postcss	^8.1.4

Keywords

postcss css postcss-plugin flexbugs flexbox flex

Details

npm

2026-02-24 14:02:56 +00:00

0

Luis Rudge

Project Site

MIT

latest

3.2 KiB

Assets (1)

postcss-flexbugs-fixes-5.0.2.tgz 3.2 KiB

Versions (1) View all

5.0.2 2026-02-24