Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: several pseudo class and combinator compat #11

Merged
merged 10 commits into from
Jul 29, 2023
Merged

fix: several pseudo class and combinator compat #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
70314d3
chore(deps): upgrade panda css to 0.9
sonofmagic Jul 29, 2023
2130c4d
fix: replace :root :host to page tag selector
sonofmagic Jul 29, 2023
db479f8
fix: expand universal selector
sonofmagic Jul 29, 2023
45a3b09
fix: raw :root and :host without where
sonofmagic Jul 29, 2023
d09d432
chore: taro demo update
sonofmagic Jul 29, 2023
0222cab
feat: expand is pseudo
sonofmagic Jul 29, 2023
718e0c4
fix: ~ combinator compat
sonofmagic Jul 29, 2023
f4d68ee
chore: upgrade taro demo
sonofmagic Jul 29, 2023
5d8bb40
chore: commit uni-app case
sonofmagic Jul 29, 2023
8513afd
docs: update
sonofmagic Jul 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .vscode/launch.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"name": "[uni-app] dev:mp-weixin",
"request": "launch",
"type": "node-terminal",
"cwd": "${workspaceRoot}/examples/taro-app"
"cwd": "${workspaceRoot}/examples/uni-app-vue3"
},
{
"command": "npm run test:dev",
Expand Down
23 changes: 18 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,9 @@
- [panda css 安装和配置](#panda-css-安装和配置)
- [weapp-pandacss 配置](#weapp-pandacss-配置)
- [跨平台注意事项](#跨平台注意事项)
- [小程序预览事项](#小程序预览事项)
- [配置项](#配置项)
- [参考项目](#参考项目)
- [参考示例](#参考示例)
- [Bugs \& Issues](#bugs--issues)

## 介绍
Expand All @@ -29,7 +30,7 @@ npm install -D @pandacss/dev weapp-pandacss # 或者 yarn / pnpm
npx panda init
```

接着你按照 `panda css` 的安装教程，按照你不同的框架走一遍: <https://panda-css.com/docs/installation/postcss>
接着你按照 `panda css` 的安装教程，按照你不同的框架注册方式走一遍: <https://panda-css.com/docs/installation/postcss>

配置好了之后，此时 `h5` 平台已经生效了，接下来进入 `weapp-pandacss` 的插件配置，不用担心，也非常简单。

Expand Down Expand Up @@ -59,7 +60,13 @@ module.exports = {

> 注意这里必须用 `&&` 而不能用 `&`，`&` 任务执行会并行不会等待，而 `&&` 会等待前一个执行完成再执行后一条命令

然后，你再手动执行一下 `npm run prepare`, 重新生成 `styled-system`，`panda css` 就兼容小程序平台啦，是不是很简单?
然后，你再手动执行一下

```bash
npm run prepare
```

重新生成 `styled-system`，这样 `weapp-pandacss` 相关的转义代码就被注入进去了，此时 `panda css` 生成的类就兼容小程序平台啦，是不是很简单?

## 跨平台注意事项

Expand All @@ -73,11 +80,17 @@ module.exports = {

当然你恢复到小程序版本也只需要 `weapp-panda codegen`

## 小程序预览事项

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

这是因为 `panda` 生成的文件 `cva.mjs` 使用了 [`Optional chaining (?.)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)语法，这个语法小程序原生不支持，这时候可以开启勾选 `将JS编译成ES5` 功能再进行预览，或者使用 `babel` 预先进行转义再上传预览。

## 配置项

详见 [types](./src//types.ts)
详见 [types](./src/types.ts)

## 参考项目
## 参考示例

[Taro-app](./examples/taro-app)

Expand Down
2 changes: 1 addition & 1 deletion examples/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
"license": "ISC",
"devDependencies": {
"@csstools/postcss-cascade-layers": "^4.0.0",
"@pandacss/dev": "^0.8.0",
"@pandacss/dev": "^0.9.0",
"weapp-ide-cli": "^1.0.1"
},
"dependencies": {
Expand Down
Loading