refactor: postcss plugins

packages/uni-app-vite/src/plugin/index.ts

-import { UniVitePlugin } from '@dcloudio/uni-cli-shared'
+import {
+  initPostcssPlugin,
+  parseRpx2UnitOnce,
+  UniVitePlugin,
+} from '@dcloudio/uni-cli-shared'
 
 import { uniOptions } from './uni'
 import { buildOptions } from './build'
@@ -10,6 +14,16 @@ export function uniAppPlugin(): UniVitePlugin {
     uni: uniOptions(),
     config(config, env) {
       return {
+        css: {
+          postcss: {
+            plugins: initPostcssPlugin({
+              uniApp: parseRpx2UnitOnce(
+                process.env.UNI_INPUT_DIR,
+                process.env.UNI_PLATFORM
+              ),
+            }),
+          },
+        },
         build: buildOptions(config, env),
       }
     },

packages/uni-cli-shared/package.json

@@ -29,6 +29,7 @@
     "@vue/compiler-sfc": "3.2.29",
     "@vue/server-renderer": "3.2.29",
     "@vue/shared": "3.2.29",
+    "autoprefixer": "^10.4.2",
     "base64url": "^3.0.1",
     "chokidar": "^3.5.2",
     "compare-versions": "^3.6.0",

packages/uni-cli-shared/src/postcss/index.ts

+import type { Plugin } from 'postcss'
+import type { Options } from 'autoprefixer'
 import uniPostcssScopedPlugin from './plugins/stylePluginScoped'
-import uniPostcssPlugin from './plugins/uniapp'
+import uniPostcssPlugin, { UniAppCssProcessorOptions } from './plugins/uniapp'
 export { uniPostcssPlugin }
 export { uniPostcssScopedPlugin }
+export function initPostcssPlugin({
+  uniApp,
+  autoprefixer,
+}: {
+  uniApp?: UniAppCssProcessorOptions
+  autoprefixer?: Options | false
+} = {}): Plugin[] {
+  const plugins: Plugin[] = [uniPostcssPlugin(uniApp)]
+  // nvue 不需要 autoprefixer
+  if (autoprefixer !== false) {
+    plugins.push(require('autoprefixer')(autoprefixer))
+  }
+  return plugins
+}

packages/uni-cli-shared/src/postcss/plugins/uniapp.ts

@@ -7,10 +7,8 @@ import {
   isBuiltInComponent,
   COMPONENT_SELECTOR_PREFIX,
 } from '@dcloudio/uni-shared'
-import { parseRpx2UnitOnce } from '../../json/manifest'
 
-interface UniAppCssProcessorOptions {
-  page?: string
+export interface UniAppCssProcessorOptions {
   unit?: string // 目标单位，默认rem
   unitRatio?: number // 单位转换比例，默认10/320
   unitPrecision?: number // 单位精度，默认5
@@ -121,14 +119,10 @@ const transforms: Record<string, RewriteTag | undefined> = {
 
 const uniapp = (opts?: UniAppCssProcessorOptions) => {
   const platform = process.env.UNI_PLATFORM
-  if (!opts) {
-    const inputDir = process.env.UNI_INPUT_DIR
-    opts = extend(parseRpx2UnitOnce(inputDir, platform))
-  }
   const { unit, unitRatio, unitPrecision } = extend(
     {},
     defaultUniAppCssProcessorOptions,
-    opts || {}
+    opts
   )
   const rpx2unit = createRpx2Unit(unit, unitRatio, unitPrecision)
   return {

packages/uni-h5-vite/src/plugin/config.ts

@@ -7,6 +7,8 @@ import {
   getDevServerOptions,
   resolveMainPathOnce,
   parseManifestJsonOnce,
+  initPostcssPlugin,
+  parseRpx2UnitOnce,
 } from '@dcloudio/uni-cli-shared'
 import { createDefine, isSsr } from '../utils'
 import { esbuildPrePlugin } from './esbuild/esbuildPrePlugin'
@@ -47,6 +49,13 @@ export function createConfig(options: {
     }
 
     return {
+      css: {
+        postcss: {
+          plugins: initPostcssPlugin({
+            uniApp: parseRpx2UnitOnce(inputDir, process.env.UNI_PLATFORM),
+          }),
+        },
+      },
       optimizeDeps: {
         entries: resolveMainPathOnce(inputDir),
         exclude: external,

packages/uni-h5/dist/uni-h5.cjs.js

@@ -6381,7 +6381,7 @@ var index$j = /* @__PURE__ */ defineBuiltInComponent({
       const children = [];
       if (slots.default) {
         slots.default().forEach((vnode) => {
-          if (vnode.shapeFlag & 8) {
+          if (vnode.shapeFlag & 8 && vnode.type !== vue.Comment) {
             const lines = parseText(vnode.children, {
               space: props2.space,
               decode: props2.decode

packages/uni-h5/dist/uni-h5.es.js

@@ -13231,7 +13231,7 @@ var index$j = /* @__PURE__ */ defineBuiltInComponent({
       const children = [];
       if (slots.default) {
         slots.default().forEach((vnode) => {
-          if (vnode.shapeFlag & 8) {
+          if (vnode.shapeFlag & 8 && vnode.type !== Comment) {
             const lines = parseText(vnode.children, {
               space: props2.space,
               decode: props2.decode

packages/uni-mp-vite/src/plugin/index.ts

@@ -8,6 +8,8 @@ import {
   parseManifestJsonOnce,
   findMiniProgramTemplateFiles,
   MiniProgramCompilerOptions,
+  initPostcssPlugin,
+  parseRpx2UnitOnce,
 } from '@dcloudio/uni-cli-shared'
 import type {
   SFCDescriptor,
@@ -125,6 +127,16 @@ export function uniMiniProgramPlugin(
           },
           preserveSymlinks: true,
         },
+        css: {
+          postcss: {
+            plugins: initPostcssPlugin({
+              uniApp: parseRpx2UnitOnce(
+                process.env.UNI_INPUT_DIR,
+                process.env.UNI_PLATFORM
+              ),
+            }),
+          },
+        },
         build: buildOptions(),
       }
     },

packages/uni-shared/dist/uni-shared.cjs.js

@@ -344,6 +344,7 @@ const defaultMiniProgramRpx2Unit = {
     unitRatio: 1,
     unitPrecision: 1,
 };
+const defaultNVueRpx2Unit = defaultMiniProgramRpx2Unit;
 function createRpx2Unit(unit, unitRatio, unitPrecision) {
     // ignore: rpxCalcIncludeWidth
     return (val) => val.replace(unitRE, (m, $1) => {
@@ -1415,6 +1416,7 @@ exports.debounce = debounce;
 exports.decode = decode;
 exports.decodedQuery = decodedQuery;
 exports.defaultMiniProgramRpx2Unit = defaultMiniProgramRpx2Unit;
+exports.defaultNVueRpx2Unit = defaultNVueRpx2Unit;
 exports.defaultRpx2Unit = defaultRpx2Unit;
 exports.dynamicSlotName = dynamicSlotName;
 exports.forcePatchProp = forcePatchProp;

packages/uni-shared/dist/uni-shared.d.ts

@@ -148,6 +148,12 @@ export declare const defaultMiniProgramRpx2Unit: {
     unitPrecision: number;
 };
 
+export declare const defaultNVueRpx2Unit: {
+    unit: string;
+    unitRatio: number;
+    unitPrecision: number;
+};
+
 export declare const defaultRpx2Unit: {
     unit: string;
     unitRatio: number;

packages/uni-shared/dist/uni-shared.es.js

@@ -340,6 +340,7 @@ const defaultMiniProgramRpx2Unit = {
     unitRatio: 1,
     unitPrecision: 1,
 };
+const defaultNVueRpx2Unit = defaultMiniProgramRpx2Unit;
 function createRpx2Unit(unit, unitRatio, unitPrecision) {
     // ignore: rpxCalcIncludeWidth
     return (val) => val.replace(unitRE, (m, $1) => {
@@ -1299,4 +1300,4 @@ function getEnvLocale() {
     return (lang && lang.replace(/[.:].*/, '')) || 'en';
 }
 
-export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_ADD_WXS_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_PAGE_SCROLL, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CHANGE_PREFIX, ATTR_CLASS, ATTR_INNER_HTML, ATTR_STYLE, ATTR_TEXT_CONTENT, ATTR_V_OWNER_ID, ATTR_V_RENDERJS, ATTR_V_SHOW, BACKGROUND_COLOR, BUILT_IN_TAGS, BUILT_IN_TAG_NAMES, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventChannel, EventModifierFlags, I18N_JSON_DELIMITERS, JSON_PROTOCOL, LINEFEED, MINI_PROGRAM_PAGE_RUNTIME_HOOKS, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, NVUE_BUILT_IN_TAGS, NVUE_U_BUILT_IN_TAGS, NVueTextNode, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, ON_WXS_INVOKE_CALL_METHOD, PLUS_RE, PRIMARY_COLOR, RENDERJS_MODULES, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, SLOT_DEFAULT_NAME, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UNI_STORAGE_LOCALE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniLifecycleHooks, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, WXS_MODULES, WXS_PROTOCOL, addFont, addLeadingSlash, cache, cacheStringFunction, callOptions, createIsCustomElement, createRpx2Unit, createUniEvent, customizeEvent, debounce, decode, decodedQuery, defaultMiniProgramRpx2Unit, defaultRpx2Unit, dynamicSlotName, forcePatchProp, formatAppLog, formatDateTime, formatH5Log, formatLog, getCustomDataset, getEnvLocale, getLen, getValueByDataPath, initCustomDataset, invokeArrayFns, isAppNVueNativeTag, isAppNativeTag, isBuiltInComponent, isComponentInternalInstance, isComponentTag, isH5CustomElement, isH5NativeTag, isMiniProgramNativeTag, isRootHook, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, resolveComponentInstance, resolveOwnerEl, resolveOwnerVm, sanitise, scrollTo, stringifyQuery, updateElementStyle };
+export { ACTION_TYPE_ADD_EVENT, ACTION_TYPE_ADD_WXS_EVENT, ACTION_TYPE_CREATE, ACTION_TYPE_EVENT, ACTION_TYPE_INSERT, ACTION_TYPE_PAGE_CREATE, ACTION_TYPE_PAGE_CREATED, ACTION_TYPE_PAGE_SCROLL, ACTION_TYPE_REMOVE, ACTION_TYPE_REMOVE_ATTRIBUTE, ACTION_TYPE_REMOVE_EVENT, ACTION_TYPE_SET_ATTRIBUTE, ACTION_TYPE_SET_TEXT, ATTR_CHANGE_PREFIX, ATTR_CLASS, ATTR_INNER_HTML, ATTR_STYLE, ATTR_TEXT_CONTENT, ATTR_V_OWNER_ID, ATTR_V_RENDERJS, ATTR_V_SHOW, BACKGROUND_COLOR, BUILT_IN_TAGS, BUILT_IN_TAG_NAMES, COMPONENT_NAME_PREFIX, COMPONENT_PREFIX, COMPONENT_SELECTOR_PREFIX, DATA_RE, EventChannel, EventModifierFlags, I18N_JSON_DELIMITERS, JSON_PROTOCOL, LINEFEED, MINI_PROGRAM_PAGE_RUNTIME_HOOKS, NAVBAR_HEIGHT, NODE_TYPE_COMMENT, NODE_TYPE_ELEMENT, NODE_TYPE_PAGE, NODE_TYPE_TEXT, NVUE_BUILT_IN_TAGS, NVUE_U_BUILT_IN_TAGS, NVueTextNode, ON_ADD_TO_FAVORITES, ON_APP_ENTER_BACKGROUND, ON_APP_ENTER_FOREGROUND, ON_BACK_PRESS, ON_ERROR, ON_HIDE, ON_KEYBOARD_HEIGHT_CHANGE, ON_LAUNCH, ON_LOAD, ON_NAVIGATION_BAR_BUTTON_TAP, ON_NAVIGATION_BAR_SEARCH_INPUT_CHANGED, ON_NAVIGATION_BAR_SEARCH_INPUT_CLICKED, ON_NAVIGATION_BAR_SEARCH_INPUT_CONFIRMED, ON_NAVIGATION_BAR_SEARCH_INPUT_FOCUS_CHANGED, ON_PAGE_NOT_FOUND, ON_PAGE_SCROLL, ON_PULL_DOWN_REFRESH, ON_REACH_BOTTOM, ON_REACH_BOTTOM_DISTANCE, ON_READY, ON_RESIZE, ON_SHARE_APP_MESSAGE, ON_SHARE_TIMELINE, ON_SHOW, ON_TAB_ITEM_TAP, ON_THEME_CHANGE, ON_UNHANDLE_REJECTION, ON_UNLOAD, ON_WEB_INVOKE_APP_SERVICE, ON_WXS_INVOKE_CALL_METHOD, PLUS_RE, PRIMARY_COLOR, RENDERJS_MODULES, RESPONSIVE_MIN_WIDTH, SCHEME_RE, SELECTED_COLOR, SLOT_DEFAULT_NAME, TABBAR_HEIGHT, TAGS, UNI_SSR, UNI_SSR_DATA, UNI_SSR_GLOBAL_DATA, UNI_SSR_STORE, UNI_SSR_TITLE, UNI_STORAGE_LOCALE, UniBaseNode, UniCommentNode, UniElement, UniEvent, UniInputElement, UniLifecycleHooks, UniNode, UniTextAreaElement, UniTextNode, WEB_INVOKE_APPSERVICE, WXS_MODULES, WXS_PROTOCOL, addFont, addLeadingSlash, cache, cacheStringFunction, callOptions, createIsCustomElement, createRpx2Unit, createUniEvent, customizeEvent, debounce, decode, decodedQuery, defaultMiniProgramRpx2Unit, defaultNVueRpx2Unit, defaultRpx2Unit, dynamicSlotName, forcePatchProp, formatAppLog, formatDateTime, formatH5Log, formatLog, getCustomDataset, getEnvLocale, getLen, getValueByDataPath, initCustomDataset, invokeArrayFns, isAppNVueNativeTag, isAppNativeTag, isBuiltInComponent, isComponentInternalInstance, isComponentTag, isH5CustomElement, isH5NativeTag, isMiniProgramNativeTag, isRootHook, normalizeDataset, normalizeEventType, normalizeTarget, once, parseEventName, parseQuery, parseUrl, passive, plusReady, removeLeadingSlash, resolveComponentInstance, resolveOwnerEl, resolveOwnerVm, sanitise, scrollTo, stringifyQuery, updateElementStyle };

packages/uni-shared/src/dom/style.ts

@@ -21,6 +21,8 @@ export const defaultMiniProgramRpx2Unit = {
   unitPrecision: 1,
 }
 
+export const defaultNVueRpx2Unit = defaultMiniProgramRpx2Unit
+
 export type Rpx2UnitOptions = typeof defaultRpx2Unit
 
 export function createRpx2Unit(

packages/vite-plugin-uni/src/config/css.ts

@@ -13,19 +13,11 @@ function resolveAdditionalData(inputDir: string, config: UserConfig) {
   return fs.readFileSync(uniScssFile, 'utf8') + '\n' + userAdditionalData
 }
 
-function resolvePostcssConfig(inputDir: string) {
-  return [
-    path.resolve(inputDir, 'postcss.config.js'),
-    path.resolve(process.cwd(), 'postcss.config.js'),
-  ].find((file) => fs.existsSync(file))
-}
-
 export function createCss(
   options: VitePluginUniResolvedOptions,
   config: UserConfig
 ): UserConfig['css'] {
   return {
-    postcss: resolvePostcssConfig(options.inputDir),
     preprocessorOptions: {
       scss: {
         charset: false,

pnpm-lock.yaml

@@ -371,6 +371,7 @@ importers:
       '@vue/compiler-sfc': 3.2.29
       '@vue/server-renderer': 3.2.29
       '@vue/shared': 3.2.29
+      autoprefixer: ^10.4.0
       base64url: ^3.0.1
       chokidar: ^3.5.2
       compare-versions: ^3.6.0
@@ -407,6 +408,7 @@ importers:
       '@vue/compiler-sfc': 3.2.29
       '@vue/server-renderer': 3.2.29_vue@3.2.29
       '@vue/shared': 3.2.29
+      autoprefixer: 10.4.0_postcss@8.4.5
       base64url: 3.0.1
       chokidar: 3.5.2
       compare-versions: 3.6.0
@@ -3672,6 +3674,22 @@ packages:
       postcss-value-parser: 4.2.0
     dev: true
 
+  /autoprefixer/10.4.0_postcss@8.4.5:
+    resolution: {integrity: sha512-7FdJ1ONtwzV1G43GDD0kpVMn/qbiNqyOPMFTX5nRffI+7vgWoFEc6DcXOxHJxrWNDXrZh18eDsZjvZGUljSRGA==}
+    engines: {node: ^10 || ^12 || >=14}
+    hasBin: true
+    peerDependencies:
+      postcss: ^8.1.0
+    dependencies:
+      browserslist: 4.18.1
+      caniuse-lite: 1.0.30001285
+      fraction.js: 4.1.2
+      normalize-range: 0.1.2
+      picocolors: 1.0.0
+      postcss: 8.4.5
+      postcss-value-parser: 4.2.0
+    dev: false
+
   /aws-sign2/0.7.0:
     resolution: {integrity: sha1-tG6JCTSpWR8tL2+G1+ap8bP+dqg=}
     dev: true
@@ -5482,7 +5500,6 @@ packages:
 
   /fraction.js/4.1.2:
     resolution: {integrity: sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==}
-    dev: true
 
   /fresh/0.5.2:
     resolution: {integrity: sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=}
@@ -7271,7 +7288,6 @@ packages:
   /normalize-range/0.1.2:
     resolution: {integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /npm-run-path/2.0.2:
     resolution: {integrity: sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8=}