❤
npm
Sign UpSign In

csslibify

0.5.1 • Public • Published

csslibify

这是一个库化CSS样式的工具


NPM version License

目的

  • 方便的使用已有样式，建立样式库
  • 按需取得相关样式 （样式会被拆解，需另行用工具合并优化）
  • 避免样式类名冲突

功能

  • 创建样式库，可指定包名（命名空间）
  • 把CSS或CSS文件导入到样式库（样式将被拆解）
  • 样式库可多次导入不同CSS（自动去除重复）
  • 样式库导入时自动复制CSS中的url资源
  • 按需取样式，支持类名条件
  • 按需取样式，支持自定义类名和动画名的修改
  • 按需取样式，支持标签名条件
  • 按需取样式，支持选项条件atpage取打印样式
  • 按需取样式，指定标签名条件时自动取得不含标签名和类名选择器的通配符样式

Install

npm i csslibify

API

  • csslibify(pkgname) - 创建指定包名（命名空间）的样式库
    pkgname - 包名 （默认用于类名前缀，指定时需自行注意正确性）
  • csslib.imp(cssOrFile, opts) - 把CSS或CSS文件导入到样式库
    cssOrFile - 样式文件或内容 （必须输入）
    opts.basePath - 样式所在目录 （文件时默认为文件所在目录，内容时默认当前目录）
    opts.assetsPath - 修改后的url资源目录 （默认复制资源后使用相同路径即url中无目录）
  • csslib.get(...args) - 按需取样式
    args - 字符串或选项对象，参数顺序无关
    字符串时，以.开头的视为类名条件，否则视为标签名条件
    选项对象时，opts.rename - 类名修改函数（第一参数为包名，第二参数为不含.的类名，返回新类名），默认为${pkg}---{classname}
    选项对象时，opts.atpage - 是否包含@page样式，默认false
    选项对象时，opts.atviewport - 是否包含@viewport样式，默认false
    选项对象时，opts.strict - 是否严格匹配，默认true。（非严格匹配时任意一个标签或类名属于被查询范围，就按匹配成功处理）
    选项对象时，opts.universal - 是否包含通用样式（不含类名和标签名的通用样式，如通配符选择器属性选择器等），默认false
  • csslib.has(classname) - 判断样式库中是否有指定样式类名

Sample

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}');
csslib.imp('div{color:red}');
csslib.imp('*{size:16}');
let css = csslib.get('.baz');
//=>  .thepkg---baz{size:13}
 
css = csslib.get('.foo', '.bar');
//=>  .thepkg---foo{size:11} .thepkg---bar{size:12} .thepkg---foo > .thepkg---bar{color:red}
 
css = csslib.get( 'div', '.foo', '.bar');
//=>  .thepkg---foo{size:11} .thepkg---bar{size:12} .thepkg---foo > .thepkg---bar{color:red} div{color:red}
 
css = csslib.get( 'div', '.foo', '.bar', {universal: true});
//=>  .thepkg---foo{size:11} .thepkg---bar{size:12} .thepkg---foo > .thepkg---bar{color:red} div{color:red} *{size:16}

结果示例（详细参考测试例子）

01 新建样式库并指定库名，可有效避免类名冲突，也便于复用 
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}
*/
02 新建样式库不指定库名，便于直接使用样式 
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}
*/
03 自动识别重复导入 
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}
*/
04 样式类按需引用-例子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}
*/
05 样式类按需引用-例子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}
*/
06 样式类按需引用-例子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}
*/
07 样式类按需引用(含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}
*/
08 样式类按需引用(含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}
*/
09 样式类按需引用(含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}
*/
10 多选择器自动拆分引用-例子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}
*/
11 多选择器自动拆分引用-例子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---foo{size:1}
.pkg---bar{size:1}
.pkg---bar{color:red}
*/
12 多选择器自动拆分引用（@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} }
*/
13 多选择器自动拆分引用（@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---foo{margin: 0} }
@media (min-width: 768px) { .pkg---bar{margin: 0} }
*/
14 含动画keyframes时动画名一起修改-例子1 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp(`
  @keyframes foo{
    0% {background:red}
    to {background:yellow}
  }
  .bar {
    animation:foo 5s;
  }
  .baz {
    size:14;
  }
`);
 
let result = csslib.get( '.bar' );
 
/*
// result:
 
.pkg---bar{animation:pkg---foo 5s}
@keyframes pkg---foo{
  0% {background:red}
  to {background:yellow}
}
*/
15 含动画keyframes时动画名一起修改-例子2 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp(`
  @keyframes foo{
    0% {background:red}
    to {background:yellow}
  }
  .bar {
    animation-name:foo;
    animation-duration: 5s;
  }
  .baz {
    size:14;
  }
`);
 
let result = csslib.get( '.bar', '.baz' );
 
/*
// result:
 
.pkg---bar{
  animation:pkg---foo;
  animation-duration: 5s
}
.pkg---baz{size:14}
@keyframes pkg---foo{
  0% {background:red}
  to {background:yellow}
}
*/
16 含动画keyframes时动画名一起修改-例子3 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp(`
  @keyframes foo{
    0% {background:red}
    to {background:yellow}
  }
  @media (min-width: 768px) {
    .bar {
      animation:foo 5s;
    }
  }
  .baz {
    size:14;
  }
`);
 
let result = csslib.get( '.bar' );
 
/*
// result:
 
@keyframes pkg---foo{
  0% {background:red}
  to {background:yellow}
}
@media (min-width: 768px) {
  .pkg---bar{animation:pkg---foo 5s}
}
*/
17 含动画keyframes时动画名一起修改-例子4 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp(`
  @keyframes foo{
    0% {background:red}
    to {background:yellow}
  }
  @media (min-width: 768px) {
    .bar {
      animation-name:foo;
      animation-duration: 5s;
    }
  }
  .baz {
    size:14;
  }
`);
 
let result = csslib.get( '.bar', '.baz' );
 
/*
// result:
 
.pkg---baz{size:14}
@keyframes pkg---foo{
  0% {background:red}
  to {background:yellow}
}
@media (min-width: 768px) {
  .pkg---bar{
    animation:pkg---foo;
    animation-duration: 5s
  }
}
*/
18 含动画keyframes，用不到则不会取动画样式 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp(`
  @keyframes foo{
    0% {background:red}
    to {background:yellow}
  }
  .bar {
    animation-name:foo;
    animation-duration: 5s;
  }
  .baz {
    size:14;
  }
`);
 
let result = csslib.get( '.baz' );
 
/*
// result:
 
.pkg---baz{size:14}
*/
19 含动画keyframes，@supports嵌套规则使用动画 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp(`
  @keyframes foo{
    0% {background:red}
    to {background:yellow}
  }
  @supports (position: sticky) {
    .bar {
      animation:foo 5s;
    }
  }
  .baz {
    size:14;
  }
`);
 
let result = csslib.get( '.bar' );
 
/*
// result:
 
@keyframes pkg---foo {
  0% {background: red}
  to {background: yellow}
}
@supports (position: sticky) {
  .pkg---bar{animation:pkg---foo 5s}
}
*/
20 自定义修改类名 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('.foo{size:1}');
 
let result = csslib.get( '.foo', {rename: (pkg,name) => name + '-----' + pkg} );
 
/*
// result:
 
.foo-----pkg{size:1}
*/
21 指定标签名按需引用样式-例子1 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('a{size:1} .foo div{size:2}');
 
let result = csslib.get( 'a' );
 
/*
// result:
 
a{size:1}
*/
22 指定标签名按需引用样式@media-例子2 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('@media (min-width: 768px) { a{size:1} .foo div{size:2} }');
 
let result = csslib.get( 'div' );
 
/*
// result:(blank)
 
*/
23 指定标签名按需引用样式-例子3 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('a{size:1} .foo div{size:2}');
 
let result = csslib.get( 'div' );
 
/*
// result:(blank)
 
*/
24 同时指定类名标签名按需引用样式-例子1 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('a{size:1} .foo div{size:2}');
 
let result = csslib.get( 'div', '.foo' );
 
/*
// result:
 
.pkg---foo div{size:2}
*/
25 同时指定类名标签名按需引用样式-例子2 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('@media (min-width: 768px) { a{size:1} .foo div{size:2} }');
 
let result = csslib.get( 'div', '.foo' );
 
/*
// result:
 
@media (min-width: 768px) { .pkg---foo div{size:2} }
*/
26 自动引用@font-face样式 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp(`
  @font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url("../webfonts/fa-solid-900.eot");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
         url("../webfonts/fa-solid-900.woff2") format("woff2"),
     url("../webfonts/fa-solid-900.woff") format("woff"),
     url("../webfonts/fa-solid-900.ttf") format("truetype"),
     url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
  }
 
  .fa,
  .fas {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  }
`);
 
let result = csslib.get( '.fa' );
 
/*
// result: (注：实际url资源会被复制并哈希化文件名，默认路径改为资源文件的绝对路径)
 
  .pkg---fa {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
  }
 
  @font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    font-display: auto;
    src: url("../webfonts/fa-solid-900.eot");
    src: url("../webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
         url("../webfonts/fa-solid-900.woff2") format("woff2"),
     url("../webfonts/fa-solid-900.woff") format("woff"),
     url("../webfonts/fa-solid-900.ttf") format("truetype"),
     url("../webfonts/fa-solid-900.svg#fontawesome") format("svg");
  }
 
*/
27 指定标签名条件时自动取得不含标签名和类名选择器的通配符样式 
let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('article,aside { display: block; }  [title]{color:red} * {box-sizing: border-box;}');
 
let result = csslib.get( 'article' );
 
/*
// result:
 
* {box-sizing: border-box;}
[title]{color:red}
article { display: block; }
*/

Links

Readme

Keywords

Package Sidebar

Install

npm i csslibify

Repository

github.com/gotoeasy/csslibify

Homepage

github.com/gotoeasy/csslibify/blob/master/README.md

Weekly Downloads

14

Version

0.5.1

License

Apache-2.0

Unpacked Size

92.7 kB

Total Files

27

Last publish

Collaborators

  • rpose
Try on RunKit
Report malware