CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-postcss-flexbugs-fixes

PostCSS plugin that automatically fixes common CSS flexbox bugs documented in the flexbugs project

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview
Eval results
Files

PostCSS Flexbugs Fixes

PostCSS Flexbugs Fixes is a PostCSS plugin that automatically fixes common CSS flexbox bugs documented in the flexbugs project. The plugin addresses three specific flexbox issues: unitless flex-basis values being ignored (bug 4), the default flex value changes (bug 6), and flex-basis not supporting calc() expressions (bug 8.1.a).

Package Information

  • Package Name: postcss-flexbugs-fixes
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install postcss-flexbugs-fixes

Core Imports

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

For ES modules:

import flexbugs from 'postcss-flexbugs-fixes';

Basic Usage

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

// Use with default settings (all bugs enabled)
postcss([flexbugs()])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

// Disable specific bug fixes
postcss([flexbugs({ bug6: false, bug81a: false })])
  .process(css, { from: undefined })
  .then(result => {
    console.log(result.css);
  });

Capabilities

Plugin Factory Function

Creates a PostCSS plugin instance with configurable bug fixes.

/**
 * Creates a PostCSS plugin to fix common flexbox bugs
 * @param {Object} [opts] - Configuration options
 * @param {boolean} [opts.bug4=true] - Fix unitless flex-basis values (flexbug #4)
 * @param {boolean} [opts.bug6=true] - Fix default flex value changes (flexbug #6)
 * @param {boolean} [opts.bug81a=true] - Fix flex-basis calc() support (flexbug #8.1.a)
 * @returns {Object} PostCSS plugin object
 */
function flexbugsPlugin(opts) {
  // Returns PostCSS plugin object
}

// Export as default
module.exports = flexbugsPlugin;

// PostCSS plugin marker
module.exports.postcss = true;

Options Interface:

interface FlexbugsOptions {
  /** Enable/disable fix for flexbug #4 - unitless flex-basis values ignored */
  bug4?: boolean;
  /** Enable/disable fix for flexbug #6 - default flex value changes */
  bug6?: boolean;
  /** Enable/disable fix for flexbug #8.1.a - flex-basis doesn't support calc() */
  bug81a?: boolean;
}

Note: The source code uses the option name bug81a, not bug8a as mentioned in some project documentation.

Plugin Object Interface:

interface PostCSSPlugin {
  /** Plugin identifier */
  postcssPlugin: string;
  /** Plugin processor function that walks CSS declarations */
  Once: (css: PostCSS.Root, postcss: PostCSS.Helpers) => void;
}

Usage Examples

Fix unitless flex-basis values (Bug 4):

Input CSS:

.foo { flex: 1; }
.bar { flex: 1 1; }
.foz { flex: 1 1 0; }
.baz { flex: 1 1 0px; }

Output CSS (when Bug 6 is also enabled, which is default):

.foo { flex: 1 1; }
.bar { flex: 1 1; }
.foz { flex: 1 0; }
.baz { flex: 1 1; }

Output CSS (when Bug 6 is disabled):

.foo { flex: 1 1 0%; }
.bar { flex: 1 1 0%; }
.foz { flex: 1 1 0%; }
.baz { flex: 1 1 0%; }

Fix default flex value changes (Bug 6):

Input CSS:

.element { flex: 1; }
.element2 { flex: 1 0 0%; }

Output CSS:

.element { flex: 1 1; }
.element2 { flex: 1 0; }

Note: Bug 6 removes the 0% flex-basis when present to work around Safari issues. When Bug 6 is combined with Bug 4 (default), Bug 4 first normalizes unitless basis values to 0%, then Bug 6 removes any 0% basis values entirely.

Fix calc() in flex-basis (Bug 8.1.a):

Input CSS:

.element { flex: 1 0 calc(1vw - 1px); }

Output CSS:

.element {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(1vw - 1px);
}

Selective bug fixing:

// Only fix bug 4 and 6, disable bug 8.1.a
postcss([flexbugs({ bug81a: false })])
  .process(css, { from: undefined });

// Only fix bug 6
postcss([flexbugs({ bug4: false, bug81a: false })])
  .process(css, { from: undefined });

// Disable all fixes
postcss([flexbugs({ bug4: false, bug6: false, bug81a: false })])
  .process(css, { from: undefined });

Integration Examples

With PostCSS CLI:

{
  "postcss": {
    "plugins": {
      "postcss-flexbugs-fixes": {}
    }
  }
}

With Webpack:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  ['postcss-flexbugs-fixes', { bug6: false }]
                ]
              }
            }
          }
        ]
      }
    ]
  }
};

With Gulp:

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

gulp.task('css', () => {
  return gulp.src('src/*.css')
    .pipe(postcss([flexbugs()]))
    .pipe(gulp.dest('dist/'));
});

Install with Tessl CLI

npx tessl i tessl/npm-postcss-flexbugs-fixes
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/postcss-flexbugs-fixes@5.0.x
Publish Source
CLI
Badge
tessl/npm-postcss-flexbugs-fixes badge