postcss-rename-classname

修改CSS类名的postcss插件，仅针对classname

安装

npm i postcss-rename-classname

使用方法参考测试代码

const test = require('ava');
const postcss = require('postcss');
const renamePlugin = require('./');
 
test('样式表修改类名测试', async t => {
 
    let options = { rename: name => 'my-' + name };
    let postcssOpts = { from: undefined };
 
    let css, rs;
 
    // 没有传选项的时候
    css = '.a {}';
    rs = await postcss([renamePlugin()]).process(css, postcssOpts);
    t.is(rs.css, '.a {}');
    t.is(rs.mapping.a, 'a');
 
    // 选项没有rename转换函数的时候
    css = '.a {}';
    rs = await postcss([renamePlugin({})]).process(css, postcssOpts);
    t.is(rs.css, '.a {}');
    t.is(rs.mapping.a, 'a');
 
    // 简单转换
    css = '.a {}';
    rs = await postcss([renamePlugin(options)]).process(css, postcssOpts);
    t.is(rs.css, '.my-a {}');
    t.is(rs.mapping.a, 'my-a');
 
    // 转换多个
    css = '.a {} .b{} div .c-d {}';
    rs = await postcss([renamePlugin(options)]).process(css, postcssOpts);
    console.info(rs)
    t.is(rs.css, '.my-a {} .my-b{} div .my-c-d {}');
    t.is(rs.mapping.a, 'my-a');
    t.is(rs.mapping.b, 'my-b');
    t.is(rs.mapping['c-d'], 'my-c-d');
 
    // 稍微复杂点
    css = 'a [title] p > .a {} .b{} div .c-d {} a{} div #id > .nnn, div + span{} a:link {color: #FF0000}';
    rs = await postcss([renamePlugin(options)]).process(css, postcssOpts);
    console.info(rs)
    t.is(rs.css, 'a [title] p > .my-a {} .my-b{} div .my-c-d {} a{} div #id > .my-nnn, div + span{} a:link {color: #FF0000}');
    t.is(rs.mapping.a, 'my-a');
    t.is(rs.mapping.b, 'my-b');
    t.is(rs.mapping['c-d'], 'my-c-d');
 
});
 

Links

• npm-packages https://github.com/gotoeasy/npm-packages