Have ideas to improve npm?Join in the discussion! »

fis3-postprocessor-cssreset

1.0.2 • Public • Published

fis3-postprocessor-cssreset

H5适配方案

bitHound Overall Score

why use fis3-postprocessor-cssreset?

fis3-postprocessor-cssreset 是一个fis3插件,用于将样式表中的px单位转换成rem单位,同时根据指定的dpr参数对数值进行缩放。如在默认参数下,fis3-postprocessor-cssreset将会对源代码进行如下转换。

source code

.container {
    width: 100%;
    height: 80px;
    margin: 0 30px;
    padding: 10px;
    font-size: 28px;
    color: #333;
    border: 1px solid #ddd;
}

output code

.container {
    width: 100%;
    height: 2.5rem;
    margin: 0 0.9375rem;
    padding: 0.3125rem;
    font-size: 14px;
    color: #333;
    border: 1px solid #ddd;
}

fis3-postprocessor-cssreset 支持批量指定属性的转换规则,并且内置了font和border,其中font相关属性只除去dpr值,不转换rem单位,而border相关属性既不除去dpr也不转换单位。你可以通过修改regain参数进行重置。

开始

npm install fis3-postprocessor-cssreset -g
fis.match('*.{less,css}', {
    postprocessor: fis.plugin('css-reset')
});
 

参数介绍

  • rootFontSize 指定根节点字体大小, 默认为 16
fis.match('*.{less,css}', {
    postprocessor: fis.plugin('css-reset', {
        rootFontSize: 10
    })
});
  • ignore 对特定属性设置不转换规则
fis.match('*.{less,css}', {
    postprocessor: fis.plugin('css-reset', {
        ignore: {
            // 只除以dpr不转换单位
            px: [
                'padding-top'
            ],
            // 既不除以dpr也不转换单位
            no: [
                'top',
                'bottom'
            ]
        }
    })
});
  • regain 恢复通过ignore设置的规则
fis.match('*.{less,css}', {
    postprocessor: fis.plugin('css-reset', {
        regain: {
            px: [
                'font*'
            ],
            // 只恢复border-right
            no: [
                'border-right*'
            ]
        }
    })
});

Notice

  • 由于采用单行分析,程序无法准确判断当前行是否被包含在注释中,因此注释中的内容会被无条件转换
  • 规则优先级 /*px*/ > reset > ignore
  • css前缀将会被自动处理,在批处理属性中无需单独配置

Install

npm i fis3-postprocessor-cssreset

DownloadsWeekly Downloads

2

Version

1.0.2

License

MIT

Last publish

Collaborators

  • avatar