feat: support postcss.config.js

package.json

@@ -74,6 +74,7 @@
     "@vitejs/plugin-vue-jsx": "^1.1.8",
     "@vue/compiler-sfc": "^3.2.11",
     "acorn-loose": "^8.1.0",
+    "autoprefixer": "^10.3.4",
     "core-js": "2",
     "eslint": "^7.17.0",
     "fs-extra": "^9.0.1",

packages/uni-cli-shared/package.json

@@ -29,6 +29,7 @@
     "hash-sum": "^2.0.0",
     "jsonc-parser": "^3.0.0",
     "merge": "^2.1.1",
+    "postcss-selector-parser": "^6.0.6",
     "rollup-plugin-copy": "^3.4.0",
     "tapable": "^2.2.0",
     "xregexp": "3.1.0"

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

 import uniPostcssScopedPlugin from './plugins/stylePluginScoped'
+import uniPostcssPlugin from './plugins/uniapp'
+export { uniPostcssPlugin }
 export { uniPostcssScopedPlugin }

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

+import { extend } from '@vue/shared'
+import { rule, Rule, Declaration, Plugin } from 'postcss'
+import selectorParser from 'postcss-selector-parser'
+import {
+  createRpx2Unit,
+  defaultRpx2Unit,
+  isBuiltInComponent,
+  COMPONENT_SELECTOR_PREFIX,
+} from '@dcloudio/uni-shared'
+
+interface UniAppCssProcessorOptions {
+  page?: string
+  unit?: string // 目标单位，默认rem
+  unitRatio?: number // 单位转换比例，默认10/320
+  unitPrecision?: number // 单位精度，默认5
+}
+
+const defaultUniAppCssProcessorOptions = extend(
+  {
+    page: 'body',
+  },
+  defaultRpx2Unit
+)
+
+const BG_PROPS = [
+  'background',
+  'background-clip',
+  'background-color',
+  'background-image',
+  'background-origin',
+  'background-position',
+  'background-repeat',
+  'background-size',
+  'background-attachment',
+]
+
+function transform(
+  selector: selectorParser.Node,
+  page: string,
+  state: { bg: boolean }
+) {
+  if (selector.type !== 'tag') {
+    return
+  }
+  const { value } = selector
+  if (isBuiltInComponent(value)) {
+    selector.value = COMPONENT_SELECTOR_PREFIX + value
+  } else if (value === 'page') {
+    if (!page) {
+      return
+    }
+    selector.value = page
+    if (page !== 'body') {
+      state.bg = true
+    }
+  }
+}
+
+function createBodyBackgroundRule(origRule: Rule) {
+  const bgDecls: Declaration[] = []
+  origRule.walkDecls((decl) => {
+    if (BG_PROPS.indexOf(decl.prop) !== -1) {
+      bgDecls.push(decl.clone())
+    }
+  })
+  if (bgDecls.length) {
+    origRule.after(rule({ selector: 'body' }).append(bgDecls))
+  }
+}
+
+function walkRules(page: string) {
+  return (rule: Rule) => {
+    const state = { bg: false }
+    rule.selector = selectorParser((selectors) =>
+      selectors.walk((selector) => transform(selector, page, state))
+    ).processSync(rule.selector)
+    state.bg && createBodyBackgroundRule(rule)
+  }
+}
+
+function walkDecls(rpx2unit: ReturnType<typeof createRpx2Unit>) {
+  return (decl: Declaration) => {
+    const { value } = decl
+    if (value.indexOf('rpx') === -1 && value.indexOf('upx') === -1) {
+      return
+    }
+    decl.value = rpx2unit(decl.value)
+  }
+}
+
+const uniapp = (opts?: UniAppCssProcessorOptions) => {
+  const { page, unit, unitRatio, unitPrecision } = extend(
+    {},
+    defaultUniAppCssProcessorOptions,
+    opts || {}
+  )
+  const rpx2unit = createRpx2Unit(unit, unitRatio, unitPrecision)
+  return {
+    postcssPlugin: 'uni-app',
+    prepare() {
+      return {
+        OnceExit(root) {
+          root.walkDecls(walkDecls(rpx2unit))
+          root.walkRules(walkRules(page))
+        },
+      }
+    },
+  } as Plugin
+}
+uniapp.postcss = true
+export default uniapp

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

 'use strict';
 
-var version = "3.0.0-alpha-3000020210913001";
+var version = "3.0.0-alpha-3000020210914001";
 
 const STAT_VERSION = version;
 const STAT_URL = 'https://tongji.dcloud.io/uni/stat';

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

-var version = "3.0.0-alpha-3000020210913001";
+var version = "3.0.0-alpha-3000020210914001";
 
 const STAT_VERSION = version;
 const STAT_URL = 'https://tongji.dcloud.io/uni/stat';

packages/vite-plugin-uni/package.json

@@ -22,7 +22,6 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@rollup/pluginutils": "^4.1.0",
-    "autoprefixer": "^10.2.5",
     "cac": "^6.7.3",
     "chalk": "^4.1.1",
     "debug": "^4.3.1",
@@ -30,8 +29,7 @@
     "fs-extra": "^9.0.1",
     "jsonc-parser": "^3.0.0",
     "mime": "^2.5.2",
-    "module-alias": "^2.2.2",
-    "postcss-selector-parser": "^6.0.4"
+    "module-alias": "^2.2.2"
   },
   "devDependencies": {
     "@types/express": "^4.17.12",

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

 import path from 'path'
 import fs from 'fs-extra'
 import { UserConfig } from 'vite'
-// import autoprefixer from 'autoprefixer'
-import { extend } from '@vue/shared'
-import { parseRpx2UnitOnce } from '@dcloudio/uni-cli-shared'
 import { VitePluginUniResolvedOptions } from '..'
-import { uniapp } from '../utils'
 
 function resolveAdditionalData(inputDir: string) {
   const uniScssFile = path.resolve(inputDir, 'uni.scss')
@@ -15,21 +11,18 @@ function resolveAdditionalData(inputDir: string) {
   return fs.readFileSync(uniScssFile, 'utf8')
 }
 
+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
 ): UserConfig['css'] {
   return {
-    postcss: {
-      plugins: [
-        uniapp(
-          extend(
-            { page: options.platform === 'h5' ? 'uni-page-body' : 'body' },
-            parseRpx2UnitOnce(options.inputDir)
-          )
-        ),
-        // autoprefixer(),// TODO 似乎版本兼容有问题，目前报：Cannot read property 'prefix_exceptions' of undefined
-      ],
-    },
+    postcss: resolvePostcssConfig(options.inputDir),
     preprocessorOptions: {
       scss: {
         additionalData: resolveAdditionalData(options.inputDir),

packages/vite-plugin-uni/src/configResolved/env.ts

+import fs from 'fs'
 import path from 'path'
 import { ResolvedConfig } from 'vite'
 
@@ -14,4 +15,10 @@ export function initEnv(config: ResolvedConfig) {
   if (!process.env.UNI_OUTPUT_DIR) {
     process.env.UNI_OUTPUT_DIR = path.resolve(config.root, config.build.outDir)
   }
+
+  process.env.BROWSERSLIST_CONFIG = [
+    path.resolve(process.env.UNI_INPUT_DIR, '.browserslistrc'),
+    path.resolve(process.env.UNI_CLI_CONTEXT, 'package.json'),
+    path.resolve(process.cwd(), 'package.json'),
+  ].find((file) => fs.existsSync(file))
 }

scripts/postcss.config.js

+const {
+  uniPostcssPlugin,
+  parseRpx2UnitOnce,
+} = require('@dcloudio/uni-cli-shared')
+module.exports = {
+  plugins: [
+    uniPostcssPlugin(
+      Object.assign(
+        { page: process.env.UNI_PLATFORM === 'h5' ? 'uni-page-body' : 'body' },
+        parseRpx2UnitOnce(process.env.UNI_INPUT_DIR)
+      )
+    ),
+    require('autoprefixer')(),
+  ],
+}