postcss-rename-classname
v0.1.0
Published
change css classname
Downloads
8
Readme
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