用 @icestack/ui 构建适配微信小程序的 daisyui
前语
daisyui 是 tailwindcss 中最流行的纯 CSS 结构，然而它作用的渠道只有 h5，直接在小程序中运用会报错，由于小程序的 CSS 选择器有许多限制，无法像 h5 那样自在。那么怎么样才干构建出适配小程序版别的 daisyui 呢？
考虑与实践
在阅读了 daisyui 了许多源码之后，我展开了思索，由于我认为它还能做的更好更自在。
为此我构建了 icestack 项目。和 daisyui 相同的是，它们都用于构建纯 CSS 结构。不同的是 icestack 的目的快速的生成一套归于你自己的 CSS 结构。也便是说你能够用 @icestack/ui 构建出 n 个你自己定制化之后的 daisyui。
当然你能够运用内部供给的一套默许 范式(默许便是 daisyui), 也能够对它进行掩盖或许扩展。
你能够依据装备项，自在的去操作一切 CSS范式的表现性状，包括不但限于:
- 增加/减少/掩盖/修改 主题色给不同的组件 (比方: 按钮默许有
default,primary,success,warning,error, 你再去增加个secondary,accent色，并声明它们hover/focus/active等等状态) - 增加/减少/掩盖/修改组件的大小，形状，款式 (比方:按钮默许的尺度有
sm,md,lg三种尺度，你能够再往里面增加xs,xl,2xl… 的大小尺度) - 不同的
CSS组件走不同的postcss处理流程 - 增加新的
CSS组件到这套体系中来。
而且，这个生成器生成的 CSS 范式 成果侵略性十分小，默许情况下，它不会带着任何的 css reset/normalize/preflight 款式，只会全局注入一些计算出的 CSS 变量。
它的生成成果也十分的直观，你能够运用它自定义出想要的 UI 行为后，进行二次封装，或许提取成 preset, 从而在多个项目中同享。
怎么运用?
装置
首要你必须装置好 nodejs 环境:
然后运用 npm init 创建 package.json，再在 package.json 目录下，履行命令:
# yarn / pnpm
npm i -D @icestack/ui
@icestack/ui 将会被下载并装置在你的本地，同时一个二进制命令 icestack 将会被注册
初始化装备
首要在装置好 @icestack/ui 之后你能够履行:
npx icestack init
这个命令会在当时履行目录下生成一个 icestack.config.js 文件，默许内容如下:
/**
* @type {import('@icestack/ui').Config}
*/
const config = {
outdir: './my-ui'
}
module.exports = config
构建款式
你能够在 config 中，装备你自己的款式和选项，完成之后履行:
npx icestack build
或许把这个脚本参加你的 package.json:
{
"scripts": {
+ "build:ui": "icestack build"
},
}
然后履行 npm run build:ui 也能到达相同的作用。这样当时目录的 my-ui 就生成了许多的 css/js 文件，你能够直接引进运用，当然它们也能够作为 tailwindcss plugin 来运用。
作为 tailwindcss plugin 来运用
装置
在以 CLI 运用 @icestack/ui 履行 icestack build 后，它把一切的资源文件生成在你的本地的目录中了
然后咱们装置 @icestack/tailwindcss
# yarn / pnpm
npm i -D @icestack/tailwindcss
装备
然后传递一个 loadDirectory 装备项告诉插件刚刚生成的方位:
const path = require('node:path')
const { icestackPlugin } = require('@icestack/tailwindcss')
/** @type {import('tailwindcss').Config} */
module.exports = {
// ...
plugins: [
icestackPlugin({
loadDirectory: path.resolve(__dirname, 'my-ui'),
// other options
// 是否注入 theme ,为 true 生成器的 primary success warning 这些色彩会进入 tailwindcss theme extend 装备
loadConfig: true
})
]
}
接着只要咱们正常运行项目，当时目录下的 my-ui 里就生成了对应的 css和 js 相关的代码
智能提示
通常咱们每次保存 tailwind.config.js 文件，tailwindcss 插件就会去重新读取插件并生成智能提示
所以咱们每一次履行 icestack build 后，都能够去 tailwind.config.js 进行文件的保存操作，这样智能提示就有了。
当然现在构建出的版别仍是 h5 的，咱们要通过加载 @icestack/presets 里的小程序预设来构建出适配小程序的款式。
在微信小程序里运用
目前
@icestack/presets必需要配合weapp-tailwindcss一起运用，在运用前请保证weapp-tailwindcss装置装备成功。
装置
@icestack/presets 内部实现了一套预设来兼容微信小程序
你能够运用 @icestack/presets 中导出的 miniprogramPreset 来构建出小程序版别的默许 ui 库
首要咱们装置 @icestack/presets
# yarn / pnpm
npm i -D @icestack/presets
注册
然后在 icestack.config.js 中注册
const { miniprogramPreset } = require('@icestack/presets')
/**
* @type {import('@icestack/ui').Config}
*/
const config = {
// 能够依据环境变量，把 h5 和 小程序的 outdir 设置为不同的目录
outdir: './my-ui',
presets: [miniprogramPreset()]
}
module.exports = config
构建
然后你履行命令:
npx icestack build
构建出的便是适配小程序的库了。
当然还有更多更自在的运用方法，在此不细讲，详见icestack官网
演示小程序
收到启示的项目
本项目收到了 tailwindcss,sass,postcss,daisyui,antd,vant 等等项目和思维的启示。
