小程序 CSS-in-JS 和原子化的另一种抉择

  • 小程序 CSS-in-JS 和原子化的另一种抉择

    • 介绍

    • 疾速开始

      • pandacss 装置和配置

        • 0. 装置和初始化 pandacss
        • 1. 配置 postcss
        • 2. 查看你的 panda.config.ts
        • 3. 批改 package.json 脚本
        • 4. 全局 css 注册 pandacss
        • 5. 配置的优化与别名

      • weapp-pandacss 配置

        • 0. 回到 postcss 进行注册
        • 1. 回到 package.json 增加生成脚本
    • 跨平台注意事项
    • 小程序预览事项
    • 高级配置文件
    • 配置项列表
    • 参考示例
    • Bugs \& Issues

介绍

之前咱们写 tarojs 的利用的时候，想用CSS-in-JS 解决方案，就应用社区计划里举荐的 linaria, 这里我举荐另一种解决方案 pandacss。

pandacss 是个优良的 CSS-in-JS 编译时框架，相比 linaria，它的配置更加简略，智能提醒好，开发者体验也更好。

而且它也排汇了许多 tailwindcss 的长处，咱们能够自在的配置咱们的主题与款式，且原子化的类名也更容易进行自由组合。

weapp-pandacss 就是让你在小程序开发中应用它。

疾速开始

pandacss 装置和配置

0. 装置和初始化 pandacss

首先咱们须要把 @pandacss/dev 这些都装置和配置好，这里咱们以 tarojs 我的项目为例：

npm install -D @pandacss/dev weapp-pandacss postcss # 或者 yarn / pnpmnpx panda init

此时会在当前目录生成一个 panda.config.ts 和一个蕴含大量文件的 styled-system。

panda.config.ts 是 pandacss 的配置文件，styled-system 文件夹里的是 pandacss 的运行时 js。

把 styled-system 退出咱们的 .gitignore 中去。

# .gitignore+ styled-system
1. 配置 postcss

接着在根目录里，增加一个 postcss.config.cjs 文件，写入以下代码注册 pandacss:

module.exports = {  plugins: {    '@pandacss/dev/postcss': {}  }}
2. 查看你的 panda.config.ts

生成的配置文件大略长上面这样，尤其留神 include 是用来通知 pandacss 从哪些文件中提取原子类的，所以这个配置肯定要精确

import { defineConfig } from "@pandacss/dev"export default defineConfig({  // 小程序不须要  preflight: process.env.TARO_ENV === 'h5',  // ⚠️这里，如果你应用 vue，记得把 vue 文件格式包含进来！！！  include: ["./src/**/*.{js,jsx,ts,tsx}"],  exclude: [],  theme: {    extend: {}  },  outdir: "styled-system",})
3. 批改 package.json 脚本

而后，咱们增加下方 prepare 脚本在咱们的 package.json 的 scripts 块中:

{  "scripts": {+    "prepare": "panda codegen",  }}

这样咱们每次从新 npm i/yarn/pnpm i 的时候，都会执行这个办法，从新生成 styled-system，当然你也能够间接通过 npm run prepare 间接执行这个脚本。

4. 全局 css 注册 pandacss

而后在咱们的全局款式文件 src/app.scss 中注册 pandacss:

@layer reset, base, tokens, recipes, utilities;

配置好了之后，此时 pandacss 在 h5 平台曾经失效了，你能够 npm run dev:h5 在 h5 平台初步应用了，然而为了开发体验，咱们还有一些优化项要做。

5. 配置的优化与别名

来到根目录的 tsconfig.json 增加:

{  "compilerOptions": {    "paths": {      "@/*": [        "src/*"      ],+      "styled-system/*": [+        "styled-system/*"+      ]    }  },  "include": [    "./src",    "./types",    "./config",+    "styled-system"  ],}

接着来到 config/index.ts 增加 alias(参考链接):

import path from 'path'{  alias: {    'styled-system': path.resolve(__dirname, '..', 'styled-system')  },}

这样咱们就不须要应用相对路径来应用 pandacss 了，同时 ts 智能提醒也有了，你能够这样应用它:

import { View, Text } from "@tarojs/components";import { css } from "styled-system/css";const styles = css({  bg: "yellow.200",  rounded: "9999px",  fontSize: "90px",  p: "10px 15px",  color: "pink.500",});export default function Index() {  return (    <View className={styles}>      <Text>Hello world!</Text>    </View>  );}
此局部参考的官网链接 https://panda-css.com/docs/installation/postcss

接下来进入 weapp-pandacss 的插件配置，不必放心，相比后面那些繁琐的步骤，这个可简略多了。

weapp-pandacss 配置

记得装置好 weapp-pandacss !
0. 回到 postcss 进行注册

回到我的项目根目录的 postcss.config.cjs 注册 weapp-pandacss，增加以下配置:

module.exports = {  plugins: {    '@pandacss/dev/postcss': {},+   'weapp-pandacss/postcss': {}  }}
1. 回到 package.json 增加生成脚本

而后去 package.json 你增加 prepare 脚本的中央，加点代码

{  "scripts": {-    "prepare": "panda codegen",+    "prepare": "panda codegen && weapp-panda codegen",  }}
留神这里必须用 && 而不能用 &，& 工作执行会并行不会期待，而 && 会期待前一个执行实现再执行后一条命令

而后，你再手动执行一下

npm run prepare

来从新生成 styled-system, 此时你会发现 pandacss 的命令行输入中多了 2 行:

✔️ `src/styled-system/css`: the css function to author styles✔️ `src/styled-system/tokens`: the css variables and js function to query your tokens✔️ `src/styled-system/patterns`: functions to implement apply common layout patterns✔️ `src/styled-system/jsx`: styled jsx elements for react+ ✔️ `src/styled-system/weapp-panda`: the core escape function for weapp+ ✔️ `src/styled-system/helpers.mjs`: inject escape function into helpers

这代表着小程序相干的本义逻辑曾经被注入进去，此时 panda css 生成的类就兼容小程序平台啦，是不是很简略?

当然为了避免你配置失败，我也给出了参考我的项目: taro-react-pandacss-template 不便进行排查纠错。

跨平台注意事项

你可能同时开发 小程序 和 h5 平台，然而你发现应用 weapp-pandacss 之后，h5 平台仿佛就不行了？

这时候你能够这样配置：

process.env.TARO_ENV === 'h5' 的时候，不去加载 weapp-pandacss/postcss (依据环境变量动静加载 postcss 插件)

同时你也能够执行 weapp-panda rollback 把 css 办法进行回滚到最原始适配 h5 平台的状态。

当然你复原到小程序版本也只须要执行 weapp-panda codegen 就会从新注入了。

小程序预览事项

当小程序预览时会呈现 Error: 非法的文件，错误信息：invalid file: pages/index/index.js, 565:24, SyntaxError: Unexpected token . if (variants[key]?.[value]) 谬误。

这是因为 panda 生成的文件 cva.mjs 应用了 Optional chaining (?.)语法，这个语法小程序原生不反对，这时候能够开启勾选 将JS编译成ES5 性能再进行预览，或者应用 babel 事后进行解决再上传预览。

高级配置文件

你能够通过 npx weapp-panda init 命令在当前目录下创立一个 weapp-pandacss.config.ts 配置文件。

这个配置文件能够用来管制本义代码的生成和一部分 postcss 插件的行为。

import { defineConfig } from 'weapp-pandacss'export default defineConfig({  postcss: {    // 本义插件是否失效，这只能管制外围插件的失效状况,而外围插件只是一部分    // 如果你想让整个插件真正不失效，请在 `postcss.config.cjs` 里进行动静加载判断    disabled: false,    // 数组merge默认行为是间接concat 合并，所以传一个空数组是应用的默认数组    // 本义替换对象    selectorReplacement: {      root: [],      universal: [],      cascadeLayers: 'a'    },    removeNegationPseudoClass: true  },  // 生成上下文  context: {    // 本义注入判断条件，更改后须要从新生成代码    escapePredicate: `process.env.TARO_ENV !== 'h5' && process.env.TARO_ENV !== 'rn'`,    // 插件的 pandaConfig 寻找配置    pandaConfig: {      cwd: process.cwd(),      file: 'path/to/your-panda-config-file'    }  }})

当然，你更改相干的配置项之后，要从新执行一下 npm run prepare 来生成新的注入本义代码。

配置项列表

详见 https://sonofmagic.github.io/weapp-pandacss/

参考示例

taro-react-pandacss-template

Bugs & Issues

目前这个插件正在疾速的开发中，如果遇到 Bug 或者想提出 Issue

欢送提交到此处