关于 emotion 初步使用的笔记

derek_334892 发布于2019-08-29 13:47 / 2590人阅读

摘要：群里听达峰大大讲用的是的方案留了个心眼之前查看过一些方案大致看过不知道哪个比较好但是既然有实践经验而且当时也是我看中的几个之一觉得比较安全从写法上看侵入性比较小直接就是然后生成的是基于的包裹的插入在当中的这样运行时甚至热替换时没有什么问

群里听达峰大大讲 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 = () => (

  Hello World

);

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

另一个关注的方面是打包, 也就是将 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 顺序来处理样式的合并, 抽取后没法生效.
维护团队给出的方案是不抽取... 性能可以接受的情况下我觉得还好...
但是总归是一个坑.

云服务器 GPU云服务器关于jdk的使用关于宏的使用关于使用linux的相关软件关于ecs云服务器的使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112705.html

在2018年你应该知道的9个关于CSS组件化的JS库

摘要：解析时，样式组件将生成唯一的类名，并将注入。在星，由创建，被定义为组件样式的工具链。它具有可预测的组合，以避免的特殊性问题。将该项目定义为组件样式通过优雅灵感解决，占地面积小小于，以及出色的性能。一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身，使用JavaScript以声明性和可维护的方式描述样式。所以，我们已经列出了一些有用的项目来开始。您还可以阅读这个推荐的讨...

zhiwei 2019-08-02 10:58 评论0 收藏0
在2018年你应该知道的9个关于CSS组件化的JS库

摘要：解析时，样式组件将生成唯一的类名，并将注入。在星，由创建，被定义为组件样式的工具链。它具有可预测的组合，以避免的特殊性问题。将该项目定义为组件样式通过优雅灵感解决，占地面积小小于，以及出色的性能。一个特别有趣的概念是在CSS中使用JS将CSS抽象到组件级别本身，使用JavaScript以声明性和可维护的方式描述样式。所以，我们已经列出了一些有用的项目来开始。您还可以阅读这个推荐的讨...

DDreach 2019-08-30 15:54 评论0 收藏0