New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details → →

Book a Demo Sign in

csslibify

Package Overview

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

csslibify

一个库化CSS样式的工具

latest

Source

npm

Version: 0.5.1

Version published: 7 years ago

Maintainers: 1

Created: 7 years ago

Source

csslibify

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

`目的`

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

`功能`

创建样式库，可指定包名（命名空间）
把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`

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

Keywords

csslib

css library

css tool

FAQs

What is csslibify?

Is csslibify well maintained?

Package last updated on 16 Sep 2019

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

csslibify

csslibify

功能

Install

API

Sample

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

Links

Keywords

Related posts

Axios Maintainer Confirms Social Engineering Attack Behind npm Compromise

Node.js Drops Bug Bounty Rewards After Funding Dries Up

`功能`

`Links`