PowCSS
PowCSS 是个 CSS 预处理工具. 特征:
混合 CSS, JavaScript 缩进语法
编译结果是原生 JavaScript 函数
用 PowCSS 写 CSS 才够原生
工作原理:
针对 CSS 语法特点对源码进行 Tree 结构转化, 丢弃行尾注释, 续行被拼接为单行
编译插件对节点进行编译并返回编译后的代码, 嵌套占位符为 '...'
依据 Tree 结构, 把这些代码拼接(嵌套)到一起
PowCSS 的写法简单直接, 示例:
let x = [1,2,3];each(x, (n, i) => {...}) // 源码中自带嵌套占位符 col-${n} color: red
编译步骤分解:
step 1
let x = 123; // JS 原生语法, 原样保留
step 2
let x = 123;ctx // 插件只是补全了 ctx., 也可以在源码中直接这样写.
step 3
let x = 123;ctx
step 4
let x = 123;ctx
最终的编译结果:
{ let x = 123; ctx return ctx; // PowCSS 补全最后一条语句}
编译插件被称作 Compiler, ctx 被称作 Context, 它们配套使用且完成真正的构建行为.
install
nodejs 环境
yarn add powcss
浏览器环境
usage
nodejs 环境, 演示 runkit
const powcss = ; // const context = require('powcss/lib/context'); let ctx = ;// ctx.toCSS() or ...
浏览器环境, 演示 codepen, requirebin
缩进语法
PowCSS 支持缩进风格的 CSS 源码, 花括号和分号是可选的, 确保正确的缩进即可.
/** * 支持块注释, 单行注释以及行尾注释, '/*!' 开头的顶层注释被保留, 其它注释被抛弃. * 兼容 CSS 花括号块写法. */ /*! * Reserved comment, top and start with '/*!' */selector1 { key: val;} selector2 key: val // 续行符是 '&\,+-/*|=([' 之一continuation border: 1px solid \ // 符号 '\' 会被剔除, 其它续行符会被保留 red
属性分隔符 ':' 后面必须跟一个空格或换行, 除非该行以 '@' 开头.
Compiler
编译器负责识别嵌入的 ES6 语句, 并编译返回 JS 源代码.
编译器需要实现 compile
方法作为编译接口
/** * 编译接口 * @param * @param * @param * @return */{}
PowCSS 实现的 Compiler 直接使用原生 JS 语法, 不对语法进行分析.
参见 API
提示: 把 CSS 当作 JavaScript 来写就对了
源码中比较容易常犯的错误:
// incorrectif (something) color: 1px border: 1px // correctif (something) {...} color: 1px border: 1px
下面两种写法具有相同效果:
if (something) color: 1pxborder: 1px // same if (something)color: 1pxborder: 1px
Context
Context 负责提供生成和维护 CSS 规则的基本方法, 值表达式由配套的 Compiler 生成.
PowCSS 实现的 Context 维护规则的 open 和 close 等操作, 并负责处理 '&' 占位符.
参见 API
赞助
赞助以帮助 PowCSS 持续更新
License
MIT License https://github.com/powjs/powcss/blob/master/LICENSE