fliptheweb / postcss-flow-root

Fallback for display: flow-root

Use display: flow-root without a mess today, just add fallback by that simple plugin. Article about flow-root..

Transform that

.selector {
  display: flow-root;
}

to

.selector {
  display: flow-root;
  column-count: 1;
}

Installation

yarn add --dev postcss-flow-root

or

npm install --save-dev postcss-flow-root

Usage

Add postcss-flow-root to your plugins list, for example in webpack:

postcss: function () {
  return [
    require('postcss-flow-root')(options)
  ];
}

Be careful: use plugin before autoprefixer.

Options

You can choose fallback for emulate flow-root. There is a sandbox with all methods by @SelenIT.

{
  fallback: 'column-count' (default) | 'clearfix' | 'overflow'
}

• column-count - create block formatting context for element, browser support (IE10+);
• clearfix - add clearfix by pseudo-element;
• overflow - use overflow: hidden fallback.