PostCSS Overflow Clip

PostCSS plugin that adds overflow: clip whenever overflow: hidden is used.

If you want fallbacks for overflow: clip, please use https://www.npmjs.com/package/postcss-overflow-fallbacks

.foo {
    overflow-x: clip;
}

.bar {
    overflow: auto hidden;
    overflow-block: hidden;
}

becomes

.foo {
    overflow-x: clip;
}

.bar {
    overflow: auto hidden;
    overflow: auto clip;
    overflow-block: hidden;
    overflow-block: clip;
}

With preserve: false:

.foo {
    overflow-x: clip;
}

.bar {
    overflow: auto hidden;
    overflow-block: hidden;
}

becomes

.foo {
    overflow-x: clip;
}

.bar {
    overflow: auto clip;
    overflow-block: clip;
}

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-overflow-clip

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to [official docs] and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-overflow-clip'),
  ]
}

Options

preserve (default: true) Fully replace hidden with clip without any fallback.