@mpxjs/webpack-plugin 2.6.114-alpha.8 → 2.6.115

package/lib/wxs/{pre-loader.js → wxs-pre-loader.js}

@@ -2,20 +2,21 @@ const babylon = require('@babel/parser')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const generate = require('@babel/generator').default
+const getMainCompilation = require('../utils/get-main-compilation')
 const parseRequest = require('../utils/parse-request')
 const isEmptyObject = require('../utils/is-empty-object')
 const parseQuery = require('loader-utils').parseQuery
 
 module.exports = function (content) {
   this.cacheable()
-  const mpx = this.getMpx()
+  const mainCompilation = getMainCompilation(this._compilation)
   const module = this._module
-  const mode = mpx.mode
+  const mode = mainCompilation.__mpx__.mode
   const wxsModule = parseQuery(this.resourceQuery || '?').wxsModule
 
   // 处理内联wxs
   if (wxsModule) {
-    const wxsContentMap = mpx.wxsContentMap
+    const wxsContentMap = mainCompilation.__mpx__.wxsContentMap
     const resourcePath = parseRequest(this.resource).resourcePath
     content = wxsContentMap[`${resourcePath}~${wxsModule}`] || content
   }
@@ -44,15 +45,6 @@ module.exports = function (content) {
           }
         }
       },
-      CallExpression (path) {
-        const callee = path.node.callee
-        if (t.isIdentifier(callee) && callee.name === 'getRegExp') {
-          const argPath = path.get('arguments')[0]
-          if (argPath.isStringLiteral()) {
-            argPath.replaceWith(t.stringLiteral(argPath.node.extra.raw.slice(1, -1)))
-          }
-        }
-      },
       ForStatement (path) {
         if (path.shouldStopTraverse) {
           path.stop()
@@ -101,19 +93,12 @@ module.exports = function (content) {
       },
       CallExpression (path) {
         const callee = path.node.callee
-        const args = path.node.arguments
         const transMap = {
           getDate: 'Date',
           getRegExp: 'RegExp'
         }
         if (t.isIdentifier(callee) && transMap[callee.name]) {
-          if (callee.name === 'getRegExp') {
-            const arg = args[0]
-            if (t.isStringLiteral(arg)) {
-              args[0] = t.stringLiteral(arg.extra.raw.slice(1, -1))
-            }
-          }
-          path.replaceWith(t.newExpression(t.identifier(transMap[callee.name]), args))
+          path.replaceWith(t.newExpression(t.identifier(transMap[callee.name]), path.node.arguments))
         }
       }
     })

package/lib/wxss/getImportPrefix.js

@@ -0,0 +1,30 @@
+/*
+  MIT License http://www.opensource.org/licenses/mit-license.php
+  Author Tobias Koppers @sokra
+  Modified by @hiyuki
+*/
+const normalize = require('../utils/normalize')
+const extractorPath = normalize.lib('extractor')
+const toPosix = require('../utils/to-posix')
+
+module.exports = function getImportPrefix (loaderContext, extract) {
+  const selectorIndex = loaderContext.loaders.findIndex(({ path }) => {
+    // 兼容windows路径
+    return toPosix(path).indexOf('@mpxjs/webpack-plugin/lib/selector') !== -1
+  })
+  let loadersRequest = loaderContext.loaders.slice(
+    loaderContext.loaderIndex,
+    selectorIndex !== -1 ? selectorIndex : undefined
+  ).map(function (x) {
+    return x.request
+  }).join('!')
+  if (extract) {
+    loadersRequest = extractorPath + '?' +
+      JSON.stringify({
+        type: 'styles',
+        index: -1,
+        fromImport: true
+      }) + '!' + loadersRequest
+  }
+  return '-!' + loadersRequest + '!'
+}

package/lib/wxss/loader.js

@@ -5,22 +5,25 @@
 */
 const loaderUtils = require('loader-utils')
 const processCss = require('./processCss')
+const getImportPrefix = require('./getImportPrefix')
 const compileExports = require('./compile-exports')
 const createResolver = require('./createResolver')
 const isUrlRequest = require('../utils/is-url-request')
-const createHelpers = require('../helpers')
+const getMainCompilation = require('../utils/get-main-compilation')
+const addQuery = require('../utils/add-query')
 
 module.exports = function (content, map) {
   if (this.cacheable) this.cacheable()
+
   const callback = this.async()
   const query = loaderUtils.getOptions(this) || {}
+  const root = query.root
   const moduleMode = query.modules || query.module
   const camelCaseKeys = query.camelCase || query.camelcase
+  const sourceMap = this.sourceMap || false
   const resolve = createResolver(query.alias)
-  const mpx = this.getMpx()
+  const mpx = getMainCompilation(this._compilation).__mpx__
   const externals = mpx.externals
-  const root = mpx.projectRoot
-  const sourceMap = mpx.cssSourceMap || false
 
   if (sourceMap) {
     if (map) {
@@ -40,24 +43,25 @@ module.exports = function (content, map) {
     map = null
   }
 
-  const { getRequestString } = createHelpers(this)
-
   processCss(content, map, {
     mode: moduleMode ? 'local' : 'global',
     from: loaderUtils.getRemainingRequest(this).split('!').pop(),
     to: loaderUtils.getCurrentRequest(this).split('!').pop(),
-    query,
-    resolve,
+    query: query,
+    resolve: resolve,
     minimize: this.minimize,
     loaderContext: this,
-    sourceMap
-  }, (err, result) => {
+    sourceMap: sourceMap
+  }, function (err, result) {
     if (err) return callback(err)
 
     let cssAsString = JSON.stringify(result.source)
 
+    // for importing CSS
+    const importUrlPrefix = getImportPrefix(this)
+
     const alreadyImported = {}
-    const importJs = result.importItems.filter((imp) => {
+    const importJs = result.importItems.filter(function (imp) {
       if (!imp.mediaQuery) {
         if (alreadyImported[imp.url]) {
           return false
@@ -65,35 +69,43 @@ module.exports = function (content, map) {
         alreadyImported[imp.url] = true
       }
       return true
-    }).map((imp, i) => {
-      if (!isUrlRequest(imp.url, root, externals)) {
+    }).map(function (imp) {
+      if (!isUrlRequest(imp.url, root) || externals.some((external) => {
+        if (typeof external === 'string') {
+          return external === imp.url
+        } else if (external instanceof RegExp) {
+          return external.test(imp.url)
+        }
+        return false
+      })) {
         return 'exports.push([module.id, ' +
           JSON.stringify('@import url(' + imp.url + ');') + ', ' +
           JSON.stringify(imp.mediaQuery) + ']);'
       } else {
-        const requestString = getRequestString('styles', { src: imp.url }, {
-          isStatic: true,
-          issuerResource: this.resource,
-          fromImport: true
-        }, i)
-        return 'exports.push([module.id, ' +
-          JSON.stringify('@import "') +
-          '+ require(' + requestString + ') +' +
-          JSON.stringify('";') + ', ' +
-          JSON.stringify(imp.mediaQuery) + ']);'
+        if (query.extract) {
+          const importUrlPrefix = getImportPrefix(this, true)
+          const importUrl = importUrlPrefix + addQuery(imp.url, { isStatic: true, issuerResource: this.resource })
+          return 'exports.push([module.id, ' +
+            JSON.stringify('@import "') +
+            '+ require(' + loaderUtils.stringifyRequest(this, importUrl) + ') +' +
+            JSON.stringify('";') + ', ' +
+            JSON.stringify(imp.mediaQuery) + ']);'
+        }
+        const importUrl = importUrlPrefix + imp.url
+        return 'exports.i(require(' + loaderUtils.stringifyRequest(this, importUrl) + '), ' + JSON.stringify(imp.mediaQuery) + ');'
       }
-    }).join('\n')
+    }, this).join('\n')
 
-    const importItemMatcher = (item) => {
+    function importItemMatcher (item) {
       const match = result.importItemRegExp.exec(item)
       const idx = +match[1]
       const importItem = result.importItems[idx]
-      const importUrl = importItem.url
+      const importUrl = importUrlPrefix + importItem.url
       return '" + require(' + loaderUtils.stringifyRequest(this, importUrl) + ').locals' +
         '[' + JSON.stringify(importItem.export) + '] + "'
     }
 
-    cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher)
+    cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher.bind(this))
 
     // helper for ensuring valid CSS strings from requires
     let urlEscapeHelper = ''
@@ -101,7 +113,7 @@ module.exports = function (content, map) {
     if (query.url !== false && result.urlItems.length > 0) {
       urlEscapeHelper = 'var escape = require(' + loaderUtils.stringifyRequest(this, '!!' + require.resolve('./url/escape.js')) + ');\n'
 
-      cssAsString = cssAsString.replace(result.urlItemRegExpG, (item) => {
+      cssAsString = cssAsString.replace(result.urlItemRegExpG, function (item) {
         const match = result.urlItemRegExp.exec(item)
         let idx = +match[1]
         const urlItem = result.urlItems[idx]
@@ -117,10 +129,10 @@ module.exports = function (content, map) {
         }
         urlRequest = url
         return '" + escape(require(' + loaderUtils.stringifyRequest(this, urlRequest) + ')) + "'
-      })
+      }.bind(this))
     }
 
-    let exportJs = compileExports(result, importItemMatcher, camelCaseKeys)
+    let exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys)
     if (exportJs) {
       exportJs = 'exports.locals = ' + exportJs + ';'
     }
@@ -153,5 +165,5 @@ module.exports = function (content, map) {
       moduleJs + '\n\n' +
       '// exports\n' +
       exportJs)
-  })
+  }.bind(this))
 }

package/lib/wxss/localsLoader.js

@@ -5,6 +5,7 @@
 */
 var loaderUtils = require('loader-utils')
 var processCss = require('./processCss')
+var getImportPrefix = require('./getImportPrefix')
 var compileExports = require('./compile-exports')
 var createResolver = require('./createResolver')
 
@@ -25,11 +26,14 @@ module.exports = function (content) {
   }, function (err, result) {
     if (err) return callback(err)
 
+    // for importing CSS
+    var importUrlPrefix = getImportPrefix(this, query)
+
     function importItemMatcher (item) {
       var match = result.importItemRegExp.exec(item)
       var idx = +match[1]
       var importItem = result.importItems[idx]
-      var importUrl = importItem.url
+      var importUrl = importUrlPrefix + importItem.url
       return '" + require(' + loaderUtils.stringifyRequest(this, importUrl) + ')' +
         '[' + JSON.stringify(importItem.export) + '] + "'
     }

package/lib/wxss/processCss.js

@@ -17,133 +17,129 @@ const modulesScope = require('postcss-modules-scope')
 const modulesValues = require('postcss-modules-values')
 const valueParser = require('postcss-value-parser')
 const isUrlRequest = require('../utils/is-url-request')
-// css-loader-parser
 
-const parserPlugin = function (options) {
-  return {
-    postcssPlugin: 'css-loader-parser',
-    Once (css) {
-      const imports = {}
-      let exports = {}
-      const importItems = []
-      const urlItems = []
-
-      function replaceImportsInString (str) {
-        if (options.import) {
-          const tokens = valueParser(str)
-          tokens.walk(function (node) {
-            if (node.type !== 'word') {
-              return
-            }
-            const token = node.value
-            const importIndex = imports['$' + token]
-            if (typeof importIndex === 'number') {
-              node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
-            }
-          })
-          return tokens.toString()
-        }
-        return str
-      }
+const parserPlugin = postcss.plugin('css-loader-parser', function (options) {
+  return function (css) {
+    const imports = {}
+    let exports = {}
+    const importItems = []
+    const urlItems = []
 
+    function replaceImportsInString (str) {
       if (options.import) {
-        css.walkAtRules(/^import$/i, function (rule) {
-          const values = Tokenizer.parseValues(rule.params)
-          let url = values.nodes[0].nodes[0]
-          if (url && url.type === 'url') {
-            url = url.url
-          } else if (url && url.type === 'string') {
-            url = url.value
-          } else throw rule.error('Unexpected format ' + rule.params)
-          if (!url.replace(/\s/g, '').length) {
+        const tokens = valueParser(str)
+        tokens.walk(function (node) {
+          if (node.type !== 'word') {
             return
           }
-          values.nodes[0].nodes.shift()
-          const mediaQuery = Tokenizer.stringifyValues(values)
-
-          if (isUrlRequest(url, options.root)) {
-            url = loaderUtils.urlToRequest(url, options.root)
+          const token = node.value
+          const importIndex = imports['$' + token]
+          if (typeof importIndex === 'number') {
+            node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
           }
-
-          importItems.push({
-            url: url,
-            mediaQuery: mediaQuery
-          })
-          rule.remove()
         })
+        return tokens.toString()
       }
+      return str
+    }
+
+    if (options.import) {
+      css.walkAtRules(/^import$/i, function (rule) {
+        const values = Tokenizer.parseValues(rule.params)
+        let url = values.nodes[0].nodes[0]
+        if (url && url.type === 'url') {
+          url = url.url
+        } else if (url && url.type === 'string') {
+          url = url.value
+        } else throw rule.error('Unexpected format ' + rule.params)
+        if (!url.replace(/\s/g, '').length) {
+          return
+        }
+        values.nodes[0].nodes.shift()
+        const mediaQuery = Tokenizer.stringifyValues(values)
 
-      const icss = icssUtils.extractICSS(css)
-      exports = icss.icssExports
-      Object.keys(icss.icssImports).forEach(function (key) {
-        const url = loaderUtils.parseString(key)
-        Object.keys(icss.icssImports[key]).forEach(function (prop) {
-          imports['$' + prop] = importItems.length
-          importItems.push({
-            url: url,
-            export: icss.icssImports[key][prop]
-          })
+        if (isUrlRequest(url, options.root)) {
+          url = loaderUtils.urlToRequest(url, options.root)
+        }
+
+        importItems.push({
+          url: url,
+          mediaQuery: mediaQuery
         })
+        rule.remove()
       })
+    }
 
-      Object.keys(exports).forEach(function (exportName) {
-        exports[exportName] = replaceImportsInString(exports[exportName])
+    const icss = icssUtils.extractICSS(css)
+    exports = icss.icssExports
+    Object.keys(icss.icssImports).forEach(function (key) {
+      const url = loaderUtils.parseString(key)
+      Object.keys(icss.icssImports[key]).forEach(function (prop) {
+        imports['$' + prop] = importItems.length
+        importItems.push({
+          url: url,
+          export: icss.icssImports[key][prop]
+        })
       })
+    })
 
-      function isAlias (url) {
-        // Handle alias starting by / and root disabled
-        return url !== options.resolve(url)
-      }
+    Object.keys(exports).forEach(function (exportName) {
+      exports[exportName] = replaceImportsInString(exports[exportName])
+    })
 
-      function processNode (item) {
-        switch (item.type) {
-          case 'value':
-            item.nodes.forEach(processNode)
-            break
-          case 'nested-item':
-            item.nodes.forEach(processNode)
-            break
-          case 'item':
-            const importIndex = imports['$' + item.name]
-            if (typeof importIndex === 'number') {
-              item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
-            }
-            break
-          case 'url':
-            if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || isUrlRequest(item.url, options.root))) {
-              // Strip quotes, they will be re-added if the module needs them
-              item.stringType = ''
-              delete item.innerSpacingBefore
-              delete item.innerSpacingAfter
-              const url = item.url
-              item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
-              urlItems.push({
-                url: url
-              })
-            }
-            break
-        }
+    function isAlias (url) {
+      // Handle alias starting by / and root disabled
+      return url !== options.resolve(url)
+    }
+
+    function processNode (item) {
+      switch (item.type) {
+        case 'value':
+          item.nodes.forEach(processNode)
+          break
+        case 'nested-item':
+          item.nodes.forEach(processNode)
+          break
+        case 'item':
+          const importIndex = imports['$' + item.name]
+          if (typeof importIndex === 'number') {
+            item.name = '___CSS_LOADER_IMPORT___' + importIndex + '___'
+          }
+          break
+        case 'url':
+          if (options.url && item.url.replace(/\s/g, '').length && !/^#/.test(item.url) && (isAlias(item.url) || isUrlRequest(item.url, options.root))) {
+            // Strip quotes, they will be re-added if the module needs them
+            item.stringType = ''
+            delete item.innerSpacingBefore
+            delete item.innerSpacingAfter
+            const url = item.url
+            item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
+            urlItems.push({
+              url: url
+            })
+          }
+          break
       }
+    }
 
-      css.walkDecls(function (decl) {
-        const values = Tokenizer.parseValues(decl.value)
-        values.nodes.forEach(function (value) {
-          value.nodes.forEach(processNode)
-        })
-        decl.value = Tokenizer.stringifyValues(values)
-      })
-      css.walkAtRules(function (atrule) {
-        if (typeof atrule.params === 'string') {
-          atrule.params = replaceImportsInString(atrule.params)
-        }
+    css.walkDecls(function (decl) {
+      const values = Tokenizer.parseValues(decl.value)
+      values.nodes.forEach(function (value) {
+        value.nodes.forEach(processNode)
       })
+      decl.value = Tokenizer.stringifyValues(values)
+    })
+    css.walkAtRules(function (atrule) {
+      if (typeof atrule.params === 'string') {
+        atrule.params = replaceImportsInString(atrule.params)
+      }
+    })
 
-      options.importItems = importItems
-      options.urlItems = urlItems
-      options.exports = exports
-    }
+    options.importItems = importItems
+    options.urlItems = urlItems
+    options.exports = exports
   }
-}
+})
 
 module.exports = function processCss (inputSource, inputMap, options, callback) {
   const query = options.query

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.6.114-alpha.8",
+  "version": "2.6.115",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -27,15 +27,12 @@
     "@better-scroll/slide": "^2.2.1",
     "@better-scroll/wheel": "^2.2.1",
     "@better-scroll/zoom": "^2.2.1",
-    "@hummer/tenon-dev-server-webpack-plugin": "0.0.2",
-    "@hummer/tenon-loader": "^1.1.0",
-    "@hummer/tenon-style-loader": "^0.2.0",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
     "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
-    "cssnano": "^5.0.16",
+    "cssnano": "^3.10.0",
     "de-indent": "^1.0.2",
     "fastparse": "^1.1.1",
     "hash-sum": "^1.0.2",
@@ -43,24 +40,28 @@
     "html-minifier": "^3.5.8",
     "icss-utils": "^2.1.0",
     "json5": "^2.1.3",
-    "loader-utils": "^2.0.2",
+    "loader-utils": "1.1.0",
     "lodash": "^4.17.15",
     "lodash.camelcase": "^4.3.0",
     "lru-cache": "^4.1.2",
     "mime": "^2.2.2",
     "object-assign": "^4.1.1",
-    "postcss": "^8.4.5",
-    "postcss-load-config": "^3.1.1",
-    "postcss-modules-extract-imports": "^3.0.0",
-    "postcss-modules-local-by-default": "^4.0.0",
-    "postcss-modules-scope": "^3.0.0",
-    "postcss-modules-values": "^4.0.0",
-    "postcss-selector-parser": "^6.0.8",
-    "postcss-value-parser": "^4.0.2",
-    "source-list-map": "^2.0.0"
+    "postcss": "^6.0.19",
+    "postcss-load-config": "^1.2.0",
+    "postcss-modules-extract-imports": "^1.2.0",
+    "postcss-modules-local-by-default": "^1.2.0",
+    "postcss-modules-scope": "^1.1.0",
+    "postcss-modules-values": "^1.3.0",
+    "postcss-selector-parser": "^2.0.0",
+    "postcss-value-parser": "^3.3.0",
+    "resolve": "^1.5.0",
+    "source-list-map": "^2.0.0",
+    "webpack-sources": "^1.1.0"
   },
   "peerDependencies": {
-    "webpack": "^5.48.0"
+    "css-loader": "^0.28.10",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^3.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -79,9 +80,5 @@
   "devDependencies": {
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4"
-  },
-  "engines": {
-    "node": ">=14.14.0"
-  },
-  "gitHead": "f6a3d039dbe797630651f9d945b8755a5f05e528"
+  }
 }