一个CSS样式库化工具
npm i csslibify
- [x] csslibify(packageName) - create a csslib with package name
- [x] csslib.imp(cssOrFile, opts) - import css or css file into csslib
- [x] csslib.get(...args) - get css from csslib by class names
let csslibify = require('csslibify');
let csslib = csslibify('thepkg');
csslib.imp('.foo{size:11} .bar{size:12} .foo > .bar{color:red}');
csslib.imp('.baz{size:13}');
let css = csslib.get('.bar', '.baz');
//=> .thepkg---bar{size:12} .thepkg---baz{size:13}
css = csslib.get('.foo', '.bar');
//=> .thepkg---foo{size:11} .thepkg---bar{size:12} .thepkg---foo > .thepkg---bar{color:red}新建样式库并指定库名，可有效避免类名冲突，也便于复用
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('.foo{size:1}');
csslib.imp('.bar{size:2}');
let result = csslib.get( '.foo', '.bar' );
/*
// result:
.pkg---foo{size:1}
.pkg---bar{size:2}
*/新建样式库不指定库名，便于直接使用样式
let csslibify = require('csslibify');
let csslib = csslibify();
csslib.imp('.foo{size:1}');
csslib.imp('.bar{size:2}');
let result = csslib.get( '.foo', '.bar' );
/*
// result:
.foo{size:1}
.bar{size:2}
*/自动识别重复导入
let csslibify = require('csslibify');
let csslib = csslibify();
csslib.imp('.foo{size:1}');
csslib.imp('.foo{size:1}');
csslib.imp('.foo{size:1}');
let result = csslib.get( '.foo' );
/*
// result:
.foo{size:1}
*/样式类按需引用-例子1
let csslibify = require('csslibify');
let csslib = csslibify();
csslib.imp('.foo{size:1}');
csslib.imp('.bar{size:2}');
csslib.imp('.baz{size:3}');
let result = csslib.get( '.baz' );
/*
// result:
.baz{size:3}
*/样式类按需引用-例子2
let csslibify = require('csslibify');
let csslib = csslibify();
csslib.imp('.foo{size:1}');
csslib.imp('.bar .baz{size:2}');
csslib.imp('.baz{size:3}');
let result = csslib.get( '.baz' );
/*
// result:
.baz{size:3}
*/样式类按需引用-例子3
let csslibify = require('csslibify');
let csslib = csslibify();
csslib.imp('.foo{size:1}');
csslib.imp('.bar .baz{size:2}');
csslib.imp('.baz{size:3}');
let result = csslib.get( '.bar', '.baz' );
/*
// result:
.bar .baz{size:2}
.baz{size:3}
*/样式类按需引用(含not条件)-例子1
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('.foo{size:1} .bar{size:2} .foo:not(.bar){size:3}');
let result = csslib.get( '.foo' );
/*
// result:
.pkg---foo{size:1}
.pkg---foo:not(.pkg---bar){size:3}
*/样式类按需引用(含not条件)-例子2
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('.foo{size:1} .bar{size:2} .foo:not(.bar){size:3}');
let result = csslib.get( '.bar' );
/*
// result:
.pkg---bar{size:2}
*/样式类按需引用(含not条件)-例子3
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('.foo{size:1} .bar{size:2} .foo:not(.bar){size:3}');
let result = csslib.get( '.foo', '.bar' );
/*
// result:
.pkg---foo{size:1}
.pkg---bar{size:2}
.pkg---foo:not(.pkg---bar){size:3}
*/多选择器自动拆分引用-例子1
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('.foo,.bar{size:1} .bar,.baz{color:red}');
let result = csslib.get( '.foo' );
/*
// result:
.pkg---foo{size:1}
*/多选择器自动拆分引用-例子2
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('.foo,.bar{size:1} .bar,.baz{color:red}');
let result = csslib.get( '.foo', '.bar' );
/*
// result:
.pkg---bar{size:1}
.pkg---foo{size:1}
.pkg---bar{color:red}
*/多选择器自动拆分引用（@media）-例子1
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('@media (min-width: 768px) { .foo,.bar{margin: 0} }');
let result = csslib.get( '.foo' );
/*
// result:
@media (min-width: 768px) { .pkg---foo{margin: 0} }
*/多选择器自动拆分引用（@media）-例子2
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('@media (min-width: 768px) { .foo,.bar{margin: 0} }');
let result = csslib.get( '.foo', '.bar' );
/*
// result:
@media (min-width: 768px) { .pkg---bar{margin: 0} }
@media (min-width: 768px) { .pkg---foo{margin: 0} }
*/-
npm-packageshttps://github.com/gotoeasy/npm-packages