From 60d05c154e9c357bcc2e43f1c0f4010becab576c Mon Sep 17 00:00:00 2001
From: ice breaker <1324318532@qq.com>
Date: Sun, 6 Aug 2023 14:13:21 +0800
Subject: [PATCH] feat: Feature/configurable (#19)
* feat(postcss): add disabled option
* chore: add cascadeLayers and isPseudoClass options
* chore: prepare for async load config
* chore: commit weapp-pandacss.config.ts
* chore: add escapePredicate options
* chore: add codegen escape
* feat: cli add init command
* test: add init config test case
* refactor: move common fn to utils
* chore: add predicate function
* chore: demo add config file
* docs: update advanced config file
* chore: add ts docs json for generate docs
* docs: update to latest
* fix: remove test snap panda config cwd
* chore: remove snap cwd path
---
README.md | 49 +-
docs/assets/search.js | 2 +-
docs/index.html | 19 +-
docs/interfaces/ICreateContextOptions.html | 26 +-
docs/interfaces/IPostcssPluginOptions.html | 44 +-
docs/interfaces/UserConfig.html | 86 +++
docs/modules.html | 2 +
docs/types/PandacssConfigFileOptions.html | 3 +-
examples/pnpm-lock.yaml | 703 +++++++++++++-----
examples/taro-app-linaria/package.json | 2 +-
examples/taro-app-vue3/package.json | 4 +-
.../taro-app-vue3/weapp-pandacss.config.ts | 3 +
examples/taro-app/package.json | 4 +-
examples/taro-app/src/app.ts | 1 +
examples/taro-app/src/pages/index/index.tsx | 13 +
examples/taro-app/weapp-pandacss.config.ts | 9 +
.../uni-app-vue3/src/pages/index/index.vue | 7 +-
.../uni-app-vue3/weapp-pandacss.config.ts | 3 +
package.json | 12 +-
pnpm-lock.yaml | 387 ++++++----
src/cli.ts | 11 +-
src/constants.ts | 4 +
src/core/codegen.ts | 44 +-
src/core/config.ts | 24 +-
src/core/context.ts | 37 +-
src/core/index.ts | 5 +
src/core/logger.ts | 2 -
src/defaults.ts | 10 +-
src/index.ts | 2 +-
src/postcss.ts | 170 +----
src/postcss/plugins.ts | 228 ++++++
src/types.ts | 40 +-
src/utils.ts | 42 ++
test/__snapshots__/config.test.ts.snap | 48 ++
test/__snapshots__/postcss.test.ts.snap | 20 +
test/codegen.test.ts | 3 +-
test/config.test.ts | 20 +-
.../config/0.default/weapp-pandacss.config.ts | 13 +
.../1.disabled/weapp-pandacss.config.ts | 20 +
test/context.test.ts | 54 +-
test/fixtures/.gitignore | 2 +
test/fixtures/app/.gitignore | 1 -
test/fixtures/app/weapp-pandacss.config.ts | 5 +
test/fixtures/app0/panda.config.ts | 16 +
test/fixtures/app1/panda.config.ts | 16 +
test/postcss.test.ts | 45 ++
test/util.ts | 12 +-
test/utils.test.ts | 10 +
tsconfig.docs.json | 6 +
49 files changed, 1731 insertions(+), 558 deletions(-)
create mode 100644 docs/interfaces/UserConfig.html
create mode 100644 examples/taro-app-vue3/weapp-pandacss.config.ts
create mode 100644 examples/taro-app/weapp-pandacss.config.ts
create mode 100644 examples/uni-app-vue3/weapp-pandacss.config.ts
create mode 100644 src/constants.ts
create mode 100644 src/core/index.ts
create mode 100644 src/postcss/plugins.ts
create mode 100644 src/utils.ts
create mode 100644 test/__snapshots__/config.test.ts.snap
create mode 100644 test/config/0.default/weapp-pandacss.config.ts
create mode 100644 test/config/1.disabled/weapp-pandacss.config.ts
create mode 100644 test/fixtures/.gitignore
create mode 100644 test/fixtures/app/weapp-pandacss.config.ts
create mode 100644 test/fixtures/app0/panda.config.ts
create mode 100644 test/fixtures/app1/panda.config.ts
create mode 100644 test/utils.test.ts
create mode 100644 tsconfig.docs.json
diff --git a/README.md b/README.md
index fce0a28..4af016f 100644
--- a/README.md
+++ b/README.md
@@ -20,7 +20,8 @@
- [1. 回到 package.json 添加生成脚本](#1-回到-packagejson-添加生成脚本)
- [跨平台注意事项](#跨平台注意事项)
- [小程序预览事项](#小程序预览事项)
- - [配置项](#配置项)
+ - [高级配置文件](#高级配置文件)
+ - [配置项列表](#配置项列表)
- [参考示例](#参考示例)
- [Bugs \& Issues](#bugs--issues)
@@ -243,7 +244,45 @@ npm run prepare
这是因为 `panda` 生成的文件 `cva.mjs` 使用了 [`Optional chaining (?.)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)语法，这个语法小程序原生不支持，这时候可以开启勾选 `将JS编译成ES5` 功能再进行预览，或者使用 `babel` 预先进行处理再上传预览。
-## 配置项
+## 高级配置文件
+
+你可以通过 `npx weapp-panda init` 命令在当前目录下创建一个 `weapp-pandacss.config.ts` 配置文件。
+
+这个配置文件可以用来控制转义代码的生成和一部分 `postcss` 插件的行为。
+
+```ts
+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` 来生成新的注入转义代码。
+
+## 配置项列表
详见
@@ -251,9 +290,11 @@ npm run prepare
[taro-react-pandacss-template](https://github.com/sonofmagic/taro-react-pandacss-template)
-[Taro-app](./examples/taro-app)
+[Taro-app react](./examples/taro-app)
+
+[Taro-app vue3](./examples/taro-app-vue3)
-[Uni-app vue3 vite](./examples/uni-app-vue3/)
+[Uni-app vue3 vite](./examples/uni-app-vue3)
## Bugs & Issues
diff --git a/docs/assets/search.js b/docs/assets/search.js
index bd7f73b..209893d 100644
--- a/docs/assets/search.js
+++ b/docs/assets/search.js
@@ -1 +1 @@
-window.searchData = JSON.parse("{\"rows\":[{\"kind\":4194304,\"name\":\"PandacssConfigFileOptions\",\"url\":\"types/PandacssConfigFileOptions.html\",\"classes\":\"\"},{\"kind\":256,\"name\":\"ICreateContextOptions\",\"url\":\"interfaces/ICreateContextOptions.html\",\"classes\":\"\"},{\"kind\":1024,\"name\":\"pandaConfig\",\"url\":\"interfaces/ICreateContextOptions.html#pandaConfig\",\"classes\":\"\",\"parent\":\"ICreateContextOptions\"},{\"kind\":256,\"name\":\"IPostcssPluginOptions\",\"url\":\"interfaces/IPostcssPluginOptions.html\",\"classes\":\"\"},{\"kind\":1024,\"name\":\"selectorReplacement\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions\"},{\"kind\":65536,\"name\":\"__type\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement.__type\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions.selectorReplacement\"},{\"kind\":1024,\"name\":\"cascadeLayers\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement.__type.cascadeLayers\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions.selectorReplacement.__type\"},{\"kind\":1024,\"name\":\"universal\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement.__type.universal\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions.selectorReplacement.__type\"},{\"kind\":1024,\"name\":\"root\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement.__type.root\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions.selectorReplacement.__type\"},{\"kind\":1024,\"name\":\"removeNegationPseudoClass\",\"url\":\"interfaces/IPostcssPluginOptions.html#removeNegationPseudoClass\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions\"}],\"index\":{\"version\":\"2.3.9\",\"fields\":[\"name\",\"comment\"],\"fieldVectors\":[[\"name/0\",[0,19.924]],[\"comment/0\",[]],[\"name/1\",[1,19.924]],[\"comment/1\",[]],[\"name/2\",[2,19.924]],[\"comment/2\",[]],[\"name/3\",[3,19.924]],[\"comment/3\",[]],[\"name/4\",[4,19.924]],[\"comment/4\",[]],[\"name/5\",[5,19.924]],[\"comment/5\",[]],[\"name/6\",[6,19.924]],[\"comment/6\",[]],[\"name/7\",[7,19.924]],[\"comment/7\",[]],[\"name/8\",[8,19.924]],[\"comment/8\",[]],[\"name/9\",[9,19.924]],[\"comment/9\",[]]],\"invertedIndex\":[[\"__type\",{\"_index\":5,\"name\":{\"5\":{}},\"comment\":{}}],[\"cascadelayers\",{\"_index\":6,\"name\":{\"6\":{}},\"comment\":{}}],[\"icreatecontextoptions\",{\"_index\":1,\"name\":{\"1\":{}},\"comment\":{}}],[\"ipostcsspluginoptions\",{\"_index\":3,\"name\":{\"3\":{}},\"comment\":{}}],[\"pandaconfig\",{\"_index\":2,\"name\":{\"2\":{}},\"comment\":{}}],[\"pandacssconfigfileoptions\",{\"_index\":0,\"name\":{\"0\":{}},\"comment\":{}}],[\"removenegationpseudoclass\",{\"_index\":9,\"name\":{\"9\":{}},\"comment\":{}}],[\"root\",{\"_index\":8,\"name\":{\"8\":{}},\"comment\":{}}],[\"selectorreplacement\",{\"_index\":4,\"name\":{\"4\":{}},\"comment\":{}}],[\"universal\",{\"_index\":7,\"name\":{\"7\":{}},\"comment\":{}}]],\"pipeline\":[]}}");
\ No newline at end of file
+window.searchData = JSON.parse("{\"rows\":[{\"kind\":4194304,\"name\":\"PandacssConfigFileOptions\",\"url\":\"types/PandacssConfigFileOptions.html\",\"classes\":\"\"},{\"kind\":256,\"name\":\"ICreateContextOptions\",\"url\":\"interfaces/ICreateContextOptions.html\",\"classes\":\"\"},{\"kind\":1024,\"name\":\"escapePredicate\",\"url\":\"interfaces/ICreateContextOptions.html#escapePredicate\",\"classes\":\"\",\"parent\":\"ICreateContextOptions\"},{\"kind\":1024,\"name\":\"pandaConfig\",\"url\":\"interfaces/ICreateContextOptions.html#pandaConfig\",\"classes\":\"\",\"parent\":\"ICreateContextOptions\"},{\"kind\":1024,\"name\":\"log\",\"url\":\"interfaces/ICreateContextOptions.html#log\",\"classes\":\"\",\"parent\":\"ICreateContextOptions\"},{\"kind\":256,\"name\":\"IPostcssPluginOptions\",\"url\":\"interfaces/IPostcssPluginOptions.html\",\"classes\":\"\"},{\"kind\":1024,\"name\":\"disabled\",\"url\":\"interfaces/IPostcssPluginOptions.html#disabled\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions\"},{\"kind\":1024,\"name\":\"selectorReplacement\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions\"},{\"kind\":65536,\"name\":\"__type\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement.__type\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions.selectorReplacement\"},{\"kind\":1024,\"name\":\"cascadeLayers\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement.__type.cascadeLayers\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions.selectorReplacement.__type\"},{\"kind\":1024,\"name\":\"universal\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement.__type.universal\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions.selectorReplacement.__type\"},{\"kind\":1024,\"name\":\"root\",\"url\":\"interfaces/IPostcssPluginOptions.html#selectorReplacement.__type.root\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions.selectorReplacement.__type\"},{\"kind\":1024,\"name\":\"removeNegationPseudoClass\",\"url\":\"interfaces/IPostcssPluginOptions.html#removeNegationPseudoClass\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions\"},{\"kind\":1024,\"name\":\"cascadeLayersPluginOptions\",\"url\":\"interfaces/IPostcssPluginOptions.html#cascadeLayersPluginOptions\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions\"},{\"kind\":1024,\"name\":\"isPseudoClassPluginOptions\",\"url\":\"interfaces/IPostcssPluginOptions.html#isPseudoClassPluginOptions\",\"classes\":\"\",\"parent\":\"IPostcssPluginOptions\"},{\"kind\":256,\"name\":\"UserConfig\",\"url\":\"interfaces/UserConfig.html\",\"classes\":\"\"},{\"kind\":1024,\"name\":\"postcss\",\"url\":\"interfaces/UserConfig.html#postcss\",\"classes\":\"\",\"parent\":\"UserConfig\"},{\"kind\":1024,\"name\":\"context\",\"url\":\"interfaces/UserConfig.html#context\",\"classes\":\"\",\"parent\":\"UserConfig\"}],\"index\":{\"version\":\"2.3.9\",\"fields\":[\"name\",\"comment\"],\"fieldVectors\":[[\"name/0\",[0,25.39]],[\"comment/0\",[]],[\"name/1\",[1,25.39]],[\"comment/1\",[]],[\"name/2\",[2,25.39]],[\"comment/2\",[]],[\"name/3\",[3,25.39]],[\"comment/3\",[]],[\"name/4\",[4,25.39]],[\"comment/4\",[]],[\"name/5\",[5,25.39]],[\"comment/5\",[]],[\"name/6\",[6,25.39]],[\"comment/6\",[]],[\"name/7\",[7,25.39]],[\"comment/7\",[]],[\"name/8\",[8,25.39]],[\"comment/8\",[]],[\"name/9\",[9,25.39]],[\"comment/9\",[]],[\"name/10\",[10,25.39]],[\"comment/10\",[]],[\"name/11\",[11,25.39]],[\"comment/11\",[]],[\"name/12\",[12,25.39]],[\"comment/12\",[]],[\"name/13\",[13,25.39]],[\"comment/13\",[]],[\"name/14\",[14,25.39]],[\"comment/14\",[]],[\"name/15\",[15,25.39]],[\"comment/15\",[]],[\"name/16\",[16,25.39]],[\"comment/16\",[]],[\"name/17\",[17,25.39]],[\"comment/17\",[]]],\"invertedIndex\":[[\"__type\",{\"_index\":8,\"name\":{\"8\":{}},\"comment\":{}}],[\"cascadelayers\",{\"_index\":9,\"name\":{\"9\":{}},\"comment\":{}}],[\"cascadelayerspluginoptions\",{\"_index\":13,\"name\":{\"13\":{}},\"comment\":{}}],[\"context\",{\"_index\":17,\"name\":{\"17\":{}},\"comment\":{}}],[\"disabled\",{\"_index\":6,\"name\":{\"6\":{}},\"comment\":{}}],[\"escapepredicate\",{\"_index\":2,\"name\":{\"2\":{}},\"comment\":{}}],[\"icreatecontextoptions\",{\"_index\":1,\"name\":{\"1\":{}},\"comment\":{}}],[\"ipostcsspluginoptions\",{\"_index\":5,\"name\":{\"5\":{}},\"comment\":{}}],[\"ispseudoclasspluginoptions\",{\"_index\":14,\"name\":{\"14\":{}},\"comment\":{}}],[\"log\",{\"_index\":4,\"name\":{\"4\":{}},\"comment\":{}}],[\"pandaconfig\",{\"_index\":3,\"name\":{\"3\":{}},\"comment\":{}}],[\"pandacssconfigfileoptions\",{\"_index\":0,\"name\":{\"0\":{}},\"comment\":{}}],[\"postcss\",{\"_index\":16,\"name\":{\"16\":{}},\"comment\":{}}],[\"removenegationpseudoclass\",{\"_index\":12,\"name\":{\"12\":{}},\"comment\":{}}],[\"root\",{\"_index\":11,\"name\":{\"11\":{}},\"comment\":{}}],[\"selectorreplacement\",{\"_index\":7,\"name\":{\"7\":{}},\"comment\":{}}],[\"universal\",{\"_index\":10,\"name\":{\"10\":{}},\"comment\":{}}],[\"userconfig\",{\"_index\":15,\"name\":{\"15\":{}},\"comment\":{}}]],\"pipeline\":[]}}");
\ No newline at end of file
diff --git a/docs/index.html b/docs/index.html
index efcfee9..178c9a5 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -38,7 +38,8 @@ weapp-pandacss
跨平台注意事项
小程序预览事项
-配置项
+高级配置文件
+配置项列表
参考示例
Bugs & Issues
@@ -109,10 +110,16 @@ weapp-pandacss
当然你恢复到小程序版本也只需要执行 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 预先进行处理再上传预览。
-详见 https://sonofmagic.github.io/weapp-pandacss/
+你可以通过 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
-Taro-app
-Uni-app vue3 vite
+Taro-app react
+Taro-app vue3
+Uni-app vue3 vite
目前这个插件正在快速的开发中，如果遇到 Bug 或者想提出 Issue
欢迎提交到此处
@@ -160,7 +167,8 @@