群里听达峰大大讲 Strikingly 用的是 emotion 的方案, 留了个心眼.

之前查看过一些 CSS in JS 方案, 大致看过 emotion, 不知道哪个比较好:但是既然 Strikingly 有实践经验, 而且当时也是我看中的几个之一, 觉得比较安全.

从写法上看, 侵入性比较小, 直接就是 className:

import styled, { css } from 'react-emotion';const Container = styled('div')`  background: #333;`const myStyle = css`  color: rebeccapurple;`const app = () => (
      
     
Hello World
    );

然后生成的 CSS 是基于 hash 的 className 包裹的, 插入在 <head/> 当中的.

这样运行时甚至热替换时没有什么问题的.

另一个关注的方面是打包, 也就是将 CSS 从 js 种抽出来重新变成 CSS 文件.

emotion 给出的方案是用 babel plugin 强行生成文件, 然后配合 Webpack 打包:没有看具体的细节, 从原理上是行得通的.

最近整理了一个 demo 出来, 完成了基本的开发和打包功能:

有些坑吧, 比如打包过程生成的 CSS 文件是写在 src/ 当中的, 和源码在一起,

有点脏, 我后面写了 xarg 的命令行强行在打包结束给删除掉了.

关于编辑器的支持, 目前我用的是 VS Code, 需要语法高亮和自动提示,

注意后面这个 plugin 需要本地安装 TypeScript 并且切换版本到 2.6.1+, 我配置成功了.另外由于前面搭配了 Prettier, 自动格式化也是搞定的.

另一个担心的问题是对 CSS 某些兄弟元素/父子元素的选择关系,

还没有足够深入去挖这些问题. 大致上觉得是可以可靠的方案. 后面要等 Strikingly 分享...

CSS 抽取问题

相关的内容在 上询问了作者, 关于 emotion 抽取成独立文件的细节.

使用当中发现一个问题, 就是有些样式在抽象之后丢失了.代码时存在的, 问题在于代码 className 的顺序不再影响样式了,动态运行的 emotion 会根据 className 顺序来处理样式的合并, 抽取后没法生效.维护团队给出的方案是不抽取... 性能可以接受的情况下我觉得还好...但是总归是一个坑.