@dcasia/mini-program-tailwind-webpack-plugin - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

dist/index.js

@@ -29,2 +29,28 @@ 'use strict';
 
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
 var FileType;
@@ -67,12 +93,80 @@ (function (FileType) {
 
-function handleStyle(rawSource) {
-    var root = postcss__default["default"].parse(rawSource);
-    root.walk(function (node) {
-        if (node.type === 'rule') {
-            node.selector = handleCharacters(node.selector, FileType.Style);
+function transformSelector() {
+    var processed = Symbol('processed');
+    return {
+        postcssPlugin: 'transformSelectorName',
+        Rule: function (node) {
+            if (!node[processed]) {
+                node.selector = handleCharacters(node.selector, FileType.Style);
+                node[processed] = true;
+            }
         }
-    });
-    return root.toString();
+    };
 }
+var SourceUnit;
+(function (SourceUnit) {
+    SourceUnit["REM"] = "rem";
+    SourceUnit["PX"] = "px";
+})(SourceUnit || (SourceUnit = {}));
+var TargerUnit;
+(function (TargerUnit) {
+    TargerUnit["RPX"] = "rpx";
+})(TargerUnit || (TargerUnit = {}));
+function transformValue(options) {
+    var processed = Symbol('processed');
+    return {
+        postcssPlugin: 'transformValue',
+        Declaration: function (node) {
+            if (!node[processed]) {
+                var remValues = findValues(node.value, SourceUnit.REM);
+                var pxValues = findValues(node.value, SourceUnit.PX);
+                if (remValues === null || remValues === void 0 ? void 0 : remValues.length) {
+                    node.value = transformAllValue(node.value, remValues, SourceUnit.REM, options);
+                }
+                if (pxValues === null || pxValues === void 0 ? void 0 : pxValues.length) {
+                    node.value = transformAllValue(node.value, pxValues, SourceUnit.PX, options);
+                }
+                node[processed] = true;
+            }
+        }
+    };
+}
+var valueConvertor = {
+    rem: remToRpx,
+    px: pxToRpx
+};
+function transformAllValue(raw, targets, unit, options) {
+    for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
+        var value = targets_1[_i];
+        raw = raw.replace(value + unit, valueConvertor[unit](value, options.designWidth) + TargerUnit.RPX);
+    }
+    return raw;
+}
+function findValues(raw, unit) {
+    var _a;
+    var regExp = new RegExp("[\\d./]+(?=".concat(unit, ")"), 'g');
+    return (_a = raw.match(regExp)) === null || _a === void 0 ? void 0 : _a.map(function (value) { return Number(value); });
+}
+function remToRpx(rem, base) {
+    if (base === void 0) { base = 375; }
+    return pxToRpx(rem * 16, base);
+}
+function pxToRpx(px, base) {
+    if (base === void 0) { base = 375; }
+    var rpx = (px / (base / 375)) * 2;
+    return Number(rpx.toFixed(3));
+}
+transformSelector.postcss = true;
+transformValue.postcss = true;
 
+function handleStyle(rawSource, option) {
+    var processor = postcss__default["default"]()
+        .use(transformSelector);
+    if (option.enableRpx) {
+        processor.use(transformValue(option));
+    }
+    return processor.process(rawSource)
+        .css;
+}
+
 function replaceStringLiteralPlugin(_a) {
@@ -127,7 +221,9 @@ var t = _a.types;
         this.defaultOptions = {
-            convertToRpx: true
+            enableRpx: true,
+            designWidth: 375
         };
-        this.options = Object.assign({}, options, this.defaultOptions);
+        this.options = __assign(__assign({}, this.defaultOptions), options);
     }
     MiniProgramTailwindWebpackPlugin.prototype.apply = function (compiler) {
+        var _this = this;
         var webpack = compiler.webpack;
@@ -146,3 +242,3 @@ var sources = webpack.sources, Compilation = webpack.Compilation;
                     if (isStyleFile(pathname)) {
-                        handledSource = handleStyle(rawSource);
+                        handledSource = handleStyle(rawSource, _this.options);
                     }
@@ -149,0 +245,0 @@ else if (isTemplateFile(pathname)) {

package.json

 {
   "name": "@dcasia/mini-program-tailwind-webpack-plugin",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # Mini program Tailwind/Windi CSS Webpack plugin
 
+A webpack plugin that can make tailwind css and windi css framework compatiable with mini program.
 
+需要配合 Webpack 5 一起使用
 
-A webpack plugin that can make tailwind css and windi css framework compatiable with WeChat mini program.
+## 介绍
 
+由于小程序本身不支持由 Tailwind/Windi CSS 产生的选择器名称中包含的一些特殊字符（`\[` `\!` `\.` 等），这使得你无法在开发小程序时使用一些本该在开发 Web 应用时就可以使用的很实用且灵活的语法，如 `w-[30px]`, `translate-x-1/2`, `!bg-[#ff0000]`。
+
+为了突破这一限制，我们开发了这一款插件来帮助你在开发小程序时依然保持着与使用 Tailwind/Windi 开发 Web 应用时高度一致的开发体验，你不再需要关注哪些字符串不被支持而不得不换一种写法，而是继续按照 Tailwind/Windi 的官方语法继续编写你的小程序样式，其他工作则由这款插件静默处理。
+
+此外，该插件还集成了 rpx 值自动转换的功能。该功能可以将 Tailwind/Windi 配置文件中以及源码中我们书写的 rem 与 px 单位的值在生成结果中自动转换为 rpx 单位的值。这既可以让开发者重复使用在 Web 项目中同一份团队制定的主题配置文件又可以让小程序享受到 responsive pixel 特性带来的便利。
+
+
+## 快速开始
+
+### 基于原生小程序
+
+待更新...
+
+### 基于 MPX 框架
+
+[MPX](https://mpxjs.cn/), 一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架。
+
+#### 安装 Windi CSS 与 windicss-webpack-plugin
+
+依照 Windi CSS [官方文档](https://windicss.org/integrations/webpack.html) 中陈述的步骤进行
+
+#### 更新 Windi CSS 配置文件
+
+```javascript
+//windi.config.js
+export default {
+  //...
+  extract: {
+    // 将 .mpx 文件纳入范围
+    include: ['src/**/*.{css,html,mpx}'],
+    // 忽略部分文件夹
+    exclude: ['node_modules', '.git', 'dist']
+  }
+  //...
+}
+```
+
+#### 安装 @dcasia/mini-program-tailwind-webpack-plugin
+
+```sh
+npm i @dcasia/mini-program-tailwind-webpack-plugin --save-dev
+```
+
+#### 更新 MPX 项目中的 webpack 配置文件
+
+```javascript
+//webpack.base.conf.js
+const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
+const MiniProgramTailwindWebpackPlugin = require("@dcasia/mini-program-tailwind-webpack-plugin")
+
+module.exports = {
+  //...
+  plugins: [
+    new WindiCSSWebpackPlugin(),
+    new MiniProgramTailwindWebpackPlugin({
+      enableRpx: true,
+      designWidth: 350
+    })
+  ]
+}
+```
+
+#### 在 app.mpx 中引入 Windi CSS 的产物
+
+```html
+<style src="windi-utilities.css"></style>
+```
+
+#### 完成
+开始享受在小程序项目中由 Windi CSS 带来的高效开发体验 🎉
+
+[示例项目](./examples/mpx)
+
+
+## 可配置参数
+
+| Name        | Type    | Default | Description                                               |
+| ----------- | ------- | ------- | --------------------------------------------------------- |
+| enableRpx   | Boolean | true    | 是否开启自动转换至 rpx 单位值的功能                       |
+| designWidth | Number  | 350     | 设计稿的像素宽度值，该尺寸会影响 rpx 转换过程中的计算比率 |
+
+
 ## FAQ
@@ -19,3 +103,3 @@
 
-   Behind the scene it silently replace all unsupported selector names in mini program when you are developing or building your project by lerverging the ability of Webpack, Postcss, WXML parser and Babel etc.
+   Behind the scene it silently replace all unsupported selector names in mini program when you are developing or building your project by leveraging the ability of Webpack, Postcss, WXML parser and Babel etc.
 
@@ -35,5 +119,5 @@
 | Value infer: t-[25px], bg[#ffffff]                    |     ❌     |        ✅        |
-| Responsive pixel auto conversion from rem and px unit |     ❌     |   Coming up🚀    |
+| Responsive pixel auto conversion from rem and px unit |     ❌     |        ✅        |
 
 
 

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16251

increased by68.25%

Lines of code

240

increased by61.07%

Number of lines in readme file

122

increased by221.05%

No dependency changes