postcss-compatible-mp

一个用来将微信小程序不支持的 CSS/WXSS 类名进行转换的 PostCSS 插件。初衷是为了解决 tailwindcss 在微信小程序中不能使用的问题。

/* 微信小程序不支持以下写法，会报错 */

.top-0\.5 {
  margin-top: 0.125rem;
}

.w-1\/2 {
  width: 50%;
}

/* 上面的类名会被转换成： */

.top-0p5 {
  margin-top: 0.125rem;
}

.w-1of2 {
  width: 50%;
}

Usage

Step 1: Install plugin:

npm install --save-dev postcss postcss-compatible-mp

Step 2: Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you do not use PostCSS, add it according to official docs and set this plugin in settings.

Step 3: Add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-compatible-mp'),
    require('autoprefixer')
  ]
}