关于 emotion 初步使用的笔记

群里听达峰大大讲 Strikingly 用的是 emotion 的方案, 留了个心眼.
以前查看过一些 CSS in JS 方案, 大体看过 emotion, 不知道哪一个比较好:
https://github.com/MicheleBer...
可是既然 Strikingly 有实践经验, 并且当时也是我看中的几个之一, 以为比较安全.
https://github.com/emotion-js...

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

import styled, { css } from 'react-emotion';

const Container = styled('div')`
  background: #333;
`
const myStyle = css`
  color: rebeccapurple;
`
const app = () => (
<Container>
  <p className={myStyle}>Hello World</p>
</Container>
);

而后生成的 CSS 是基于 hash 的 className 包裹的, 插入在 <head/> 当中的.
这样运行时甚至热替换时没有什么问题的.

另外一个关注的方面是打包, 也就是将 CSS 从 js 种抽出来从新变成 CSS 文件.
emotion 给出的方案是用 babel plugin 强行生成文件, 而后配合 Webpack 打包:
https://github.com/emotion-js...
没有看具体的细节, 从原理上是行得通的.

最近整理了一个 demo 出来, 完成了基本的开发和打包功能:
https://github.com/minimal-xy...

有些坑吧, 好比打包过程生成的 CSS 文件是写在 src/ 当中的, 和源码在一块儿,
有点脏, 我后面写了 xarg 的命令行强行在打包结束给删除掉了.

关于编辑器的支持, 目前我用的是 VS Code, 须要语法高亮和自动提示,
https://marketplace.visualstu...
https://github.com/Microsoft/...
注意后面这个 plugin 须要本地安装 TypeScript 而且切换版本到 2.6.1+, 我配置成功了.
另外因为前面搭配了 Prettier, 自动格式化也是搞定的.

另外一个担忧的问题是对 CSS 某些兄弟元素/父子元素的选择关系,
尚未足够深刻去挖这些问题. 大体上以为是能够可靠的方案. 后面要等 Strikingly 分享...

CSS 抽取问题

相关的内容在 issues 上询问了做者, 关于 emotion 抽取成独立文件的细节.
使用当中发现一个问题, 就是有些样式在抽象以后丢失了.
代码时存在的, 问题在于代码 className 的顺序再也不影响样式了,
动态运行的 emotion 会根据 className 顺序来处理样式的合并, 抽取后无法生效.
维护团队给出的方案是不抽取... 性能能够接受的状况下我以为还好...
可是总归是一个坑.