关于 emotion 初步使用的笔记

 约 4 分钟

群里听达峰大大讲 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 顺序来处理样式的合并, 抽取后没法生效.
维护团队给出的方案是不抽取... 性能可以接受的情况下我觉得还好...
但是总归是一个坑.

阅读 3.2k

推荐阅读
题叶
用户专栏

ClojureScript 爱好者.

493 人关注
248 篇文章
专栏主页
目录