關於 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 順序來處理樣式的合併, 抽取後無法生效.
維護團隊給出的方案是不抽取... 性能能夠接受的狀況下我以爲還好...
可是總歸是一個坑.