postcss7-overflow-overlay-pollify

postcss7-overflow-overlay-pollify JS library on GitHub postcss7-overflow-overlay-pollify JS library on npm Download postcss7-overflow-overlay-pollify JS library

一款自动为带有 'overflow: overlay' 属性的元素添加 'overflow: auto' 属性的 PostCSS7 插件

Version 1.0.0-alpha.1 License MIT Vulnerabilities 0
postcss7-overflow-overlay-pollify has no homepage
postcss7-overflow-overlay-pollify JS library on GitHub
postcss7-overflow-overlay-pollify JS library on npm
Download postcss7-overflow-overlay-pollify JS library
Keywords
postcss7csspostcss7-pluginpostcss7-overflow-overlay-pollifyoverflowoverlayscrollchrome
<script type="module"> import postcss7OverflowOverlayPollify from 'https://cdn.jsdelivr.net/npm/postcss7-overflow-overlay-pollify@1.0.0-alpha.1/+esm' </script>
Learn more

PostCSS7 Overflow Overlay Pollify

一款自动为带有 'overflow: overlay' 属性的元素添加 'overflow: auto' 属性的 [PostCSS7] 插件。

/* Input example */
.foo {
  overflow: overlay;
}

/* Output example */
.foo {
  overflow: overlay;
  overflow: auto;
}

🍳 使用方法

Step 1: 安装依赖:

npm install --save-dev postcss postcss7-overflow-overlay-pollify

Step 2: 配置插件:

module.exports = {
  plugins: {
+    'postcss7-overflow-overlay-pollify': {},
  },
};

📝 效果展示

/* Input */
.foo {
  overflow-x: overlay;
}

/* Output */
.foo {
  overflow-x: overlay;
  overflow-x: auto;
}
/* Input */
.foo {
  overflow: hidden overlay;
}

/* Output */
.foo {
  overflow: hidden overlay;
  overflow: hidden auto;
}
/* Input */
.foo {
  overflow: overlay !important;
}

/* Output */
.foo {
  overflow: overlay !important;
  overflow: auto !important;
}
/* Input */
.foo {
  overflow: overlay;
  overflow: scroll;
}

/* Output */
.foo {
  overflow: overlay;
  overflow: auto;
  overflow: scroll;
}
/* Input */
.foo {
  overflow: overlay;
  overflow: overlay;
}

/* Output */
.foo {
  overflow: overlay;
  overflow: auto;
  overflow: overlay;
}