PowCSSCSS 預(yù)處理工具
PowCSS
PowCSS 是個 CSS 預(yù)處理工具. 特征:
混合 CSS, JavaScript 縮進(jìn)語法 編譯結(jié)果是原生 JavaScript 函數(shù)
用 PowCSS 寫 CSS 才夠原生
工作原理:
針對 CSS 語法特點(diǎn)對源碼進(jìn)行 Tree 結(jié)構(gòu)轉(zhuǎn)化, 丟棄行尾注釋, 續(xù)行被拼接為單行 編譯插件對節(jié)點(diǎn)進(jìn)行編譯并返回編譯后的代碼, 嵌套占位符為 '...' 依據(jù) Tree 結(jié)構(gòu), 把這些代碼拼接(嵌套)到一起
PowCSS 的寫法簡單直接, 示例:
let x = [1,2,3];
each(x, (n, i) => {...}) // 源碼中自帶嵌套占位符
col-${n}
color: red
編譯步驟分解:
step 1
let x = [1,2,3]; // JS 原生語法, 原樣保留step 2
let x = [1,2,3];
ctx.each(x, (n, i) => {...}) // 插件只是補(bǔ)全了 ctx., 也可以在源碼中直接這樣寫.step 3
let x = [1,2,3];
ctx.each(x, (n, i) => {
// 嵌套占位符被 'col-${n}' 生成的代碼替換, 'col-${n}' 也產(chǎn)生了新的嵌套占位符
ctx.open(`col-${n}`);
...
ctx.close();
})step 4
let x = [1,2,3];
ctx.each(x, (n, i) => {
ctx.open(`col-${n}`);
// 嵌套占位符被 'color: red' 生成的代碼替換, 沒有產(chǎn)生新的嵌套占位符
ctx.decl('color', 'red');
ctx.close();
})最終的編譯結(jié)果:
function(ctx) {
let x = [1,2,3];
ctx.each(x, (n, i) => {
ctx.open(`col-${n}`);
ctx.decl('color', 'red');
ctx.close();
})
return ctx; // PowCSS 補(bǔ)全最后一條語句
}編譯插件被稱作 Compiler, ctx 被稱作 Context, 它們配套使用且完成真正的構(gòu)建行為.
install
nodejs 環(huán)境
yarn add powcss
for gulp see gulp-powcss
瀏覽器環(huán)境
usage
nodejs 環(huán)境, 演示 runkit
const powcss = require('powcss');
// const context = require('powcss/lib/context');
let ctx = powcss().run(`
.class
color: green
`);
// ctx.toCSS() or ...瀏覽器環(huán)境, 演示 codepen, requirebin
縮進(jìn)語法
PowCSS 支持縮進(jìn)風(fēng)格的 CSS 源碼, 花括號和分號是可選的, 確保正確的縮進(jìn)即可.
/**
* 支持塊注釋, 單行注釋以及行尾注釋, '/*!' 開頭的頂層注釋被保留, 其它注釋被拋棄.
* 兼容 CSS 花括號塊寫法.
*/
/*!
* Reserved comment, top and start with '/*!'
*/
selector1 {
key: val;
}
selector2
key: val
// 續(xù)行符是 '&\,+-/*|=([' 之一
continuation
border: 1px solid \ // 符號 '\' 會被剔除, 其它續(xù)行符會被保留
red
屬性分隔符 ':' 后面必須跟一個空格或換行, 除非該行以 '@' 開頭.
Compiler
編譯器負(fù)責(zé)識別嵌入的 ES6 語句, 并編譯返回 JS 源代碼.
編譯器需要實(shí)現(xiàn) compile 方法作為編譯接口
/**
* 編譯接口
* @param {object} n 解析后節(jié)點(diǎn)樹中的一個節(jié)點(diǎn)對象
* @param {number} i 節(jié)點(diǎn) n 在 ns 中的序號
* @param {object[]} ns 節(jié)點(diǎn) n 所在的兄弟節(jié)點(diǎn)集合
* @return {?string} js 編譯節(jié)點(diǎn) n 產(chǎn)生的 js 源碼, 最多包含一個嵌套占位符
*/
compile(n, i, ns){}PowCSS 實(shí)現(xiàn)的 Compiler 直接使用原生 JS 語法, 不對語法進(jìn)行分析.
參見 API
提示: 把 CSS 當(dāng)作 JavaScript 來寫就對了
源碼中比較容易常犯的錯誤:
// incorrect
if (something)
color: 1px
border: 1px
// correct
if (something) {...}
color: 1px
border: 1px
下面兩種寫法具有相同效果:
if (something) color: 1px border: 1px // same if (something) color: 1px border: 1px
Context
Context 負(fù)責(zé)提供生成和維護(hù) CSS 規(guī)則的基本方法, 值表達(dá)式由配套的 Compiler 生成.
PowCSS 實(shí)現(xiàn)的 Context 維護(hù)規(guī)則的 open 和 close 等操作, 并負(fù)責(zé)處理 '&' 占位符.
參見 API
License
MIT License https://gitee.com/powjs/powcss/blob/master/LICENSE>