feat(cli): normalize absolute paths in css URLs

.eslintignore

@@ -4,4 +4,3 @@ build/rollup-plugin-require-context
 packages/*/packages
 packages/*/template/**/*
 qh-api.js
-touch-emulator.js

packages/uni-cli-shared/lib/manifest.js

@@ -75,8 +75,7 @@ function getH5Options (manifestJson) {
     if (!h5.publicPath.endsWith('/')) {
       h5.publicPath = h5.publicPath + '/'
     }
-  } else { // 其他模式，启用 base
-
+  } else { // 其他模式，启用 base
     if (base.startsWith('./')) {
       // 在开发模式, publicPath 如果为 './' webpack-dev-server 匹配文件时会失败
       h5.publicPath = base.substr(1)

packages/uni-cli-shared/lib/url-loader.js

+const path = require('path')
+
+const defaultOptions = {
+  limit: -1,
+  fallback: {
+    loader: 'file-loader',
+    options: {
+      publicPath (url, resourcePath, context) {
+        if (
+          process.env.UNI_PLATFORM === 'app-plus' &&
+          process.env.UNI_USING_V3
+        ) { // app-plus v3 下路径不能以/开头
+          return path.relative(process.env.UNI_INPUT_DIR, resourcePath)
+        }
+        return '/' + path.relative(process.env.UNI_INPUT_DIR, resourcePath)
+      },
+      outputPath (url, resourcePath, context) {
+        return path.relative(process.env.UNI_INPUT_DIR, resourcePath)
+      }
+    }
+  }
+}
+
+const inlineLimit =
+  process.env.UNI_PLATFORM === 'mp-weixin' ||
+  process.env.UNI_PLATFORM === 'mp-qq' ||
+  process.env.UNI_PLATFORM === 'mp-toutiao' ||
+  process.env.UNI_PLATFORM === 'app-plus' // v2需要base64,v3需要rewriteUrl
+
+// mp-weixin,mp-qq,app-plus 非v3(即：需要base64的平台)
+// 将/static/logo.png转换为~@/static/logo.png
+// @import,src,background,background-image
+
+const rewriteUrl = inlineLimit ? require('postcss-urlrewrite')({
+  imports: true,
+  properties: ['src', 'background', 'background-image'],
+  rules: [{
+    from: /^@\//,
+    to: '~@/'
+  }, {
+    from: /^\/([^/])/,
+    to: '~@/$1'
+  }]
+}) : () => {}
+
+module.exports = {
+  loader: 'url-loader',
+  options () {
+    if (process.env.UNI_PLATFORM === 'h5') {
+      // h5平台，不对 url-loader 作调整，默认limit:4096，也不修改file-loader输出路径
+      return {}
+    }
+    if (inlineLimit) {
+      return {
+        ...defaultOptions,
+        limit: process.env.UNI_USING_V3 ? -1 : 40960 // （主要用于background-image）
+      }
+    }
+    return {
+      ...defaultOptions
+    }
+  },
+  rewriteUrl
+}

packages/uni-cli-shared/package.json

@@ -20,6 +20,7 @@
   "license": "Apache-2.0",
   "dependencies": {
     "hash-sum": "^1.0.2",
+    "postcss-urlrewrite": "^0.2.2",
     "strip-json-comments": "^2.0.1"
   },
   "gitHead": "84e9cb1ca1898054d161f1514efadd1ab24fd804"

packages/uni-template-compiler/lib/asset-url.js

@@ -3,11 +3,15 @@ const transformAssetUrls = {
   'video': ['src', 'poster'],
   'img': 'src',
   'image': 'src',
-  'cover-image': 'src',
-  'v-uni-audio': 'src',
-  'v-uni-video': ['src', 'poster'],
-  'v-uni-image': 'src',
-  'v-uni-cover-image': 'src'
+  'cover-image': 'src',
+  // h5
+  'v-uni-audio': 'src',
+  'v-uni-video': ['src', 'poster'],
+  'v-uni-image': 'src',
+  'v-uni-cover-image': 'src',
+  // nvue
+  'u-image': 'src',
+  'u-video': ['src', 'poster']
 }
 
 function rewrite (attr, name) {

packages/vue-cli-plugin-hbuilderx/build/css-loader.conf.js

@@ -25,8 +25,19 @@ const postcssLoader = {
   options: {
     sourceMap: false,
     parser: require('postcss-comment'),
-    plugins: [
-      require('postcss-import'),
+    plugins: [
+      require('postcss-import')({
+        resolve (id, basedir, importOptions) {
+          if (id.startsWith('~@/')) {
+            return path.resolve(process.env.UNI_INPUT_DIR, id.substr(3))
+          } else if (id.startsWith('@/')) {
+            return path.resolve(process.env.UNI_INPUT_DIR, id.substr(2))
+          } else if (id.startsWith('/') && !id.startsWith('//')) {
+            return path.resolve(process.env.UNI_INPUT_DIR, id.substr(1))
+          }
+          return id
+        }
+      }),
       require('@dcloudio/vue-cli-plugin-uni/packages/postcss')
     ]
   }
@@ -59,17 +70,17 @@ const sassLoader = {
 }
 
 if (sassLoaderVersion < 8) {
-  scssLoader.options.data = sassData
-  scssLoader.options.outputStyle = 'nested'
+  scssLoader.options.data = sassData
+  scssLoader.options.outputStyle = 'nested'
 
   sassLoader.options.data = sassData
   sassLoader.options.outputStyle = 'nested'
   sassLoader.options.indentedSyntax = true
 } else {
-  scssLoader.options.prependData = sassData
-  scssLoader.options.sassOptions = {
-    outputStyle: 'nested'
-  }
+  scssLoader.options.prependData = sassData
+  scssLoader.options.sassOptions = {
+    outputStyle: 'nested'
+  }
 
   sassLoader.options.prependData = sassData
   sassLoader.options.sassOptions = {

packages/vue-cli-plugin-hbuilderx/build/vue-loader.conf.js

@@ -104,6 +104,9 @@ const compiler = require('weex-template-compiler')
 const oldCompile = compiler.compile
 compiler.compile = function (source, options = {}) {
   (options.modules || (options.modules = [])).push(autoComponentsModule)
+
+  options.modules.push(require('@dcloudio/uni-template-compiler/lib/asset-url'))
+
   options.isUnaryTag = isUnaryTag
   // 将 autoComponents 挂在 isUnaryTag 上边
   options.isUnaryTag.autoComponents = new Set()

packages/vue-cli-plugin-uni/lib/app-plus/index.js

@@ -2,8 +2,7 @@ const path = require('path')
 const webpack = require('webpack')
 
 const {
-  getMainEntry,
-  isInHBuilderX
+  getMainEntry
 } = require('@dcloudio/uni-cli-shared')
 
 const vueLoader = require('@dcloudio/uni-cli-shared/lib/vue-loader')
@@ -200,38 +199,6 @@ const v3 = {
     const isAppService = !!vueOptions.pluginOptions['uni-app-plus']['service']
     const isAppView = !!vueOptions.pluginOptions['uni-app-plus']['view']
 
-    const fileLoaderOptions = isInHBuilderX ? {
-      emitFile: isAppView,
-      name: '[path][name].[ext]',
-      context: process.env.UNI_INPUT_DIR
-    } : {
-      emitFile: isAppView,
-      outputPath (url, resourcePath, context) {
-        return path.relative(process.env.UNI_INPUT_DIR, resourcePath)
-      }
-    }
-
-    // 处理静态资源
-    webpackConfig.module
-      .rule('svg')
-      .use('file-loader')
-      .options(fileLoaderOptions)
-
-    const staticTypes = ['images', 'media', 'fonts']
-    staticTypes.forEach(staticType => {
-      webpackConfig.module
-        .rule(staticType)
-        .use('url-loader')
-        .loader('url-loader')
-        .tap(options => Object.assign(options, {
-          limit: 1,
-          fallback: {
-            loader: 'file-loader',
-            options: fileLoaderOptions
-          }
-        }))
-    })
-
     const cacheConfig = {
       cacheDirectory: false,
       cacheIdentifier: false

packages/vue-cli-plugin-uni/lib/chain-webpack.js

@@ -20,15 +20,14 @@ module.exports = function chainWebpack (platformOptions, vueOptions, api) {
 
   return function (webpackConfig) {
     // 处理静态资源 limit
+    const urlLoader = require('@dcloudio/uni-cli-shared/lib/url-loader')
     const staticTypes = ['images', 'media', 'fonts']
     staticTypes.forEach(staticType => {
       webpackConfig.module
         .rule(staticType)
         .use('url-loader')
-        .loader('url-loader')
-        .tap(options => Object.assign(options, {
-          limit: 40960
-        }))
+        .loader(urlLoader.loader)
+        .tap(options => Object.assign(options, urlLoader.options()))
     })
     // 条件编译 vue 文件统一直接过滤html,js,css三种类型,单独资源文件引用各自过滤
 

packages/vue-cli-plugin-uni/lib/configure-webpack.js

@@ -239,6 +239,7 @@ module.exports = function configureWebpack (platformOptions, manifestPlatformOpt
       resolve: {
         alias: {
           '@': path.resolve(process.env.UNI_INPUT_DIR),
+          './@': path.resolve(process.env.UNI_INPUT_DIR), // css中的'@/static/logo.png'会被转换成'./@/static/logo.png'加载
           'vue$': getPlatformVue(vueOptions),
           'uni-pages': path.resolve(process.env.UNI_INPUT_DIR, 'pages.json'),
           '@dcloudio/uni-stat': require.resolve('@dcloudio/uni-stat'),

packages/vue-cli-plugin-uni/lib/env.js

@@ -48,7 +48,6 @@ if (
   console.warn(`发布H5，需要在uniCloud后台操作，绑定安全域名，否则会因为跨域问题而无法访问。教程参考：https://uniapp.dcloud.io/uniCloud/quickstart-H5`)
 }
 
-
 // 初始化环境变量
 const defaultInputDir = '../../../../src'
 const defaultOutputDir = '../../../../dist/' +

packages/vue-cli-plugin-uni/packages/postcss/index.js

@@ -150,6 +150,7 @@ if (process.env.UNI_USING_V3) {
     'background-attachment'
   ]
 
+  let rewriteUrl
   /**
    * 转换 upx
    * 转换 px
@@ -160,6 +161,11 @@ if (process.env.UNI_USING_V3) {
       ...opts
     }
     return function (root, result) {
+      if (!rewriteUrl) {
+        rewriteUrl = require('@dcloudio/uni-cli-shared/lib/url-loader').rewriteUrl
+      }
+      rewriteUrl(root)
+
       if (process.env.UNI_PLATFORM === 'h5') {
         // Transform CSS AST here
 
@@ -235,19 +241,19 @@ if (process.env.UNI_USING_V3) {
             // Transform each property declaration here
             decl.value = tranformValue(decl, opts)
           })
-          if (process.env.UNI_PLATFORM !== 'quickapp') {
-            rule.selectors = rule.selectors.map(complexSelector => {
-              return transformSelector(complexSelector, simpleSelectors => {
-                return simpleSelectors.walkTags(tag => {
-                  const k = tag.value
-                  const v = CSS_TAGS[k]
-                  if (v) {
-                    tag.value = v === 'r'
-                      ? `._${k}` : v
-                  }
-                })
-              })
-            })
+          if (process.env.UNI_PLATFORM !== 'quickapp') {
+            rule.selectors = rule.selectors.map(complexSelector => {
+              return transformSelector(complexSelector, simpleSelectors => {
+                return simpleSelectors.walkTags(tag => {
+                  const k = tag.value
+                  const v = CSS_TAGS[k]
+                  if (v) {
+                    tag.value = v === 'r'
+                      ? `._${k}` : v
+                  }
+                })
+              })
+            })
           }
         })
       }

packages/vue-cli-plugin-uni/packages/postcss/index.v3.js

@@ -11,8 +11,16 @@ const isInsideKeyframes = function (rule) {
     rule.parent && rule.parent.type === 'atrule' && /^(-\w+-)?keyframes$/.test(rule.parent.name)
   )
 }
+
+let rewriteUrl
+
 module.exports = postcss.plugin('postcss-uniapp-plugin', function (opts) {
-  return function (root, result) {
+  return function (root, result) {
+    if (!rewriteUrl) {
+      rewriteUrl = require('@dcloudio/uni-cli-shared/lib/url-loader').rewriteUrl
+    }
+    rewriteUrl(root)
+
     root.walkRules(rule => {
       // Transform each rule here
       if (!isInsideKeyframes(rule)) {
@@ -27,7 +35,7 @@ module.exports = postcss.plugin('postcss-uniapp-plugin', function (opts) {
               if (tag.value === 'page') {
                 tag.value = 'body'
               } else if (~TAGS.indexOf(tag.value) && tag.value.substring(
-                  0, 4) !== 'uni-') {
+                0, 4) !== 'uni-') {
                 tag.value = 'uni-' + tag.value
               }
             })

src/platforms/app-plus/service/framework/app.js

@@ -6,6 +6,8 @@ import initOn from 'uni-core/service/bridge/on'
 
 import {
   requireNativePlugin
+  ,
+  publish
 } from '../bridge'
 
 import {
@@ -22,10 +24,6 @@ import {
 
 import tabBar from './tab-bar'
 
-import {
-  publish
-} from '../bridge'
-
 import {
   initSubscribeHandlers
 } from './subscribe-handlers'