postcss-flexbugs-fixes

What is postcss-flexbugs-fixes?

The postcss-flexbugs-fixes package is a PostCSS plugin that attempts to fix known flexbox issues in different browsers. It provides a set of workarounds for various flexbox bugs, making it easier to ensure consistent behavior across different environments.

What are postcss-flexbugs-fixes's main functionalities?

Fixing flexbox bugs

This feature automatically applies fixes for known flexbox bugs. By including the plugin in your PostCSS configuration, it will process your CSS and apply necessary workarounds to ensure consistent flexbox behavior across different browsers.

module.exports = {
  plugins: [
    require('postcss-flexbugs-fixes')
  ]
};

Integration with PostCSS

This feature demonstrates how to integrate postcss-flexbugs-fixes with PostCSS programmatically. It shows how to use the plugin within a PostCSS processing pipeline to apply flexbox bug fixes to your CSS.

const postcss = require('postcss');
const flexbugsFixes = require('postcss-flexbugs-fixes');

postcss([flexbugsFixes])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

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.

README

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 0%; }
.bar { flex: 1 1 0%; }
.foz { flex: 1 1 0%; }
.baz { flex: 1 1 0%; }

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')]);

See PostCSS docs for examples for your environment.

Changelog

3.2.0

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