postcss-rename-classname v0.1.0

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