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

Image

小程序 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.tspandacss 的配置文件,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.jsonscripts 块中:

{"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;

配置好了之后,此时 pandacssh5 平台已经生效了,你可以 npm run dev:h5h5 平台初步使用了,但是为了开发体验,我们还有一些优化项要做。

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 rollbackcss 方法进行回滚到最原始适配 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

欢迎提交到此处

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/44561.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Log4Qt日志框架(1)- 引入到QT中

Log4Qt日志框架&#xff08;1&#xff09;- 引入到QT中 1 下载源码2 简介3 加入到自己的项目中3.1 使用库文件3.2 引入源文件 4 说明 1 下载源码 github&#xff1a;https://github.com/MEONMedical/Log4Qt 官方(版本较老)&#xff1a;https://sourceforge.net/projects/log4q…

希望计算机专业同学都知道这些博主

湖科大教书匠——计算机网络 “宝藏老师”、“干货满满”、“羡慕湖科大”…这些都是网友对这门网课的评价&#xff0c;可见网课质量之高&#xff01;最全面的面试网站 湖南科技大学《计算机网络》微课堂是该校高军老师精心制作的视频课程&#xff0c;用简单的语言描述复杂的…

【开发】视频云存储EasyCVR视频汇聚平台AI智能算法定制

安防视频集中存储EasyCVR视频汇聚平台&#xff0c;可支持海量视频的轻量化接入与汇聚管理。平台能提供视频存储磁盘阵列、视频监控直播、视频轮播、视频录像、云存储、回放与检索、智能告警、服务器集群、语音对讲、云台控制、电子地图、平台级联、H.265自动转码等功能。为了便…

idea使用docker生成镜像(打包镜像,导入镜像,导出镜像)

1&#xff1a;先下载安装dockerdesktop&#xff0c;安装成功后 2&#xff1a; 在cmd执行docker -v&#xff0c;查看安装的docker版本 C:\Users\dell>docker -v Docker version 24.0.5, build ced09963&#xff1a;需要启动 dockerdesktop应用&#xff0c;才算启动docker&a…

openai多模态大模型:clip详解及实战

引言 CLIP全称Constrastive Language-Image Pre-training&#xff0c;是OpenAI推出的采用对比学习的文本-图像预训练模型。CLIP惊艳之处在于架构非常简洁且效果好到难以置信&#xff0c;在zero-shot文本-图像检索&#xff0c;zero-shot图像分类&#xff0c;文本→图像生成任务…

Windows 11 下使用 VMWare Workstation 17 Pro 新建 CentOS Stream 9 64位 虚拟机 并配置网络

文章目录 为什么选择 CentOS Stream 9下载安装访问连接快照克隆网络配置 为什么选择 CentOS Stream 9 CentOS Linux 8: 已经过了 End-of-life (EOL)CentOS Linux 7: EOL Jun 30th, 2024CentOS Stream 8: EOL May 31st, 2024CentOS Stream 9: End of RHEL9 full support phase …

PySpark-核心编程

2. PySpark——RDD编程入门 文章目录 2. PySpark——RDD编程入门2.1 程序执行入口SparkContext对象2.2 RDD的创建2.2.1 并行化创建2.2.2 获取RDD分区数2.2.3 读取文件创建 2.3 RDD算子2.4 常用Transformation算子2.4.1 map算子2.4.2 flatMap算子2.4.3 reduceByKey算子2.4.4 Wor…

第 7 章 排序算法(2)(冒泡排序)

7.5冒泡排序 7.5.1基本介绍 冒泡排序&#xff08;Bubble Sorting&#xff09;的基本思想是&#xff1a;通过对待排序序列从前向后&#xff08;从下标较小的元素开始&#xff09;,依次比较相邻元素的值&#xff0c;若发现逆序则交换&#xff0c;使值较大的元素逐渐从前移向后部…

工具推荐:Chat2DB一款开源免费的多数据库客户端工具

文章首发地址 Chat2DB是一款开源免费的多数据库客户端工具&#xff0c;适用于Windows和Mac操作系统&#xff0c;可在本地安装使用&#xff0c;也可以部署到服务器端并通过Web页面进行访问。 相较于传统的数据库客户端软件如Navicat、DBeaver&#xff0c;Chat2DB具备了与AIGC…

韩顺平Linux 四十四--

四十四、rwx权限 权限的基本介绍 输入指令 ls -l 显示的内容如下 -rwxrw-r-- 1 root 1213 Feb 2 09:39 abc0-9位说明 第0位确定文件类型&#xff08;d , - , l , c , b) l 是链接&#xff0c;相当于 windows 的快捷方式- 代表是文件是普通文件d 是目录&#xff0c;相…

Spring Security OAuth2.0认证授权

&#xff08;单体项目的认证&#xff0c;微服务项目的认证授权&#xff09; 1.基本概念 1.1 什么是认证 进入移动互联网时代&#xff0c;大家每天都在刷手机&#xff0c;常用的软件有微信、支付宝、头条等&#xff0c;下边拿微信来举例子说明认证相关的基本概念&#xff0c;在…

腾讯云3年轻量应用服务器2核4G5M和2核2G4M详细介绍

腾讯云轻量应用服务器3年配置&#xff0c;目前可以选择三年的轻量配置为2核2G4M和2核4G5M&#xff0c;2核2G4M和2核4G5M带宽&#xff0c;当然也可以选择选一年&#xff0c;第二年xufei会比较gui&#xff0c;腾讯云百科分享腾讯云轻量应用服务器3年配置表&#xff1a; 目录 腾…

机器人制作开源方案 | 送餐机器人

作者&#xff1a;赖志彩、曹柳洲、王恩开、李雪儿、杨玉凯 单位&#xff1a;华北科技学院 指导老师&#xff1a;张伟杰、罗建国 一、作品简介 1. 场景调研 1.1项目目的 近年来&#xff0c;全国多地疫情频发&#xff0c;且其传染性极高&#xff0c;食品接触是传播途径之一。…

均线多头排列和突破前高形态叠加,只为抓取主升浪!股票量化分析工具QTYX-V2.6.9...

功能概述 我们的股票量化系统QTYX在实战中不断迭代升级&#xff0c;针对当前行情&#xff0c;主要聚焦在抓取主升浪的强势股。 单一的指标是用局限的&#xff0c;QTYX的选股框架&#xff0c;是把多指标结合起来一起过滤出强势股。 QTYX支持从市场4000多只票中过滤出强势股的流程…

利用“病毒制造机”实现脚本病毒的制造

一、脚本病毒的概念&#xff1a; 脚本病毒通常是 JavaScript 或 VBScript 等语言编写的恶意代码&#xff0c;一般广告性质&#xff0c;会修改 IE 首页、修改注册表等信息&#xff0c;对用户计算机造成破坏。 通过网页进行的传播的病毒较为典型&#xff0c;脚本病毒还会有如下前…

使用PyMuPDF库的PDF合并和分拆程序

PDF工具应用程序是一个使用wxPython和PyMuPDF库编写的简单工具&#xff0c;用于合并和分拆PDF文件。它提供了一个用户友好的图形界面&#xff0c;允许用户选择源文件夹和目标文件夹&#xff0c;并对PDF文件进行操作。 C:\pythoncode\blog\pdfmergandsplit.py 功能特点 选择文…

unity物体移动至指定位置

物体坐标与物体移动 世界坐标与局部坐标之间的转换物体移动至指定位置需求思路注意 世界坐标与局部坐标之间的转换 在Unity中&#xff0c;物体的坐标分为局部坐标和世界坐标。 局部坐标是相对于物体的父对象的坐标系&#xff0c;而世界坐标是相对于场景的整体坐标系。 使用tr…

css学习2(利用id与class修改元素)

1、id选择器可以为标有特定id的html元素指定特定的样式。 2、选择器以#开头&#xff0c;后跟某id的属性值。 3、class选择器用于描述一组元素的样式&#xff0c;class可以在多个元素使用。 4、类选择器用.选择。 5、指定特定的元素使用class。 6、元素的多个类用空格分开&…

Mariadb高可用MHA (四十二)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 目录 前言 一、概述 1.1 概念 1.2 组成 1.3 特点 1.4 工作原理 二、构建MHA 2.1 ssh免密登录 2.2 主从复制 2.3 MHA安装 2.3.1所有节点安装perl环境 2.3..2 node 2.3.…

[LitCTF 2023]Ping

因为直接ping会有弹窗。这里在火狐f12,然后f1选禁用javascript,然后ping 然后输入127.0.0.1;cat /flag 得到flag&#xff0c; 查看其他大佬的wp &#xff0c;这里还可以抓包。但是不知道为什么我这里的burp 用不了