@alicloud/css-var-utils NPM

@alicloud/css-var-utils

css-var-utils 帮助你管理 css-var 的 fallback value，生成的代码类似于background-color: var(--btn-bg-color, #ccc)。因此组件使用者可以通过定义--btn-bg-color来覆盖这个颜色。

css-var-utils 帮助你使用 Typescript 来定义、扩展、使用 Css Variables 主题：

定义一套【css-var 主题】，其中包含 css-var 的名称、默认值、描述
覆盖【css-var 主题】中的默认值，得到一套新的主题
- 比如原本的【css-var 主题】是一套亮色主题，你可以通过覆盖其中的默认值，扩展出一套暗色主题的变量定义
在 js（如styled-components）中使用【css-var 主题】中的变量
多主题 UI 组件的开发：
- 组件提供者可以定义多套主题变量，给消费者选择
- 组件消费者可以选择自己需要的主题
- 最终的变量生效顺序是：运行时主题变量的实际值--primary-color > 组件消费者选择的主题中的变量默认值 > 组件提供者选择的主题中的变量默认值
最终为变量使用所生成的代码类似于color: var(--primary-color, <<default value from theme>>)。因此这个变量依然可以感知到环境的 css-var，环境可以通过--primary-color来动态改变这个颜色（发挥 css-var 的动态性）
- 我们也会允许变量使用者关闭 css-var 的动态性

好处：

规范地定义、维护样式变量
- 提高代码可维护性，并且有优秀的 Typescript 支持，下面会介绍
- 有了规范，未来就可以通过可视化的方式配置主题中的各种变量，轻松定制主题
只需要在一个地方维护 css-var 的默认值，而不需要在每次使用 css-var 的时候都编写默认值
- 过去，如果你在多个地方都使用了var(--primary-color, #005AA5)这个变量，你需要在每次使用的时候都带上后面的默认值#005AA5
- 使用 css-var-utils 以后，这个默认值只维护在主题定义的地方，在使用变量的时候会自动帮你加上默认值
css-var-utils 能够充分受益于 Typescript 类型检查：
- 你在对主题变量进行覆盖、使用的时候，能享受到 css-var 名称补全和检查
  - css-var 的名称一般很长，容易写错。因此名称补全和检查能够提高开发效率、减少 bug
- Typescript 能够汇总对同一个 css-var 的所有引用，因此支持：
  - 跳转到定义
  - Find All References: 找到某个 css-var 在哪里被定义、覆盖、使用，并且快速跳转到对应代码
  - 一键重命名 css-var

使用场景：让你的 UI 组件支持多种主题（比如亮/暗色）。提高主题变量的维护效率。

TODO:

3 years ago

3 years ago