fis3-postprocessor-cssreset

H5适配方案

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前缀将会被自动处理，在批处理属性中无需单独配置