PowCSS 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
PowCSS 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
PowCSS 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 Web应用开发CSS框架
开源组织
地区 国产
投 递 者 喻恒春
适用人群 未知
收录时间 2017-11-06

软件简介

PowCSS

PowCSS 是个 CSS 预处理工具. 特征:

混合 CSS, JavaScript 缩进语法
编译结果是原生 JavaScript 函数

用 PowCSS 写 CSS 才够原生

image

工作原理:

针对 CSS 语法特点对源码进行 Tree 结构转化, 丢弃行尾注释, 续行被拼接为单行
编译插件对节点进行编译并返回编译后的代码, 嵌套占位符为 '...'
依据 Tree 结构, 把这些代码拼接(嵌套)到一起

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) => {...}) // 插件只是补全了 ctx., 也可以在源码中直接这样写.

step 3

let x = [1,2,3];
ctx.each(x, (n, i) => {
  // 嵌套占位符被 'col-${n}' 生成的代码替换, 'col-${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' 生成的代码替换, 没有产生新的嵌套占位符
  ctx.decl('color', 'red');
  ctx.close();
})

最终的编译结果:

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 补全最后一条语句
}

编译插件被称作 Compiler, ctx 被称作 Context, 它们配套使用且完成真正的构建行为.

install

nodejs 环境

yarn add powcss

for gulp see gulp-powcss

浏览器环境

usage

nodejs 环境, 演示 runkit

const powcss = require('powcss');

// const context = require('powcss/lib/context');

let ctx = powcss().run(`
.class
  color: green
`);
// 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  {object}   n  解析后节点树中的一个节点对象
 * @param  {number}   i  节点 n 在 ns 中的序号
 * @param  {object[]} ns 节点 n 所在的兄弟节点集合
 * @return {?string}  js 编译节点 n 产生的 js 源码, 最多包含一个嵌套占位符
 */
compile(n, i, ns){}

PowCSS 实现的 Compiler 直接使用原生 JS 语法, 不对语法进行分析.

参见 API

提示: 把 CSS 当作 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 负责提供生成和维护 CSS 规则的基本方法, 值表达式由配套的 Compiler 生成.

PowCSS 实现的 Context 维护规则的 open 和 close 等操作, 并负责处理 '&' 占位符.

参见 API

License

MIT License <https://gitee.com/powjs/powcss/blob/master/LICENSE>

展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论

点击加入讨论🔥(1)
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
1 评论
3 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部