From 6ce9f5598a2df2891119bf8d631dd837e959d354 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sun, 12 Jan 2020 17:41:36 +0800
Subject: [PATCH] feat(cli): support custom postcss config

---
 packages/vant-cli/docs/config.md              | 32 +++++++++++++++++--
 packages/vant-cli/src/common/constant.ts      |  3 +-
 packages/vant-cli/src/common/index.ts         | 23 ++++++++++---
 .../vant-cli/src/config/postcss.config.ts     | 23 ++++++++++++-
 4 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/packages/vant-cli/docs/config.md b/packages/vant-cli/docs/config.md
index 01dbb99c1..8511a776a 100644
--- a/packages/vant-cli/docs/config.md
+++ b/packages/vant-cli/docs/config.md
@@ -210,7 +210,7 @@ module.exports = {
 
 `@vant/cli/preset`中默认包含了以下插件：
 
-- @babel/preset-env
+- @babel/preset-env（不含 core-js）
 - @babel/preset-typescript
 - @babel/plugin-transform-runtime
 - @babel/plugin-transform-object-assign
@@ -238,4 +238,32 @@ module.exports = {
     "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0"
   }
 }
-```
\ No newline at end of file
+```
+
+## Postcss
+
+通过根目录下的`postcss.config.js`文件可以对 Postcss 进行配置。
+
+### 默认配置
+
+`vant-cli`中默认的 Postcss 配置如下：
+
+```js
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+};
+```
+
+## browserslist
+
+推荐在`package.json`文件里添加 browserslist 字段，这个值会被`@babel/preset-env`和`autoprefixer`用来确定目标浏览器的版本，保证编译后代码的兼容性。
+
+在移动端浏览器中使用，可以添加如下配置：
+
+```json
+{
+  "browserslist": ["Android >= 4.0", "iOS >= 8"]
+}
+```
diff --git a/packages/vant-cli/src/common/constant.ts b/packages/vant-cli/src/common/constant.ts
index a3542be1c..9b56725ea 100644
--- a/packages/vant-cli/src/common/constant.ts
+++ b/packages/vant-cli/src/common/constant.ts
@@ -22,7 +22,8 @@ export const DOCS_DIR = join(ROOT, 'docs');
 export const SITE_DIST_DIR = join(ROOT, 'site');
 export const VANT_CONFIG_FILE = join(ROOT, 'vant.config.js');
 export const PACKAGE_JSON_FILE = join(ROOT, 'package.json');
-export const WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
+export const ROOT_WEBPACK_CONFIG_FILE = join(ROOT, 'webpack.config.js');
+export const ROOT_POSTCSS_CONFIG_FILE = join(ROOT, 'postcss.config.js');
 
 export const DIST_DIR = join(__dirname, '../../dist');
 export const CONFIG_DIR = join(__dirname, '../config');
diff --git a/packages/vant-cli/src/common/index.ts b/packages/vant-cli/src/common/index.ts
index 54204c045..9660d217a 100644
--- a/packages/vant-cli/src/common/index.ts
+++ b/packages/vant-cli/src/common/index.ts
@@ -7,7 +7,12 @@ import {
   readFileSync,
   outputFileSync
 } from 'fs-extra';
-import { SRC_DIR, getVantConfig, WEBPACK_CONFIG_FILE } from './constant';
+import {
+  SRC_DIR,
+  getVantConfig,
+  ROOT_WEBPACK_CONFIG_FILE,
+  ROOT_POSTCSS_CONFIG_FILE
+} from './constant';
 
 export const EXT_REGEXP = /\.\w+$/;
 export const SFC_REGEXP = /\.(vue)$/;
@@ -96,8 +101,8 @@ export function normalizePath(path: string): string {
 }
 
 export function getWebpackConfig(): object {
-  if (existsSync(WEBPACK_CONFIG_FILE)) {
-    const config = require(WEBPACK_CONFIG_FILE);
+  if (existsSync(ROOT_WEBPACK_CONFIG_FILE)) {
+    const config = require(ROOT_WEBPACK_CONFIG_FILE);
 
     if (typeof config === 'function') {
       return config();
@@ -109,6 +114,14 @@ export function getWebpackConfig(): object {
   return {};
 }
 
+export function getPostcssConfig(): object {
+  if (existsSync(ROOT_POSTCSS_CONFIG_FILE)) {
+    return require(ROOT_POSTCSS_CONFIG_FILE);
+  }
+
+  return {};
+}
+
 export type ModuleEnv = 'esmodule' | 'commonjs';
 export type NodeEnv = 'production' | 'development' | 'test';
 export type BuildTarget = 'site' | 'package';
@@ -129,8 +142,8 @@ export function isDev() {
   return process.env.NODE_ENV === 'development';
 }
 
-// Smarter outputFileSync
-// Skip if content unchanged
+// smarter outputFileSync
+// skip output if file content unchanged
 export function smartOutputFile(filePath: string, content: string) {
   if (existsSync(filePath)) {
     const previousContent = readFileSync(filePath, 'utf-8');
diff --git a/packages/vant-cli/src/config/postcss.config.ts b/packages/vant-cli/src/config/postcss.config.ts
index 5bfb8f628..fbe328c58 100644
--- a/packages/vant-cli/src/config/postcss.config.ts
+++ b/packages/vant-cli/src/config/postcss.config.ts
@@ -1,5 +1,26 @@
-module.exports = {
+import { getPostcssConfig } from '../common';
+
+type PostcssConfig = object & {
+  plugins?: object;
+};
+
+function mergePostcssConfig(config1: PostcssConfig, config2: PostcssConfig) {
+  const plugins = {
+    ...config1.plugins,
+    ...config2.plugins
+  };
+
+  return {
+    ...config1,
+    ...config2,
+    plugins
+  };
+}
+
+const DEFAULT_CONFIG = {
   plugins: {
     autoprefixer: {}
   }
 };
+
+module.exports = mergePostcssConfig(DEFAULT_CONFIG, getPostcssConfig());