@weapp-tailwindcss/postcss 1.1.1 → 1.2.0

package/dist/index.d.mts

@@ -1,12 +1,14 @@
-import { I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions } from './types-tu70dcVo.mjs';
-export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions, c as createInjectPreflight } from './types-tu70dcVo.mjs';
+import { I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions } from './types-C5X6IWCb.mjs';
+export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions, c as createInjectPreflight } from './types-C5X6IWCb.mjs';
 import postcss from 'postcss';
 import '@weapp-tailwindcss/mangle';
+import '@weapp-tailwindcss/postcss-calc';
 import 'postcss-load-config';
 import 'postcss-preset-env';
+import 'postcss-pxtransform';
 import 'postcss-rem-to-responsive-pixel';
 
-declare function createStyleHandler(options: Partial<IStyleHandlerOptions>): (rawSource: string, opt?: Partial<IStyleHandlerOptions>) => Promise<postcss.Result<postcss.Document | postcss.Root>>;
+declare function createStyleHandler(options?: Partial<IStyleHandlerOptions>): (rawSource: string, opt?: Partial<IStyleHandlerOptions>) => Promise<postcss.Result<postcss.Document | postcss.Root>>;
 
 declare function internalCssSelectorReplacer(selectors: string, options?: InternalCssSelectorReplacerOptions): string;
 

package/dist/index.d.ts

@@ -1,12 +1,14 @@
-import { I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions } from './types-tu70dcVo.js';
-export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions, c as createInjectPreflight } from './types-tu70dcVo.js';
+import { I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions } from './types-C5X6IWCb.js';
+export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions, c as createInjectPreflight } from './types-C5X6IWCb.js';
 import postcss from 'postcss';
 import '@weapp-tailwindcss/mangle';
+import '@weapp-tailwindcss/postcss-calc';
 import 'postcss-load-config';
 import 'postcss-preset-env';
+import 'postcss-pxtransform';
 import 'postcss-rem-to-responsive-pixel';
 
-declare function createStyleHandler(options: Partial<IStyleHandlerOptions>): (rawSource: string, opt?: Partial<IStyleHandlerOptions>) => Promise<postcss.Result<postcss.Document | postcss.Root>>;
+declare function createStyleHandler(options?: Partial<IStyleHandlerOptions>): (rawSource: string, opt?: Partial<IStyleHandlerOptions>) => Promise<postcss.Result<postcss.Document | postcss.Root>>;
 
 declare function internalCssSelectorReplacer(selectors: string, options?: InternalCssSelectorReplacerOptions): string;
 

package/dist/index.js

@@ -5,7 +5,7 @@ var _shared = require('@weapp-tailwindcss/shared');
 var _postcss = require('postcss'); var _postcss2 = _interopRequireDefault(_postcss);
 
 // src/defaults.ts
-function getDefaultOptions() {
+function getDefaultOptions(options) {
   return {
     // https://github.com/postcss/postcss-calc
     cssPresetEnv: {
@@ -16,12 +16,14 @@ function getDefaultOptions() {
         },
         "oklab-function": true,
         "color-mix": true,
-        "custom-properties": false
+        // 在 calc 下，这个需要开启
+        "custom-properties": _optionalChain([options, 'optionalAccess', _ => _.cssCalc]) ? { preserve: false } : _nullishCoalesce(_optionalChain([options, 'optionalAccess', _2 => _2.cssPresetEnv, 'optionalAccess', _3 => _3.features, 'optionalAccess', _4 => _4["custom-properties"]]), () => ( false))
       },
       autoprefixer: {
         add: false
       }
     },
+    // 支付宝小程序不支持，所以默认关闭
     cssRemoveProperty: true,
     // cssRemoveAtSupports: true,
     // cssRemoveAtMedia: true,
@@ -33,7 +35,10 @@ function getDefaultOptions() {
 }
 
 // src/plugins/index.ts
+var _postcsscalc = require('@weapp-tailwindcss/postcss-calc'); var _postcsscalc2 = _interopRequireDefault(_postcsscalc);
+
 var _postcsspresetenv = require('postcss-preset-env'); var _postcsspresetenv2 = _interopRequireDefault(_postcsspresetenv);
+var _postcsspxtransform = require('postcss-pxtransform'); var _postcsspxtransform2 = _interopRequireDefault(_postcsspxtransform);
 var _postcssremtoresponsivepixel = require('postcss-rem-to-responsive-pixel'); var _postcssremtoresponsivepixel2 = _interopRequireDefault(_postcssremtoresponsivepixel);
 
 // src/plugins/ctx.ts
@@ -133,7 +138,7 @@ function createRuleTransform(rule, options) {
           mangleContext
         });
       } else if (selector.type === "universal") {
-        if (_optionalChain([cssSelectorReplacement, 'optionalAccess', _ => _.universal])) {
+        if (_optionalChain([cssSelectorReplacement, 'optionalAccess', _5 => _5.universal])) {
           selector.value = composeIsPseudo(cssSelectorReplacement.universal);
         }
       } else if (selector.type === "selector") {
@@ -144,7 +149,7 @@ function createRuleTransform(rule, options) {
           }
         }
       } else if (selector.type === "pseudo") {
-        if (selector.value === ":root" && _optionalChain([cssSelectorReplacement, 'optionalAccess', _2 => _2.root])) {
+        if (selector.value === ":root" && _optionalChain([cssSelectorReplacement, 'optionalAccess', _6 => _6.root])) {
           selector.value = composeIsPseudo(cssSelectorReplacement.root);
         } else if (selector.value === ":where") {
           if (uniAppX) {
@@ -153,7 +158,7 @@ function createRuleTransform(rule, options) {
           if (index === 0 && selector.length === 1) {
             selector.walk((node, idx) => {
               if (idx === 0 && node.type === "class") {
-                const nodes2 = _optionalChain([node, 'access', _3 => _3.parent, 'optionalAccess', _4 => _4.nodes]);
+                const nodes2 = _optionalChain([node, 'access', _7 => _7.parent, 'optionalAccess', _8 => _8.nodes]);
                 if (nodes2) {
                   const first = nodes2[idx + 1];
                   if (first && first.type === "combinator" && first.value === ">") {
@@ -196,7 +201,7 @@ function createRuleTransform(rule, options) {
         }
       } else if (selector.type === "combinator") {
         if (selector.value === ">") {
-          const nodes2 = _optionalChain([selector, 'access', _5 => _5.parent, 'optionalAccess', _6 => _6.nodes]);
+          const nodes2 = _optionalChain([selector, 'access', _9 => _9.parent, 'optionalAccess', _10 => _10.nodes]);
           if (nodes2) {
             const first = nodes2[index + 1];
             if (first && first.type === "pseudo" && first.value === ":not" && (first.first.first.type === "attribute" && first.first.first.attribute === "hidden" || first.first.first.type === "tag" && first.first.first.value === "template")) {
@@ -205,7 +210,7 @@ function createRuleTransform(rule, options) {
                 const third = nodes2[index + 3];
                 if (third && third.type === "pseudo" && third.value === ":not" && (third.first.first.type === "attribute" && third.first.first.attribute === "hidden" || third.first.first.type === "tag" && third.first.first.value === "template")) {
                   const ast = getCombinatorSelectorAst(options);
-                  _optionalChain([selector, 'access', _7 => _7.parent, 'optionalAccess', _8 => _8.nodes, 'access', _9 => _9.splice, 'call', _10 => _10(
+                  _optionalChain([selector, 'access', _11 => _11.parent, 'optionalAccess', _12 => _12.nodes, 'access', _13 => _13.splice, 'call', _14 => _14(
                     index + 1,
                     3,
                     ...ast
@@ -248,7 +253,7 @@ function isOnlyBeforeAndAfterPseudoElement(node) {
   let a = false;
   _postcssselectorparser2.default.call(void 0, (selectors) => {
     selectors.walkPseudos((s) => {
-      if (_optionalChain([s, 'access', _11 => _11.parent, 'optionalAccess', _12 => _12.length]) === 1) {
+      if (_optionalChain([s, 'access', _15 => _15.parent, 'optionalAccess', _16 => _16.length]) === 1) {
         if (/^:?:before$/.test(s.value)) {
           b = true;
         }
@@ -269,13 +274,13 @@ function getFallbackRemove(rule, options) {
         maybeImportantId = true;
       }
       if (selector.type === "universal") {
-        _optionalChain([selector, 'access', _13 => _13.parent, 'optionalAccess', _14 => _14.remove, 'call', _15 => _15()]);
+        _optionalChain([selector, 'access', _17 => _17.parent, 'optionalAccess', _18 => _18.remove, 'call', _19 => _19()]);
       } else if (selector.type === "pseudo") {
         if (selector.value === ":is") {
-          if (maybeImportantId && _optionalChain([selector, 'access', _16 => _16.nodes, 'access', _17 => _17[0], 'optionalAccess', _18 => _18.type]) === "selector") {
+          if (maybeImportantId && _optionalChain([selector, 'access', _20 => _20.nodes, 'access', _21 => _21[0], 'optionalAccess', _22 => _22.type]) === "selector") {
             selector.replaceWith(selector.nodes[0]);
           } else {
-            _optionalChain([selector, 'access', _19 => _19.parent, 'optionalAccess', _20 => _20.remove, 'call', _21 => _21()]);
+            _optionalChain([selector, 'access', _23 => _23.parent, 'optionalAccess', _24 => _24.remove, 'call', _25 => _25()]);
           }
         } else if (selector.value === ":not") {
           for (const x of selector.nodes) {
@@ -298,7 +303,7 @@ function getFallbackRemove(rule, options) {
         }
       } else if (selector.type === "attribute") {
         if (selector.attribute === "hidden") {
-          _optionalChain([rule, 'optionalAccess', _22 => _22.remove, 'call', _23 => _23()]);
+          _optionalChain([rule, 'optionalAccess', _26 => _26.remove, 'call', _27 => _27()]);
         }
       }
     });
@@ -347,7 +352,7 @@ var postcssWeappTailwindcssPostPlugin = (options) => {
     p.DeclarationExit = (decl) => {
       if (decl.prop === "--tw-gradient-position" && decl.value.endsWith(OklabSuffix)) {
         decl.value = decl.value.slice(0, decl.value.length - OklabSuffix.length);
-      } else if (/calc\(\s*infinity\s*\*\s*1r?px/.test(decl.value)) {
+      } else if (/calc\(\s*infinity\s*\*\s*(?:\d+(?:\.\d*)?|\.\d+)r?px/.test(decl.value)) {
         decl.value = "9999px";
       }
     };
@@ -355,12 +360,12 @@ var postcssWeappTailwindcssPostPlugin = (options) => {
       if (opts.cssRemoveProperty && atRule.name === "property") {
         atRule.remove();
       }
-      _optionalChain([atRule, 'access', _24 => _24.nodes, 'optionalAccess', _25 => _25.length]) === 0 && atRule.remove();
+      _optionalChain([atRule, 'access', _28 => _28.nodes, 'optionalAccess', _29 => _29.length]) === 0 && atRule.remove();
     };
   }
   if (typeof opts.customRuleCallback === "function") {
     p.Rule = (rule) => {
-      _optionalChain([opts, 'access', _26 => _26.customRuleCallback, 'optionalCall', _27 => _27(rule, opts)]);
+      _optionalChain([opts, 'access', _30 => _30.customRuleCallback, 'optionalCall', _31 => _31(rule, opts)]);
     };
   }
   return p;
@@ -801,7 +806,7 @@ function remakeCssVarSelector(selectors, options) {
 function commonChunkPreflight(node, options) {
   const { ctx, cssInjectPreflight, injectAdditionalCssVarScope } = options;
   if (testIfVariablesScope(node)) {
-    _optionalChain([ctx, 'optionalAccess', _28 => _28.markVariablesScope, 'call', _29 => _29(node)]);
+    _optionalChain([ctx, 'optionalAccess', _32 => _32.markVariablesScope, 'call', _33 => _33(node)]);
     node.selectors = remakeCssVarSelector(node.selectors, options);
     node.before(makePseudoVarRule());
     if (typeof cssInjectPreflight === "function") {
@@ -866,9 +871,9 @@ var postcssWeappTailwindcssPrePlugin = (options) => {
       root.walkAtRules((atRule) => {
         if (atRule.name === "layer") {
           if (atRule.params === "properties") {
-            if (atRule.nodes === void 0 || _optionalChain([atRule, 'access', _30 => _30.nodes, 'optionalAccess', _31 => _31.length]) === 0) {
+            if (atRule.nodes === void 0 || _optionalChain([atRule, 'access', _34 => _34.nodes, 'optionalAccess', _35 => _35.length]) === 0) {
               layerProperties = atRule;
-            } else if (_optionalChain([atRule, 'access', _32 => _32.first, 'optionalAccess', _33 => _33.type]) === "atrule" && isTailwindcssV4ModernCheck(atRule.first)) {
+            } else if (_optionalChain([atRule, 'access', _36 => _36.first, 'optionalAccess', _37 => _37.type]) === "atrule" && isTailwindcssV4ModernCheck(atRule.first)) {
               if (layerProperties) {
                 layerProperties.replaceWith(atRule.first.nodes);
                 atRule.remove();
@@ -880,7 +885,7 @@ var postcssWeappTailwindcssPrePlugin = (options) => {
             atRule.replaceWith(atRule.nodes);
           }
         } else if (isTailwindcssV4ModernCheck(atRule)) {
-          if (_optionalChain([atRule, 'access', _34 => _34.first, 'optionalAccess', _35 => _35.type]) === "atrule" && atRule.first.name === "layer") {
+          if (_optionalChain([atRule, 'access', _38 => _38.first, 'optionalAccess', _39 => _39.type]) === "atrule" && atRule.first.name === "layer") {
             atRule.replaceWith(atRule.first.nodes);
           }
         }
@@ -903,7 +908,7 @@ function compare(e3, t) {
   return e3.a === t.a ? e3.b === t.b ? e3.c - t.c : e3.b - t.b : e3.a - t.a;
 }
 function selectorSpecificity(t, s) {
-  const i = _optionalChain([s, 'optionalAccess', _36 => _36.customSpecificity, 'optionalCall', _37 => _37(t)]);
+  const i = _optionalChain([s, 'optionalAccess', _40 => _40.customSpecificity, 'optionalCall', _41 => _41(t)]);
   if (i) return i;
   if (!t) return { a: 0, b: 0, c: 0 };
   let c = 0, n2 = 0, o2 = 0;
@@ -979,7 +984,7 @@ function selectorSpecificity(t, s) {
     case ":active-view-transition-type":
       return { a: 0, b: 1, c: 0 };
   }
-  else _postcssselectorparser2.default.isContainer(t) && _optionalChain([t, 'access', _38 => _38.nodes, 'optionalAccess', _39 => _39.length]) > 0 && t.nodes.forEach(((e3) => {
+  else _postcssselectorparser2.default.isContainer(t) && _optionalChain([t, 'access', _42 => _42.nodes, 'optionalAccess', _43 => _43.length]) > 0 && t.nodes.forEach(((e3) => {
     const t2 = selectorSpecificity(e3, s);
     c += t2.a, n2 += t2.b, o2 += t2.c;
   }));
@@ -1007,8 +1012,8 @@ function alwaysValidSelector(s) {
   const o2 = _postcssselectorparser2.default.call(void 0, ).astSync(s);
   let n2 = true;
   return o2.walk(((e3) => {
-    if ("class" !== e3.type && "comment" !== e3.type && "id" !== e3.type && "root" !== e3.type && "selector" !== e3.type && "string" !== e3.type && "tag" !== e3.type && "universal" !== e3.type && ("attribute" !== e3.type || e3.insensitive) && ("combinator" !== e3.type || "+" !== e3.value && ">" !== e3.value && "~" !== e3.value && " " !== e3.value) && ("pseudo" !== e3.type || _optionalChain([e3, 'access', _40 => _40.nodes, 'optionalAccess', _41 => _41.length]) || ":hover" !== e3.value.toLowerCase() && ":focus" !== e3.value.toLowerCase())) {
-      if ("pseudo" === e3.type && 1 === _optionalChain([e3, 'access', _42 => _42.nodes, 'optionalAccess', _43 => _43.length]) && ":not" === e3.value.toLowerCase()) {
+    if ("class" !== e3.type && "comment" !== e3.type && "id" !== e3.type && "root" !== e3.type && "selector" !== e3.type && "string" !== e3.type && "tag" !== e3.type && "universal" !== e3.type && ("attribute" !== e3.type || e3.insensitive) && ("combinator" !== e3.type || "+" !== e3.value && ">" !== e3.value && "~" !== e3.value && " " !== e3.value) && ("pseudo" !== e3.type || _optionalChain([e3, 'access', _44 => _44.nodes, 'optionalAccess', _45 => _45.length]) || ":hover" !== e3.value.toLowerCase() && ":focus" !== e3.value.toLowerCase())) {
+      if ("pseudo" === e3.type && 1 === _optionalChain([e3, 'access', _46 => _46.nodes, 'optionalAccess', _47 => _47.length]) && ":not" === e3.value.toLowerCase()) {
         let s2 = true;
         if (e3.nodes[0].walkCombinators((() => {
           s2 = false;
@@ -1159,8 +1164,8 @@ function splitSelectors(o2, n2, t = 0) {
     if (_postcssselectorparser2.default.call(void 0, ).astSync(o3).walkPseudos(((e3) => {
       if (":is" !== e3.value.toLowerCase() || !e3.nodes || !e3.nodes.length) return;
       if ("selector" === e3.nodes[0].type && 0 === e3.nodes[0].nodes.length) return;
-      if ("pseudo" === _optionalChain([e3, 'access', _44 => _44.parent, 'optionalAccess', _45 => _45.parent, 'optionalAccess', _46 => _46.type]) && ":not" === _optionalChain([e3, 'access', _47 => _47.parent, 'optionalAccess', _48 => _48.parent, 'optionalAccess', _49 => _49.value, 'optionalAccess', _50 => _50.toLowerCase, 'call', _51 => _51()])) return void a.push([{ start: e3.parent.parent.sourceIndex, end: e3.parent.parent.sourceIndex + e3.parent.parent.toString().length, option: `:not(${e3.nodes.toString()})` }]);
-      if ("pseudo" === _optionalChain([e3, 'access', _52 => _52.parent, 'optionalAccess', _53 => _53.parent, 'optionalAccess', _54 => _54.type]) && ":has" === _optionalChain([e3, 'access', _55 => _55.parent, 'optionalAccess', _56 => _56.parent, 'optionalAccess', _57 => _57.value, 'optionalAccess', _58 => _58.toLowerCase, 'call', _59 => _59()])) return void (e3.value = ":-csstools-matches");
+      if ("pseudo" === _optionalChain([e3, 'access', _48 => _48.parent, 'optionalAccess', _49 => _49.parent, 'optionalAccess', _50 => _50.type]) && ":not" === _optionalChain([e3, 'access', _51 => _51.parent, 'optionalAccess', _52 => _52.parent, 'optionalAccess', _53 => _53.value, 'optionalAccess', _54 => _54.toLowerCase, 'call', _55 => _55()])) return void a.push([{ start: e3.parent.parent.sourceIndex, end: e3.parent.parent.sourceIndex + e3.parent.parent.toString().length, option: `:not(${e3.nodes.toString()})` }]);
+      if ("pseudo" === _optionalChain([e3, 'access', _56 => _56.parent, 'optionalAccess', _57 => _57.parent, 'optionalAccess', _58 => _58.type]) && ":has" === _optionalChain([e3, 'access', _59 => _59.parent, 'optionalAccess', _60 => _60.parent, 'optionalAccess', _61 => _61.value, 'optionalAccess', _62 => _62.toLowerCase, 'call', _63 => _63()])) return void (e3.value = ":-csstools-matches");
       let o4 = e3.parent;
       for (; o4; ) {
         if (o4.value && ":is" === o4.value.toLowerCase() && "pseudo" === o4.type) return void (i = true);
@@ -1182,7 +1187,7 @@ function splitSelectors(o2, n2, t = 0) {
       let s = "";
       for (let n3 = 0; n3 < e3.length; n3++) {
         const t2 = e3[n3];
-        s += o3.substring(_optionalChain([e3, 'access', _60 => _60[n3 - 1], 'optionalAccess', _61 => _61.end]) || 0, e3[n3].start), s += ":-csstools-matches(" + t2.option + ")", n3 === e3.length - 1 && (s += o3.substring(e3[n3].end));
+        s += o3.substring(_optionalChain([e3, 'access', _64 => _64[n3 - 1], 'optionalAccess', _65 => _65.end]) || 0, e3[n3].start), s += ":-csstools-matches(" + t2.option + ")", n3 === e3.length - 1 && (s += o3.substring(e3[n3].end));
       }
       c.push(s);
     })), i && t < 10 && (c = splitSelectors(c, n2, t + 1)), c;
@@ -1243,19 +1248,60 @@ function getPlugins(options) {
   const ctx = createContext();
   options.ctx = ctx;
   const plugins = [
-    ..._nullishCoalesce(_optionalChain([options, 'access', _62 => _62.postcssOptions, 'optionalAccess', _63 => _63.plugins]), () => ( [])),
-    postcssWeappTailwindcssPrePlugin(options),
-    // calc({ }),
-    _postcsspresetenv2.default.call(void 0, options.cssPresetEnv)
-  ];
+    ..._nullishCoalesce(_optionalChain([options, 'access', _66 => _66.postcssOptions, 'optionalAccess', _67 => _67.plugins]), () => ( [])),
+    postcssWeappTailwindcssPrePlugin(options)
+  ].filter((x) => Boolean(x));
+  plugins.push(
+    _postcsspresetenv2.default.call(void 0, 
+      options.cssPresetEnv
+    )
+  );
+  if (options.px2rpx) {
+    plugins.push(
+      _postcsspxtransform2.default.call(void 0, 
+        _shared.defuOverrideArray.call(void 0, 
+          typeof options.px2rpx === "object" ? options.px2rpx : {},
+          {
+            platform: "weapp",
+            unitPrecision: 5,
+            propList: ["*"],
+            selectorBlackList: [],
+            replace: true,
+            mediaQuery: false,
+            minPixelValue: 0,
+            designWidth: 750,
+            deviceRatio: {
+              375: 2,
+              640: 2.34 / 2,
+              750: 1,
+              828: 1.81 / 2
+            }
+          }
+        )
+      )
+    );
+  }
   if (options.rem2rpx) {
     plugins.push(
       _postcssremtoresponsivepixel2.default.call(void 0, 
-        typeof options.rem2rpx === "object" ? options.rem2rpx : {
-          rootValue: 32,
-          propList: ["*"],
-          transformUnit: "rpx"
-        }
+        _shared.defuOverrideArray.call(void 0, 
+          typeof options.rem2rpx === "object" ? options.rem2rpx : {
+            rootValue: 32,
+            propList: ["*"],
+            transformUnit: "rpx"
+          },
+          {
+            processorStage: "OnceExit"
+          }
+        )
+      )
+    );
+  }
+  if (options.cssCalc) {
+    plugins.push(
+      // 核心在 OnceExit 的时候去执行的
+      _postcsscalc2.default.call(void 0, 
+        typeof options.cssCalc === "object" ? options.cssCalc : {}
       )
     );
   }
@@ -1288,7 +1334,7 @@ function styleHandler(rawSource, options) {
     getPlugins(options)
   ).process(
     rawSource,
-    _shared.defu.call(void 0, _optionalChain([options, 'access', _64 => _64.postcssOptions, 'optionalAccess', _65 => _65.options]), {
+    _shared.defu.call(void 0, _optionalChain([options, 'access', _68 => _68.postcssOptions, 'optionalAccess', _69 => _69.options]), {
       from: void 0
     })
   ).async();
@@ -1296,7 +1342,7 @@ function styleHandler(rawSource, options) {
 function createStyleHandler(options) {
   const cachedOptions = _shared.defuOverrideArray.call(void 0, 
     options,
-    getDefaultOptions()
+    getDefaultOptions(options)
   );
   cachedOptions.cssInjectPreflight = createInjectPreflight(cachedOptions.cssPreflight);
   return (rawSource, opt) => {

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import "./chunk-WAXGOBY2.mjs";
 
 // src/handler.ts
-import { defu as defu3, defuOverrideArray as defuOverrideArray2 } from "@weapp-tailwindcss/shared";
+import { defu as defu3, defuOverrideArray as defuOverrideArray3 } from "@weapp-tailwindcss/shared";
 import postcss from "postcss";
 
 // src/defaults.ts
-function getDefaultOptions() {
+function getDefaultOptions(options) {
   return {
     // https://github.com/postcss/postcss-calc
     cssPresetEnv: {
@@ -16,12 +16,14 @@ function getDefaultOptions() {
         },
         "oklab-function": true,
         "color-mix": true,
-        "custom-properties": false
+        // 在 calc 下，这个需要开启
+        "custom-properties": options?.cssCalc ? { preserve: false } : options?.cssPresetEnv?.features?.["custom-properties"] ?? false
       },
       autoprefixer: {
         add: false
       }
     },
+    // 支付宝小程序不支持，所以默认关闭
     cssRemoveProperty: true,
     // cssRemoveAtSupports: true,
     // cssRemoveAtMedia: true,
@@ -33,7 +35,10 @@ function getDefaultOptions() {
 }
 
 // src/plugins/index.ts
+import postcssCalc from "@weapp-tailwindcss/postcss-calc";
+import { defuOverrideArray as defuOverrideArray2 } from "@weapp-tailwindcss/shared";
 import postcssPresetEnv from "postcss-preset-env";
+import postcssPxtransform from "postcss-pxtransform";
 import postcssRem2rpx from "postcss-rem-to-responsive-pixel";
 
 // src/plugins/ctx.ts
@@ -347,7 +352,7 @@ var postcssWeappTailwindcssPostPlugin = (options) => {
     p.DeclarationExit = (decl) => {
       if (decl.prop === "--tw-gradient-position" && decl.value.endsWith(OklabSuffix)) {
         decl.value = decl.value.slice(0, decl.value.length - OklabSuffix.length);
-      } else if (/calc\(\s*infinity\s*\*\s*1r?px/.test(decl.value)) {
+      } else if (/calc\(\s*infinity\s*\*\s*(?:\d+(?:\.\d*)?|\.\d+)r?px/.test(decl.value)) {
         decl.value = "9999px";
       }
     };
@@ -1244,18 +1249,59 @@ function getPlugins(options) {
   options.ctx = ctx;
   const plugins = [
     ...options.postcssOptions?.plugins ?? [],
-    postcssWeappTailwindcssPrePlugin(options),
-    // calc({ }),
-    postcssPresetEnv(options.cssPresetEnv)
-  ];
+    postcssWeappTailwindcssPrePlugin(options)
+  ].filter((x) => Boolean(x));
+  plugins.push(
+    postcssPresetEnv(
+      options.cssPresetEnv
+    )
+  );
+  if (options.px2rpx) {
+    plugins.push(
+      postcssPxtransform(
+        defuOverrideArray2(
+          typeof options.px2rpx === "object" ? options.px2rpx : {},
+          {
+            platform: "weapp",
+            unitPrecision: 5,
+            propList: ["*"],
+            selectorBlackList: [],
+            replace: true,
+            mediaQuery: false,
+            minPixelValue: 0,
+            designWidth: 750,
+            deviceRatio: {
+              375: 2,
+              640: 2.34 / 2,
+              750: 1,
+              828: 1.81 / 2
+            }
+          }
+        )
+      )
+    );
+  }
   if (options.rem2rpx) {
     plugins.push(
       postcssRem2rpx(
-        typeof options.rem2rpx === "object" ? options.rem2rpx : {
-          rootValue: 32,
-          propList: ["*"],
-          transformUnit: "rpx"
-        }
+        defuOverrideArray2(
+          typeof options.rem2rpx === "object" ? options.rem2rpx : {
+            rootValue: 32,
+            propList: ["*"],
+            transformUnit: "rpx"
+          },
+          {
+            processorStage: "OnceExit"
+          }
+        )
+      )
+    );
+  }
+  if (options.cssCalc) {
+    plugins.push(
+      // 核心在 OnceExit 的时候去执行的
+      postcssCalc(
+        typeof options.cssCalc === "object" ? options.cssCalc : {}
       )
     );
   }
@@ -1294,15 +1340,15 @@ function styleHandler(rawSource, options) {
   ).async();
 }
 function createStyleHandler(options) {
-  const cachedOptions = defuOverrideArray2(
+  const cachedOptions = defuOverrideArray3(
     options,
-    getDefaultOptions()
+    getDefaultOptions(options)
   );
   cachedOptions.cssInjectPreflight = createInjectPreflight(cachedOptions.cssPreflight);
   return (rawSource, opt) => {
     return styleHandler(
       rawSource,
-      defuOverrideArray2(opt, cachedOptions)
+      defuOverrideArray3(opt, cachedOptions)
     );
   };
 }

package/dist/{types-tu70dcVo.d.mts → types-C5X6IWCb.d.mts}

@@ -1,7 +1,9 @@
 import { IMangleScopeContext } from '@weapp-tailwindcss/mangle';
+import { PostCssCalcOptions } from '@weapp-tailwindcss/postcss-calc';
 import { Rule } from 'postcss';
 import { Result } from 'postcss-load-config';
 import { pluginOptions } from 'postcss-preset-env';
+import { PxtransformOptions } from 'postcss-pxtransform';
 import { UserDefinedOptions } from 'postcss-rem-to-responsive-pixel';
 
 declare function createContext(): {
@@ -31,7 +33,7 @@ type RequiredStyleHandlerOptions = {
     cssPreflight?: CssPreflightOptions;
     cssInjectPreflight?: InjectPreflight;
     escapeMap?: Record<string, string>;
-} & Pick<UserDefinedPostcssOptions, 'cssPreflightRange' | 'cssChildCombinatorReplaceValue' | 'injectAdditionalCssVarScope' | 'cssSelectorReplacement' | 'rem2rpx'>;
+} & Pick<UserDefinedPostcssOptions, 'cssPreflightRange' | 'cssChildCombinatorReplaceValue' | 'injectAdditionalCssVarScope' | 'cssSelectorReplacement' | 'rem2rpx' | 'px2rpx'>;
 interface InternalCssSelectorReplacerOptions {
     mangleContext?: IMangleScopeContext;
     escapeMap?: Record<string, string>;
@@ -44,6 +46,7 @@ type IStyleHandlerOptions = {
     cssRemoveProperty?: boolean;
     cssRemoveHoverPseudoClass?: boolean;
     cssPresetEnv?: pluginOptions;
+    cssCalc?: boolean | PostCssCalcOptions;
     atRules?: {
         property?: boolean;
         supports?: boolean;
@@ -63,6 +66,7 @@ interface UserDefinedPostcssOptions {
         universal?: string | string[] | false;
     };
     rem2rpx?: boolean | UserDefinedOptions;
+    px2rpx?: boolean | PxtransformOptions;
     postcssOptions?: LoadedPostcssOptions;
     cssRemoveHoverPseudoClass?: boolean;
     cssRemoveProperty?: boolean;

package/dist/{types-tu70dcVo.d.ts → types-C5X6IWCb.d.ts}

@@ -1,7 +1,9 @@
 import { IMangleScopeContext } from '@weapp-tailwindcss/mangle';
+import { PostCssCalcOptions } from '@weapp-tailwindcss/postcss-calc';
 import { Rule } from 'postcss';
 import { Result } from 'postcss-load-config';
 import { pluginOptions } from 'postcss-preset-env';
+import { PxtransformOptions } from 'postcss-pxtransform';
 import { UserDefinedOptions } from 'postcss-rem-to-responsive-pixel';
 
 declare function createContext(): {
@@ -31,7 +33,7 @@ type RequiredStyleHandlerOptions = {
     cssPreflight?: CssPreflightOptions;
     cssInjectPreflight?: InjectPreflight;
     escapeMap?: Record<string, string>;
-} & Pick<UserDefinedPostcssOptions, 'cssPreflightRange' | 'cssChildCombinatorReplaceValue' | 'injectAdditionalCssVarScope' | 'cssSelectorReplacement' | 'rem2rpx'>;
+} & Pick<UserDefinedPostcssOptions, 'cssPreflightRange' | 'cssChildCombinatorReplaceValue' | 'injectAdditionalCssVarScope' | 'cssSelectorReplacement' | 'rem2rpx' | 'px2rpx'>;
 interface InternalCssSelectorReplacerOptions {
     mangleContext?: IMangleScopeContext;
     escapeMap?: Record<string, string>;
@@ -44,6 +46,7 @@ type IStyleHandlerOptions = {
     cssRemoveProperty?: boolean;
     cssRemoveHoverPseudoClass?: boolean;
     cssPresetEnv?: pluginOptions;
+    cssCalc?: boolean | PostCssCalcOptions;
     atRules?: {
         property?: boolean;
         supports?: boolean;
@@ -63,6 +66,7 @@ interface UserDefinedPostcssOptions {
         universal?: string | string[] | false;
     };
     rem2rpx?: boolean | UserDefinedOptions;
+    px2rpx?: boolean | PxtransformOptions;
     postcssOptions?: LoadedPostcssOptions;
     cssRemoveHoverPseudoClass?: boolean;
     cssRemoveProperty?: boolean;

package/dist/types.d.mts

@@ -1,6 +1,8 @@
 import '@weapp-tailwindcss/mangle';
+import '@weapp-tailwindcss/postcss-calc';
 import 'postcss';
 import 'postcss-load-config';
 import 'postcss-preset-env';
+import 'postcss-pxtransform';
 import 'postcss-rem-to-responsive-pixel';
-export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions } from './types-tu70dcVo.mjs';
+export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions } from './types-C5X6IWCb.mjs';

package/dist/types.d.ts

@@ -1,6 +1,8 @@
 import '@weapp-tailwindcss/mangle';
+import '@weapp-tailwindcss/postcss-calc';
 import 'postcss';
 import 'postcss-load-config';
 import 'postcss-preset-env';
+import 'postcss-pxtransform';
 import 'postcss-rem-to-responsive-pixel';
-export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions } from './types-tu70dcVo.js';
+export { d as CssPreflightOptions, C as CustomRuleCallback, b as IPropValue, I as IStyleHandlerOptions, a as InternalCssSelectorReplacerOptions, L as LoadedPostcssOptions, R as RequiredStyleHandlerOptions, U as UserDefinedPostcssOptions } from './types-C5X6IWCb.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weapp-tailwindcss/postcss",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "@weapp-tailwindcss/postcss",
   "author": "ice breaker <1324318532@qq.com>",
   "license": "MIT",
@@ -40,9 +40,11 @@
   ],
   "dependencies": {
     "@weapp-core/escape": "~4.0.1",
+    "@weapp-tailwindcss/postcss-calc": "^1.0.0",
     "postcss": "~8.5.6",
     "postcss-preset-env": "^10.3.1",
-    "postcss-rem-to-responsive-pixel": "~6.0.2",
+    "postcss-pxtransform": "^4.1.6",
+    "postcss-rem-to-responsive-pixel": "~6.1.0",
     "postcss-selector-parser": "~7.1.0",
     "@weapp-tailwindcss/shared": "1.0.3"
   },