此页面需要javascript支持,请在浏览器中启用javascript

tailwindcss and postcss for 小程序第二个大版本发布啦!

tailwindcss
postcss
ts
mp
new release
共1095个字,阅读时间 5 分钟
阅读 

Image

tailwindcss and postcss for 小程序第二个大版本发布啦!

安装与配置

小程序使用 tailwindcss 只需三步:

第一步 - 安装

yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-miniprogram-preset@latest
# or
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest tailwindcss-miniprogram-preset@latest

一些框架,如vue/cli,uni-app,nuxt2(有postcss8插件)用的Postcss7旧版本,则使用postcss7-compatibility-build

第二步 - 创建配置

创建 postcss.config.js

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

初始化 tailwindcss 配置文件

npx tailwindcss init

使用 preset:

// tailwind.config.js
const { defaultPreset } = require('tailwindcss-miniprogram-preset')

/** @type {import('@types/tailwindcss/tailwind-config').TailwindConfig} */
module.exports = {
  //...
  presets: [defaultPreset]
  //...
}

第三步 - 引用 [wx|c|sc|le]ss

// app.scss
@tailwind utilities;

然后在应用入口,如 App.vue 导入它即可。

接下来就能够看到,tailwindcss 愉快的运转了,安装 vscode 插件Tailwind CSS IntelliSense 后,所有的自定义的智能提示也出现了。

点击查看更详细的文档Demo

一些细节

preset 自动带了一套 rem2rpx 的机制,开发者可以通过:

const { createPreset } = require('tailwindcss-miniprogram-preset')

进行配置,如果您不想要此功能,可以把 rem2rpx 设置为 false

presets: [createPreset({
  rem2rpx: false
})]

如果此时需要更加强大,且自定义的 rem2rpx 效果,可以使用 postcss-rem-to-responsive-pixel

它是一个用 ts 写的 postcss plugin,兼容 postcss8 ,它能够让我们更加轻松的定制我们的转化策略。

如何使用呢?

在我们关闭 presetrem2rpx 转化后,我们可以在 postcss.config.js 设置:

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('tailwindcss'),
    require('postcss-rem-to-responsive-pixel')({
      rootValue: 32, // 1rem = 32rpx
      propList: ['*'], // 所有的属性
      transformUnit: 'rpx' // 转换单位为 rpx , 默认为 px
    })
  ]
}

这样也可以轻松愉快的达到效果,更多的配置请看文档

一些开发的碎碎念

最近在使用 Typescript 重构之前的开源项目和编写新的项目。

正好 tailwindcss-miniprogram-preset 当初是使用 js 撰写的,于是正好趁这个机会重构一下。

步骤

正如把大象塞进冰箱,只需要三步。js 项目转为 ts 项目也分几步走。

首先,我先撰写了一个 for npm cjs lib 的模板 npm-lib-template

它是一个使用 ts + rollup 进行打包的工具链,主要的工作为 将 src 中代码引用到的文件,通过 tsc node-resolve,alias 等等加工,最后输出为 cjs,esmtypes,同时声明在 package.json 内( main,module,types),这样开发者在使用时候,不论 package.json->type ,不论 require,还是 import ... from ,都能够找到准确的包。

在参照 npm-lib-template 生成项目后,我们即可编写代码。

其中代码目录大致如下:

# region dirs
dist # 打包输出目录
src # 源代码目录
bin # bin 的入口,使用 dist中的方法,一般就一行
examples # 案例目录
scripts # 辅助脚本目录
test # 测试目录,这里使用的是 jest
# 除此之外还有类似 .github , coverage 的临时目录
# endregion dirs

开始迁移

js -> ts 很简单,类型补全 + cjs->esm 就行。 但是却在tsconfig.json配置项这里遇到了坑。

发布beta版本

我们尚在测试中的 2.x 版本是不可能直接发布到 npmlatest 的,假如这时候的包存在一些Fatal级别的错误,用户在获取最新或者升级的时候,会获取到错误的版本,导致崩溃。

这时候我们就需要:

yarn pulish --tag beta

同时可以把要发布的版本号设置为: 2.0.0-beta.[x]

这样,我们获取的时候,只需要 yarn add -D [pkgName]@beta 就可以了。

发布v2

v2 相比 v1 版本,代码整体优化了许多,同时配置项更加的灵活,以适配不同的场景。

其中,用户可以自己传参去生成 preset 了,我们在 tailwind.config.js 中导入时,除了 defaultPreset 还有一个 createPreset,其中 defaultPresetv1 版本的默认导出, 而 createPreset 就可以根据传的配置项,来决定:

  1. 是否需要 rem -> rpx

假如不需要这个预设来进行转化,且又有转化的需求,可以使用 postcss-rem-to-responsive-pixel 这个 postcss 插件。 在关闭预设的 rem2rpx 配置项后,只需要把这个插件运行在 tailwindcss 插件后就行(postcss插件的优先级)。

  1. 配置 rem -> rpxrootValue 是多少,默认为 32
  2. 配置其他的一些选项

未来开发计划

下一步,把 jit 模式安排上。

Explore comments

© 2022 icebreaker 苏ICP备19002675号-2
version:1.3.0