csslibify

v0.5.1

Published

2 years ago

一个库化CSS样式的工具

Downloads

0High
0Medium
0Low

rpose

csslib css library css tool

csslibify

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

`目的`

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

`功能`

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

Install

npm i csslibify

API

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

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

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}
*/

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}
*/

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}
*/

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}
*/

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}
*/

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}
*/

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}
*/

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}
*/

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}
*/

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} }
*/

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} }
*/

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}
}
*/

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}
}
*/

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}
}
*/

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
  }
}
*/

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}
*/

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}
}
*/

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}
*/

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}
*/

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)

*/

let csslibify = require('csslibify');
let csslib = csslibify('pkg');
csslib.imp('a{size:1} .foo div{size:2}');

let result = csslib.get( 'div' );

/*
// result:(blank)

*/

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}
*/

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} }
*/

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");
  }

*/

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`

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

csslibify

目的

功能

Install

API

Sample

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

Links

`目的`

`功能`

`Links`