fix(cli): postcss 插件读取方式修改

NervJS · Nov 12, 2018 · 4c1de79 · 4c1de79
1 parent faf15f0
commit 4c1de79
Show file tree

Hide file tree

Showing 3 changed files with 91 additions and 34 deletions.
diff --git a/packages/taro-cli/src/weapp.js b/packages/taro-cli/src/weapp.js
@@ -1294,14 +1294,61 @@ async function buildSinglePage (page) {
 }
 
 async function processStyleWithPostCSS (styleObj) {
-  let configs = weappConf.module.postcss
-  let moduleNames = _.keys(configs)
-  const processors = _.map(moduleNames, name => {
-    let config = configs[name]
-    if (_.indexOf(name, '.') === 0) { // local plugin
-      name = path.join(appPath, name)
+  const useModuleConf = weappConf.module || {}
+  const customPostcssConf = useModuleConf.postcss || {}
+  const customPxtransformConf =  Object.assign({
+    enable: true,
+    config: {}
+  }, customPostcssConf.pxtransform || {})
+  const customUrlConf =  Object.assign({
+    enable: true,
+    config: {
+      limit: 10240
+    }
+  }, customPostcssConf.url || {})
+  const customAutoprefixerConf = Object.assign({
+    enable: true,
+    config: {
+      browsers: browserList
+    }
+  }, customPostcssConf.autoprefixer || {})
+  const postcssPxtransformOption = {
+    designWidth: projectConfig.designWidth || 750,
+    platform: 'weapp'
+  }
+
+  if (projectConfig.hasOwnProperty(DEVICE_RATIO)) {
+    postcssPxtransformOption[DEVICE_RATIO] = projectConfig.deviceRatio
+  }
+  const cssUrlConf = Object.assign({ limit: 10240 }, customUrlConf)
+  const maxSize = Math.round((customUrlConf.config.limit || cssUrlConf.limit) / 1024)
+  const postcssPxtransformConf = Object.assign({}, postcssPxtransformOption, customPxtransformConf, customPxtransformConf.config)
+  const processors = []
+  if (customAutoprefixerConf.enable) {
+    processors.push(autoprefixer(customAutoprefixerConf.config))
+  }
+  if (customPxtransformConf.enable) {
+    processors.push(pxtransform(postcssPxtransformConf))
+  }
+  if (cssUrlConf.enable) {
+    processors.push(cssUrlParse({
+      url: 'inline',
+      maxSize,
+      encodeType: 'base64'
+    }))
+  }
+
+  const defaultPostCSSPluginNames = ['autoprefixer', 'pxtransform', 'url']
+  Object.keys(customPostcssConf).forEach(pluginName => {
+    if (defaultPostCSSPluginNames.indexOf(pluginName) < 0) {
+      const pluginConf = customPostcssConf[pluginName]
+      if (pluginConf && pluginConf.enable) {
+        if (!Util.isNpmPkg(pluginName)) { // local plugin
+          pluginName = path.join(appPath, pluginName)
+        }
+        processors.push(require(resolveNpmPkgMainPath(pluginName, isProduction, weappNpmConfig, buildAdapter))(pluginConf.config || {}))
+      }
     }
-    return require(name)(config)
   })
   const postcssResult = await postcss(processors).process(styleObj.css, {
     from: styleObj.filePath

diff --git a/packages/taro-cli/templates/default/config/index b/packages/taro-cli/templates/default/config/index
@@ -34,21 +34,26 @@ const config = {
     module: {
       postcss: {
         autoprefixer: {
-          browsers: [
-            'last 3 versions',
-            'Android >= 4.1',
-            'ios >= 8'
-          ]
+          enable: true,
+          config: {
+            browsers: [
+              'last 3 versions',
+              'Android >= 4.1',
+              'ios >= 8'
+            ]
+          }
         },
-        'postcss-pxtransform': {
-          designWidth: 750,
-          platform: 'weapp',
-          deviceRatio: { '640': 1.17, '750': 1, '828': 0.905 }
+        pxtransform: {
+          enable: true,
+          config: {
+
+          }
         }
-        'postcss-url': {
-          url: 'inline',
-          limit: 10240,
-          encodeType: 'base64'
+        url: {
+          enable: true,
+          config: {
+            limit: 10240 // 设定转换尺寸上限
+          }
         }
       }
     }

diff --git a/packages/taro-cli/templates/redux/config/index b/packages/taro-cli/templates/redux/config/index
@@ -24,25 +24,30 @@ const config = {
   },
   defineConstants: {
   },
-  weapp: {
+  {
     module: {
       postcss: {
         autoprefixer: {
-          browsers: [
-            'last 3 versions',
-            'Android >= 4.1',
-            'ios >= 8'
-          ]
+          enable: true,
+          config: {
+            browsers: [
+              'last 3 versions',
+              'Android >= 4.1',
+              'ios >= 8'
+            ]
+          }
         },
-        'postcss-pxtransform': {
-          designWidth: 750,
-          platform: 'weapp',
-          deviceRatio: { '640': 1.17, '750': 1, '828': 0.905 }
+        pxtransform: {
+          enable: true,
+          config: {
+
+          }
         }
-        'postcss-url': {
-          url: 'inline',
-          limit: 10240,
-          encodeType: 'base64'
+        url: {
+          enable: true,
+          config: {
+            limit: 10240 // 设定转换尺寸上限
+          }
         }
       }
     }