npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

more-css

v0.12.0

Published

a css pre-compiler&agressive compressor

Downloads

188

Readme

A css pre-compiler&radical-compressor

相对于less,more的命名意思是比原本的css多做了一点点。

NPM version Build Status Coverage Status Dependency Status

more定位于普通产品简化开发位置,而非广义CSS下游框架重量级功能。more的设计严格遵循css标准规范并进行扩展。

目前提供层级功能、子文件拆分(实际上就是原标准的@import语法)、层级变量、自动拆分字符串、深继承、函数混入、四则运算;还有css激进压缩器。 对于没用到这些功能的css代码,more会智能识别不变更。more不会动普通的css代码。

详细见:https://github.com/army8735/more/wiki/文档 English:https://github.com/army8735/more/wiki/document

build目录下为nodejs环境的module模块。 web目录下为书写符合AMD/CMD规范的js文件。

more的核心理念是:原有的浏览器标准不修改,编译后的代码严格保持调试一致,行数不变更,文件对应关系不改变,满足GoToDefine的先决条件。

##INSTALL

npm install more-css

##API

More

  • constructor(code:String = '') 传入需要预编译的code
  • parse(code:String = null, type:int = More.INDEPENDENT):String 预编译code,可以为空,否则会覆盖构造函数里传入的code;type为处理@import类型
  • parseFile(file:String, type:int = More.INDEPENDENT):String 转换css文件;type为处理@import类型
  • type详见import高级用法
  • ast():Object 返回解析后的语法树
  • tokens():Array<Object> 返回解析后的词法单元序列
  • imports():Array<String> 返回解析后的@import文件列表
  • vars(data:Object):Object 设置/读取变量哈希
  • styles(data:Object):Object 设置/读取样式哈希
  • fns(data:Object):Object 设置/读取方法哈希
  • path(file:String):String 设置/读取文件路径
  • config(str:String):void 预编译一段css并将其结果作为此more对象之后预编译时的全局变量
  • configFile(file:String):void 同上,传入一个文件的路径
  • clean():void 清空设置

静态属性

  • parse(code:String = null, type:int = More.INDEPENDENT):String 快捷方式预编译,无需new步骤
  • parseFile(file:String, type:int = More.INDEPENDENT):String 快捷方式预编译文件,无需new步骤
  • suffix(str:String):String 全局设置/读取文件后缀名,默认css
  • root(str:String):String 全局设置/读取相对本地文件的根路径
  • vars(data:Object):Object 全局设置/读取变量哈希
  • styles(data:Object):Object 全局设置/读取样式哈希
  • fns(data:Object):Object 全局设置/读取方法哈希
  • path(file:String):String 全局设置/读取文件路径
  • config(str:String):void 预编译一段css并将其结果作为之后全局预编译时的全局变量
  • configFile(file:String):void 同上,传入一个文件的路径
  • clean():void 清空全局设置
  • addKeyWord(kw:String/Array<String>):void 添加未知的css属性关键字以支持分析
  • compress(code:String, radical:Boolean = false):String 基于clean-css压缩css代码,radical表明是否使用激进安全算法
  • compress(code:String, options:Object = { processImport: false }, radical:Boolean = false):String 同上,增加options选项,传给clean-css
  • map(data:Object/Function):Object/Function 全局设置/读取映射表,用以将@import的文件名作匹配替换处理
  • INDEPENDENT:int = 0 类型,不处理import的文件,改写文件结尾为css
  • INCLUDE:int = 1 类型,处理import的文件,共享作用域,不改写文件结尾
  • COMPLEX:int = 2 类型,处理import的文件,隔离作用域,不改写文件结尾

Demo

  • demo目录下是一个web端的实时转换例子,本地浏览需要npm install安装依赖
  • 依赖的语法解析器来自于homunculus:https://github.com/army8735/homunculus
  • 在线地址:http://army8735.me/more/demo/
  • 压缩率对比:http://goalsmashers.github.io/css-minification-benchmark/

License

[MIT License]