关于 emotion 初步使用的笔记

2019年9月20日 208次阅读 来源: 题叶

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

    原文作者：题叶
    原文地址: https://segmentfault.com/a/1190000011902085
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞