{"_id":"@carltian/weapp-pandacss","name":"@carltian/weapp-pandacss","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@carltian/weapp-pandacss","version":"1.0.0","packageManager":"pnpm@9.5.0","description":"to use pandacss in weapp, 在小程序里使用 pandacss","author":{"name":"SonOfMagic","email":"qq1324318532@gmail.com"},"license":"MIT","homepage":"https://sonofmagic.github.io/weapp-pandacss/","repository":{"type":"git","url":"git+https://github.com/sonofmagic/weapp-pandacss.git"},"bugs":{"url":"https://github.com/sonofmagic/weapp-pandacss/issues"},"keywords":["panda","pandacss","css-in-js","weapp","wechat","mini","miniprogram","mini app","taro","uni-app","小程序","vite","postcss"],"sideEffects":false,"exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./postcss":{"types":"./dist/postcss.d.ts","import":"./dist/postcss.mjs","require":"./dist/postcss.cjs"},"./*":"./*"},"main":"dist/index.cjs","module":"dist/index.mjs","types":"types/index.d.ts","typesVersions":{"*":{"*":["./dist/*","./dist/index.d.ts"]}},"bin":{"weapp-pandacss":"bin/weapp-pandacss.js","weapp-panda":"bin/weapp-pandacss.js"},"scripts":{"dev":"pnpm clean && pnpm dts && cross-env NODE_ENV=development rollup --config rollup.config.ts --configPlugin typescript -w","build":"cross-env NODE_ENV=production rollup --config rollup.config.ts --configPlugin typescript","build:tsc":"cross-env NODE_ENV=development tsc --build tsconfig.json","dts":"tsc --emitDeclarationOnly -p tsconfig.dts.json","test:dev":"vitest","test":"vitest run","init:rename":"node scripts/init/rename.js","init:bin":"node scripts/init/bin.js","clean":"node scripts/clean.js","format":"pnpm prettier --check \"src/**/*.{ts,js}\" -w","ls:pack":"npm pack --dry-run","prepare":"ts-patch install -s","semantic-release":"semantic-release","sync":"cnpm sync weapp-pandacss","docs":"typedoc --out docs src/types.ts --tsconfig ./tsconfig.docs.json","preview":"vite preview docs --outDir .","e2e":"vitest run -c ./vitest.e2e.config.ts","e2e:build":"cd examples && pnpm run build","e2e:dev":"vitest -c ./vitest.e2e.config.ts","e2e:u":"npm run e2e:build && vitest run -u -c ./vitest.e2e.config.ts"},"publishConfig":{"access":"public","registry":"https://registry.npmjs.org"},"peerDependencies":{"postcss":"^8.4"},"dependencies":{"@babel/generator":"^7.24.8","@babel/parser":"^7.24.8","@babel/traverse":"^7.24.8","@babel/types":"^7.24.8","@csstools/postcss-cascade-layers":"4.0.6","@csstools/postcss-is-pseudo-class":"4.0.8","@pandacss/config":"^0.42.0","@weapp-core/escape":"2.1.0","c12":"^1.11.1","cac":"^6.7.14","fs-extra":"^11.2.0","local-pkg":"^0.5.0","postcss-selector-parser":"^6.1.1"},"devDependencies":{"@icebreakers/eslint-config":"^0.3.8","@pandacss/dev":"^0.42.0","@pnpm/lockfile-file":"^9.1.2","@rollup/plugin-alias":"^5.1.0","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^11.1.6","@tsconfig/recommended":"^1.0.6","@types/babel__generator":"^7.6.8","@types/babel__traverse":"^7.20.6","@types/fs-extra":"^11.0.4","@types/klaw":"^3.0.6","@types/lodash":"^4.17.5","@types/lodash-es":"^4.17.12","@types/node":"^20.14.5","@types/semantic-release":"^20.0.6","@vitest/coverage-v8":"^2.0.0","colorette":"^2.0.20","cross-env":"^7.0.3","debounce":"^2.1.0","dedent":"^1.5.3","defu":"^6.1.4","del":"^7.1.0","eslint":"9.7.0","klaw":"^4.1.0","kleur":"^4.1.5","lodash":"^4.17.21","lodash-es":"^4.17.21","merge":"^2.1.1","miniprogram-automator":"^0.12.1","only-allow":"^1.2.1","outdent":"^0.8.0","postcss":"^8.4.38","prettier":"^3.3.2","rollup":"^4.18.1","rollup-plugin-visualizer":"^5.12.0","semantic-release":"^24.0.0","semver":"^7.6.2","ts-node":"^10.9.2","ts-patch":"^3.2.0","tsconfig-paths":"^4.2.0","tslib":"^2.6.3","typedoc":"^0.26.0","typescript":"^5.4.5","typescript-transform-paths":"^3.4.7","vite":"^5.3.1","vitest":"^2.0.0"},"_id":"@carltian/weapp-pandacss@1.0.0","gitHead":"53dbb20ff5ea28eae814a4739b6fc0779b256aac","_nodeVersion":"22.0.0","_npmVersion":"10.5.1","dist":{"integrity":"sha512-ZRVutcAx1bHJFGwEjfqDuGs5IUAfIQYsDIrnLPIfOfik7kgTGRtYX0cHo+7fhbo3ubV6NIsYz3ikDn1tSebCVg==","shasum":"5ae462a5332325ac72f983e4f704cc6de15a38be","tarball":"https://registry.npmjs.org/@carltian/weapp-pandacss/-/weapp-pandacss-1.0.0.tgz","fileCount":14,"unpackedSize":90648,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDXWMzxPOFQjMW75UW9NrVsHgaO0+EM+wt1WMJ4x9CBegIgT2A0AG4W6Z5QgeEKfgDotIjRdnbxAfZ0Y3aj77Tplzw="}]},"_npmUser":{"name":"carltian","email":"1035723597@qq.com"},"directories":{},"maintainers":[{"name":"carltian","email":"1035723597@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/weapp-pandacss_1.0.0_1721269777277_0.42922140700738676"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-18T02:29:37.170Z","1.0.0":"2024-07-18T02:29:37.446Z","modified":"2024-07-18T02:29:37.757Z"},"maintainers":[{"name":"carltian","email":"1035723597@qq.com"}],"description":"to use pandacss in weapp, 在小程序里使用 pandacss","homepage":"https://sonofmagic.github.io/weapp-pandacss/","keywords":["panda","pandacss","css-in-js","weapp","wechat","mini","miniprogram","mini app","taro","uni-app","小程序","vite","postcss"],"repository":{"type":"git","url":"git+https://github.com/sonofmagic/weapp-pandacss.git"},"author":{"name":"SonOfMagic","email":"qq1324318532@gmail.com"},"bugs":{"url":"https://github.com/sonofmagic/weapp-pandacss/issues"},"license":"MIT","readme":"# weapp-pandacss\n\n[](https://codecov.io/gh/sonofmagic/weapp-pandacss)\n\n\n\n\n- [weapp-pandacss](#weapp-pandacss)\n - [介绍](#介绍)\n - [快速开始](#快速开始)\n - [pandacss 安装和配置](#pandacss-安装和配置)\n - [0. 安装和初始化 pandacss](#0-安装和初始化-pandacss)\n - [1. 配置 postcss](#1-配置-postcss)\n - [2. 检查你的 panda.config.ts](#2-检查你的-pandaconfigts)\n - [3. 修改 package.json 脚本](#3-修改-packagejson-脚本)\n - [4. 全局 css 注册 pandacss](#4-全局-css-注册-pandacss)\n - [5. 配置的优化与别名](#5-配置的优化与别名)\n - [weapp-pandacss 配置](#weapp-pandacss-配置)\n - [0. 回到 postcss 进行注册](#0-回到-postcss-进行注册)\n - [1. 回到 package.json 添加生成脚本](#1-回到-packagejson-添加生成脚本)\n - [跨平台注意事项](#跨平台注意事项)\n - [小程序预览事项](#小程序预览事项)\n - [高级配置文件](#高级配置文件)\n - [配置项列表](#配置项列表)\n - [参考示例](#参考示例)\n - [Bugs \\& Issues](#bugs--issues)\n\n## 介绍\n\n[`pandacss`](https://panda-css.com/) 是个优秀的 `CSS-in-JS` 编译时框架，原子化和 `[jt]sx?` 文件相结合的写法灵活而又令人印象深刻，而 `weapp-pandacss` 就是让你在小程序开发中使用它。\n\n## 快速开始\n\n### pandacss 安装和配置\n\n#### 0. 安装和初始化 pandacss\n\n首先我们需要把 `@pandacss/dev` 这些都安装和配置好，这里我们以 `tarojs` 项目为例：\n\n```bash\nnpm install -D @pandacss/dev weapp-pandacss postcss # 或者 yarn / pnpm\nnpx panda init\n```\n\n此时会在当前目录生成一个 `panda.config.ts` 和一个包含大量文件的 `styled-system`。\n\n> `panda.config.ts` 是 `pandacss` 的配置文件，`styled-system` 文件夹里的是 `pandacss` 的运行时 `js`。\n\n把 `styled-system` 加入我们的 `.gitignore` 中去。\n\n```diff\n# .gitignore\n+ styled-system\n```\n\n#### 1. 配置 postcss\n\n接着在根目录里，添加一个 `postcss.config.cjs` 文件，写入以下代码注册 `pandacss`:\n\n```js\nmodule.exports = {\n plugins: {\n '@pandacss/dev/postcss': {}\n }\n}\n```\n\n#### 2. 检查你的 panda.config.ts\n\n生成的配置文件大概长下面这样，尤其注意 `include` 是用来告诉 `pandacss` 从哪些文件中提取原子类的，所以这个配置一定要准确\n\n```ts\nimport { defineConfig } from \"@pandacss/dev\"\n\nexport default defineConfig({\n // 小程序不需要\n preflight: process.env.TARO_ENV === 'h5',\n // ⚠️这里，假如你使用 vue，记得把 vue 文件格式包括进来！！！\n include: [\"./src/**/*.{js,jsx,ts,tsx}\"],\n exclude: [],\n theme: {\n extend: {}\n },\n outdir: \"styled-system\",\n})\n```\n\n#### 3. 修改 package.json 脚本\n\n然后，我们添加下方 `prepare` 脚本在我们的 `package.json` 的 `scripts` 块中:\n\n```diff\n{\n \"scripts\": {\n+ \"prepare\": \"panda codegen\",\n }\n}\n```\n\n这样我们每次重新 `npm i/yarn/pnpm i` 的时候，都会执行这个方法，重新生成 `styled-system`，当然你也可以直接通过 `npm run prepare` 直接执行这个脚本。\n\n#### 4. 全局 css 注册 pandacss\n\n然后在我们的全局样式文件 `src/app.scss` 中注册 `pandacss`:\n\n```css\n@layer reset, base, tokens, recipes, utilities;\n```\n\n配置好了之后，此时 `pandacss` 在 `h5` 平台已经生效了，你可以 `npm run dev:h5` 在 `h5` 平台初步使用了，但是为了开发体验，我们还有一些优化项要做。\n\n#### 5. 配置的优化与别名\n\n来到根目录的 `tsconfig.json` 添加:\n\n```diff\n{\n \"compilerOptions\": {\n \"paths\": {\n \"@/*\": [\n \"src/*\"\n ],\n+ \"styled-system/*\": [\n+ \"styled-system/*\"\n+ ]\n }\n },\n \"include\": [\n \"./src\",\n \"./types\",\n \"./config\",\n+ \"styled-system\"\n ],\n}\n```\n\n接着来到 `config/index.ts` 添加 `alias`([参考链接](https://taro-docs.jd.com/docs/config-detail#alias)):\n\n```ts\nimport path from 'path'\n\n{\n alias: {\n 'styled-system': path.resolve(__dirname, '..', 'styled-system')\n },\n}\n```\n\n这样我们就不需要使用相对路径来使用 `pandacss` 了，同时 `ts` 智能提示也有了，你可以这样使用它:\n\n```ts\nimport { View, Text } from \"@tarojs/components\";\nimport { css } from \"styled-system/css\";\n\nconst styles = css({\n bg: \"yellow.200\",\n rounded: \"9999px\",\n fontSize: \"90px\",\n p: \"10px 15px\",\n color: \"pink.500\",\n});\n\nexport default function Index() {\n return (\n \n Hello world!\n \n );\n}\n```\n\n> 此部分参考的官方链接 \n\n接下来进入 `weapp-pandacss` 的插件配置，不用担心，相比前面那些繁琐的步骤，这个可简单多了。\n\n### weapp-pandacss 配置\n\n> 记得安装好 `weapp-pandacss` !\n\n#### 0. 回到 postcss 进行注册\n\n回到项目根目录的 `postcss.config.cjs` 注册 `weapp-pandacss`，添加以下配置:\n\n```diff\nmodule.exports = {\n plugins: {\n '@pandacss/dev/postcss': {},\n+ 'weapp-pandacss/postcss': {}\n }\n}\n```\n\n#### 1. 回到 package.json 添加生成脚本\n\n然后去 `package.json` 你添加 `prepare` 脚本的地方，加点代码\n\n```diff\n{\n \"scripts\": {\n- \"prepare\": \"panda codegen\",\n+ \"prepare\": \"panda codegen && weapp-panda codegen\",\n }\n}\n```\n\n> 注意这里必须用 `&&` 而不能用 `&`，`&` 任务执行会并行不会等待，而 `&&` 会等待前一个执行完成再执行后一条命令\n\n然后，你再手动执行一下\n\n```bash\nnpm run prepare\n```\n\n来重新生成 `styled-system`, 此时你会发现 `pandacss` 的命令行输出中多了 `2` 行:\n\n```diff\n✔️ `src/styled-system/css`: the css function to author styles\n✔️ `src/styled-system/tokens`: the css variables and js function to query your tokens\n✔️ `src/styled-system/patterns`: functions to implement apply common layout patterns\n✔️ `src/styled-system/jsx`: styled jsx elements for react\n+ ✔️ `src/styled-system/weapp-panda`: the core escape function for weapp\n+ ✔️ `src/styled-system/helpers.mjs`: inject escape function into helpers\n```\n\n这代表着小程序相关的转义逻辑已经被注入进去，此时 `panda css` 生成的类就兼容小程序平台啦，是不是很简单?\n\n当然为了防止你配置失败，我也给出了参考项目: [taro-react-pandacss-template](https://github.com/sonofmagic/taro-react-pandacss-template) 方便进行排查纠错。\n\n## 跨平台注意事项\n\n你可能同时开发 `小程序` 和 `h5` 平台，但是你发现使用 `weapp-pandacss` 之后，`h5` 平台似乎就不行了？\n\n这时候你可以这样配置：\n\n`process.env.TARO_ENV === 'h5'` 的时候，不去加载 `weapp-pandacss/postcss` (根据环境变量动态加载 `postcss` 插件)\n\n同时你也可以执行 `weapp-panda rollback` 把 `css` 方法进行回滚到最原始适配 `h5` 平台的状态。\n\n当然你恢复到小程序版本也只需要执行 `weapp-panda codegen` 就会重新注入了。\n\n## 小程序预览事项\n\n当小程序预览时会出现 `Error: 非法的文件，错误信息：invalid file: pages/index/index.js, 565:24, SyntaxError: Unexpected token . if (variants[key]?.[value])` 错误。\n\n这是因为 `panda` 生成的文件 `cva.mjs` 使用了 [`Optional chaining (?.)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining)语法，这个语法小程序原生不支持导致的，这种情况可以参考以下的配置：\n\n```ts\n// taro 应用中，默认只会处理 [jt]sx? 这类的文件，所以要添加 cjs/mjs 再交给 babel 处理一下\n// 假如你使用 pnpm 的话，你还要执行一下 `pnpm add -D babel-loader`, 把 `babel-loader` 提到最外面一层，不然会出现 require.resolve 找不到的问题\n// config/index.ts 文件中的 webpackChain 方法，你可以把 mini 和 h5 都加上\nchain.merge({\n module: {\n rule: [\n {\n test: /\\.[cm]js$/i,\n loader: 'babel-loader'\n }\n ]\n },\n})\n```\n\n或者你可以开启开发者工具中的 `将JS编译成ES5` 功能再进行预览。\n\n## 高级配置文件\n\n你可以通过 `npx weapp-panda init` 命令在当前目录下创建一个 `weapp-pandacss.config.ts` 配置文件。\n\n这个配置文件可以用来控制转义代码的生成和一部分 `postcss` 插件的行为。\n\n```ts\nimport { defineConfig } from 'weapp-pandacss'\n\nexport default defineConfig({\n postcss: {\n // 转义插件是否生效，这只能控制核心插件的生效情况,而核心插件只是一部分\n // 假如你想让整个插件真正不生效，请在 `postcss.config.cjs` 里进行动态加载判断\n disabled: false,\n // 数组merge默认行为是直接concat 合并，所以传一个空数组是使用的默认数组\n // 转义替换对象\n selectorReplacement: {\n root: [],\n universal: [],\n cascadeLayers: 'a'\n },\n removeNegationPseudoClass: true\n },\n // 生成上下文\n context: {\n // 转义注入判断条件，更改后需要重新生成代码\n escapePredicate: `process.env.TARO_ENV !== 'h5' && process.env.TARO_ENV !== 'rn'`,\n // 插件的 pandaConfig 寻找配置\n pandaConfig: {\n cwd: process.cwd(),\n file: 'path/to/your-panda-config-file'\n }\n }\n})\n```\n\n当然，你更改相关的配置项之后，要重新执行一下 `npm run prepare` 来生成新的注入转义代码。\n\n## 配置项列表\n\n详见 \n\n## 参考示例\n\n[taro-react-pandacss-template](https://github.com/sonofmagic/taro-react-pandacss-template)\n\n[Taro-app react](./examples/taro-app)\n\n[Taro-app vue3](./examples/taro-app-vue3)\n\n[Uni-app vue3 vite](./examples/uni-app-vue3)\n\n## Bugs & Issues\n\n目前这个插件正在快速的开发中，如果遇到 `Bug` 或者想提出 `Issue`\n\n[欢迎提交到此处](https://github.com/sonofmagic/weapp-pandacss/issues)\n","readmeFilename":"README.md"}