共计 4555 个字符,预计需要花费 12 分钟才能阅读完成。
小程序 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 / pnpm
npx 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
欢送提交到此处