chore: bump version

Author: sonofmagic

.changeset/loud-birds-arrive.md

@@ -0,0 +1,5 @@
+---
+"@weapp-tailwindcss/postcss": minor
+---
+
+feat: 添加 postcss calc 和 pxtransform 支持

apps/vite-native/package.json

@@ -32,7 +32,7 @@
   },
   "devDependencies": {
     "@egoist/tailwindcss-icons": "^1.9.0",
-    "@iconify-json/lucide": "^1.2.66",
+    "@iconify-json/lucide": "^1.2.67",
     "@iconify-json/mdi": "^1.2.3",
     "@tailwindcss/postcss": "^4.1.13",
     "@tailwindcss/vite": "^4.1.13",

packages/postcss/package.json

@@ -51,13 +51,14 @@
     "@weapp-core/escape": "~4.0.1",
     "@weapp-tailwindcss/shared": "workspace:*",
     "postcss": "~8.5.6",
+    "postcss-calc": "^10.1.1",
     "postcss-preset-env": "^10.3.1",
+    "postcss-pxtransform": "^4.1.6",
     "postcss-rem-to-responsive-pixel": "~6.0.2",
     "postcss-selector-parser": "~7.1.0"
   },
   "devDependencies": {
     "@weapp-tailwindcss/mangle": "workspace:*",
-    "postcss-calc": "^10.1.1",
     "postcss-value-parser": "^4.2.0"
   }
 }

packages/postcss/src/plugins/index.ts

@@ -1,7 +1,10 @@
 import type { AcceptedPlugin } from 'postcss'
+import type { PxtransformOptions } from 'postcss-pxtransform'
 import type { IStyleHandlerOptions } from '../types'
-// import calc from 'postcss-calc'
+import { defuOverrideArray } from '@weapp-tailwindcss/shared'
+import postcssCalc from 'postcss-calc'
 import postcssPresetEnv from 'postcss-preset-env'
+import postcssPxtransform from 'postcss-pxtransform'
 import postcssRem2rpx from 'postcss-rem-to-responsive-pixel'
 import { createContext } from './ctx'
 import { postcssWeappTailwindcssPostPlugin as post } from './post'
@@ -12,15 +15,14 @@ import { postcssWeappTailwindcssPrePlugin as pre } from './pre'
  * @param options - 样式处理器选项，包含 PostCSS 插件和其他配置。
  * @returns AcceptedPlugin[] - 生成的 PostCSS 插件数组。
  */
-export function getPlugins(options: IStyleHandlerOptions) {
+export function getPlugins(options: IStyleHandlerOptions): AcceptedPlugin[] {
   const ctx = createContext()
   options.ctx = ctx
-  const plugins: AcceptedPlugin[] = [
+  const plugins = [
     ...(options.postcssOptions?.plugins ?? []),
     pre(options),
-    // calc({ }),
     postcssPresetEnv(options.cssPresetEnv),
-  ]
+  ].filter(x => Boolean(x)) as AcceptedPlugin[]
   if (options.rem2rpx) {
     plugins.push(
       postcssRem2rpx(
@@ -34,6 +36,43 @@ export function getPlugins(options: IStyleHandlerOptions) {
       ),
     )
   }
+  if (options.cssCalc) {
+    plugins.push(
+      postcssCalc(
+        options.cssCalc,
+      ),
+    )
+  }
+
+  if (options.px2rpx) {
+    plugins.push(
+      postcssPxtransform(
+        defuOverrideArray<PxtransformOptions, PxtransformOptions[]>(
+          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,
+            },
+          },
+        ),
+
+      ),
+    )
+  }
+
   plugins.push(post(options))
   return plugins
 }

packages/postcss/src/plugins/postcss-pxtransform.d.ts

@@ -0,0 +1,25 @@
+declare module 'postcss-pxtransform' {
+  import type { PluginCreator } from 'postcss'
+
+  export interface PxtransformOptions {
+    platform?: string
+    designWidth?: number | (() => number)
+    deviceRatio?: Record<string, number>
+    unitPrecision?: number
+    propList?: (string | RegExp)[]
+    selectorBlackList?: (string | RegExp) []
+    replace?: boolean
+    mediaQuery?: boolean
+    minPixelValue?: number
+  }
+
+  const pxtransform: PluginCreator<PxtransformOptions>
+  export default pxtransform
+}
+// 默认值
+// unitPrecision: 5,
+// propList: ['*'],
+// selectorBlackList: [],
+// replace: true,
+// mediaQuery: false,
+// minPixelValue: 0

packages/postcss/src/types.ts

@@ -1,8 +1,10 @@
 import type { IMangleScopeContext } from '@weapp-tailwindcss/mangle'
 import type { Rule } from 'postcss'
+import type { PostCssCalcOptions } from 'postcss-calc'
 import type { Result } from 'postcss-load-config'
 import type { pluginOptions as PresetEnvOptions } from 'postcss-preset-env'
-import type { UserDefinedOptions as rem2rpxOptions } from 'postcss-rem-to-responsive-pixel'
+import type { PxtransformOptions as Px2rpxOptions } from 'postcss-pxtransform'
+import type { UserDefinedOptions as Rem2rpxOptions } from 'postcss-rem-to-responsive-pixel'
 import type { IContext as PostcssContext } from './plugins/ctx'
 import type { InjectPreflight } from './preflight'
 
@@ -36,6 +38,7 @@ export type RequiredStyleHandlerOptions = {
   | 'injectAdditionalCssVarScope'
   | 'cssSelectorReplacement'
   | 'rem2rpx'
+  | 'px2rpx'
 >
 
 export interface InternalCssSelectorReplacerOptions {
@@ -51,6 +54,7 @@ export type IStyleHandlerOptions = {
   cssRemoveProperty?: boolean
   cssRemoveHoverPseudoClass?: boolean
   cssPresetEnv?: PresetEnvOptions
+  cssCalc?: PostCssCalcOptions
   atRules?: {
     property?: boolean
     // A 新增 wxss 支持 @supports 反馈详情
@@ -72,7 +76,8 @@ export interface UserDefinedPostcssOptions {
     root?: string | string[] | false
     universal?: string | string[] | false
   }
-  rem2rpx?: boolean | rem2rpxOptions
+  rem2rpx?: boolean | Rem2rpxOptions
+  px2rpx?: boolean | Px2rpxOptions
   postcssOptions?: LoadedPostcssOptions
   cssRemoveHoverPseudoClass?: boolean
   cssRemoveProperty?: boolean