postcss-filter-plugins

Exclude/warn on duplicated PostCSS plugins.

postcss-filter-plugins

Exclude/warn on duplicated PostCSS plugins.

Install

With npmdo:

$ npm install postcss-filter-plugins --save

Example

Note that this plugin does not actually transform your CSS; instead, it ensures that plugins in the PostCSS instance are not duplicated. It is intended to be used by plugin packs such as cssnanoor cssnext.

var counter = postcss.plugin('counter', function () {
    return function (css) {
        css.eachDecl('foo', function (decl) {
            let value = parseInt(decl.value, 10);
            value += 1;
            decl.value = String(value);
        });
    }
});

var css = 'h1 { foo: 1 }';
var out = postcss([
    filter(),
    counter(),
    counter()
]).process(css).css;

console.log(out);
// => h1 { foo: 2 }
// Note that you will get a PostCSS warning in the message registry

API

filterPlugins([options])

options

direction

Type: string
Default: 'both'

Pass 'forward', 'backward', or 'both'to customise the direction in which the plugin will look in the plugins array. See the testsfor examples on how this works.

postcss([ filter({
    direction: 'forward'
}) ]).process(css).css);
exclude

Type: array
Default: [] (empty)

Plugins that should be excluded from the filter. Pass an array of plugin names.

postcss([ filter({
    exclude: ['postcss-cssstats']
}) ]).process(css).css);
silent

Type: boolean
Default: false

Set this to true to disable the plugin from emitting any PostCSS warnings.

postcss([ filter({
    silent: true
}) ]).process(css).css);
template

Type: function
Default: format function

This function will be passed each PostCSS plugin object. You are expected to return a string from each call, which is then used to warn the user about her duplicated plugins.

postcss([ filter({
    template: function (plugin) {
        return 'Duplicate plugin found: ' + plugin.postcssPlugin;
    }
}) ]).process(css).css);

Usage

See the PostCSS documentationfor examples for your environment.

Contributors

Thanks goes to these wonderful people (emoji key):


Ben Briggs

💻📖👀 ⚠️

Maxime Thirouin

📖

Andreas Lind

💻

Ryan Zimmerman

💻

This project follows the all-contributorsspecification. Contributions of any kind welcome!

License

MIT © Ben Briggs

HomePage

https://github.com/postcss/postcss-filter-plugins

Repository

postcss/postcss-filter-plugins


上一篇:前端与算法 leetcode 66. 加一
下一篇:uxun-cssnano

相关推荐

  • 走进AngularJs之过滤器(filter)详解

    过滤器(filter)正如其名,作用就是接收一个输入,通过某个规则进行处理,然后返回处理后的结果。主要用在数据的格式化上,例如获取一个数组中的子集,对数组中的元素进行排序等。

    3 年前
  • 详解webpack之scss和postcss-loader的配置

    本文介绍了详解webpack之scss和postcssloader的配置,分享给大家,具体如下: 开始 首先配置postcssloader 在这里postcss是为了来给浏览器内核添加私有前...

    2 年前
  • 详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例

    Angularjs内置的过滤器(filter)为我们的数据信息格式化提供了比较强大的功能,比如:格式化时间,日期、格式化数字精度、语言本地化、格式化货币等等。但这些过滤器一般都是在VIEW中使用的,比...

    3 年前
  • 详解AngularJS中$filter过滤器使用(自定义过滤器)

    1.内置过滤器 2.自定义过滤器     套用上面的格式定义两个简单的自定义过滤器一个带条件的,一个不带条件的。 (1)【不带条件】,功能:固定转换(有时候项目中会遇到角色代号,门店编码...

    3 年前
  • 记一个复杂组件(Filter)的从设计到开发

    此文前端框架使用 rax(https://github.com/alibaba/rax),全篇代码暂未开源(待开源) 原文链接地址:Nealyang/PersonalBlog(https://gi...

    10 个月前
  • 解决antd-mobile样式被postcss转换的问题

    思路是在webpack里postcssloader不对库的文件起作用。经过尝试配置如下: 显示就是正常的了。...

    1 年前
  • 移动端ios屏幕滚动时filter发生抖动闪烁bug

    做项目时候有些内容(一段文字)需要高斯模糊效果,就用了如下html和css: //html //css 安卓上一切正常,ios经测试下发现屏幕滚动时候出现抖动闪烁甚至空白的问题,百度谷歌...

    1 年前
  • 生动形象解释forEach、filter、map、some、every、find、reduce间的区别

    前言 从最开始学的for循环遍历方法,到后来层出不穷的各种遍历方法,其实最大的区别就是应用场景的不同。 我们最需要记住的就是,什么情况下用哪一种方法比较合适。 从挑土豆开始 图片描述(htt...

    1 年前
  • 每日 30 秒之 filterNonUnique

    简介 取出对象数组中唯一的数据集。 代码分析 代码使用了 来进行遍历数组并获取过滤,通过 和 来对数据项进行判断是否重复出现过。 使用场景 从后端或者数据库分别获取到参加不同...

    1 年前
  • 日拱一卒-如何注册全局filter

    实际上非常简单,只需要在Vue实例化之前注册即可。 当然,这种写法比较丑陋,还是要模块化地来做,也就是写成以下样子:filters.js: main.js: 之后创建了V...

    2 个月前

官方社区

扫码加入 JavaScript 社区