用 @icestack/ui 构建适配微信小程序的 daisyui

用 @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