@mpxjs/webpack-plugin 2.7.0-alpha.0 → 2.7.0-alpha.2

package/lib/wxss/processCss.js

@@ -3,156 +3,160 @@
   Author Tobias Koppers @sokra
   Modified by @hiyuki
 */
-var formatCodeFrame = require('babel-code-frame')
-var Tokenizer = require('css-selector-tokenizer')
-var postcss = require('postcss')
-var loaderUtils = require('loader-utils')
-var assign = require('object-assign')
-var getLocalIdent = require('./getLocalIdent')
+const formatCodeFrame = require('@babel/code-frame')
+const Tokenizer = require('css-selector-tokenizer')
+const postcss = require('postcss')
+const loaderUtils = require('loader-utils')
+const assign = require('object-assign')
+const getLocalIdent = require('./getLocalIdent')
 
-var icssUtils = require('icss-utils')
-var localByDefault = require('postcss-modules-local-by-default')
-var extractImports = require('postcss-modules-extract-imports')
-var modulesScope = require('postcss-modules-scope')
-var modulesValues = require('postcss-modules-values')
-var valueParser = require('postcss-value-parser')
-var isUrlRequest = require('../utils/is-url-request')
+const icssUtils = require('icss-utils')
+const localByDefault = require('postcss-modules-local-by-default')
+const extractImports = require('postcss-modules-extract-imports')
+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
 
-var parserPlugin = postcss.plugin('css-loader-parser', function (options) {
-  return function (css) {
-    var imports = {}
-    var exports = {}
-    var importItems = []
-    var urlItems = []
+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
+      }
 
-    function replaceImportsInString (str) {
       if (options.import) {
-        var tokens = valueParser(str)
-        tokens.walk(function (node) {
-          if (node.type !== 'word') {
+        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
           }
-          var token = node.value
-          var importIndex = imports['$' + token]
-          if (typeof importIndex === 'number') {
-            node.value = '___CSS_LOADER_IMPORT___' + importIndex + '___'
+          values.nodes[0].nodes.shift()
+          const mediaQuery = Tokenizer.stringifyValues(values)
+
+          if (isUrlRequest(url, options.root)) {
+            url = loaderUtils.urlToRequest(url, options.root)
           }
+
+          importItems.push({
+            url: url,
+            mediaQuery: mediaQuery
+          })
+          rule.remove()
         })
-        return tokens.toString()
       }
-      return str
-    }
-
-    if (options.import) {
-      css.walkAtRules(/^import$/i, function (rule) {
-        var values = Tokenizer.parseValues(rule.params)
-        var 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()
-        var mediaQuery = Tokenizer.stringifyValues(values)
 
-        if (isUrlRequest(url, options.root)) {
-          url = loaderUtils.urlToRequest(url, options.root)
-        }
-
-        importItems.push({
-          url: url,
-          mediaQuery: mediaQuery
+      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]
+          })
         })
-        rule.remove()
       })
-    }
 
-    var icss = icssUtils.extractICSS(css)
-    exports = icss.icssExports
-    Object.keys(icss.icssImports).forEach(function (key) {
-      var 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]
-        })
+      Object.keys(exports).forEach(function (exportName) {
+        exports[exportName] = replaceImportsInString(exports[exportName])
       })
-    })
-
-    Object.keys(exports).forEach(function (exportName) {
-      exports[exportName] = replaceImportsInString(exports[exportName])
-    })
 
-    function isAlias (url) {
-      // Handle alias starting by / and root disabled
-      return url !== options.resolve(url)
-    }
+      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':
-          var 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
-            var url = item.url
-            item.url = '___CSS_LOADER_URL___' + urlItems.length + '___'
-            urlItems.push({
-              url: url
-            })
-          }
-          break
+      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) {
-      var values = Tokenizer.parseValues(decl.value)
-      values.nodes.forEach(function (value) {
-        value.nodes.forEach(processNode)
+      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)
+        }
       })
-      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) {
-  var query = options.query
-  var root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, '') : query.root
-  var context = query.context
-  var localIdentName = query.localIdentName || '[hash:base64]'
-  var localIdentRegExp = query.localIdentRegExp
-  var forceMinimize = query.minimize
-  var minimize = typeof forceMinimize !== 'undefined' ? !!forceMinimize : options.minimize
+  const query = options.query
+  const root = query.root && query.root.length > 0 ? query.root.replace(/\/$/, '') : query.root
+  const context = query.context
+  const localIdentName = query.localIdentName || '[hash:base64]'
+  const localIdentRegExp = query.localIdentRegExp
+  const forceMinimize = query.minimize
+  const minimize = typeof forceMinimize !== 'undefined' ? !!forceMinimize : options.minimize
 
-  var customGetLocalIdent = query.getLocalIdent || getLocalIdent
+  const customGetLocalIdent = query.getLocalIdent || getLocalIdent
 
-  var parserOptions = {
+  const parserOptions = {
     root: root,
     mode: options.mode,
     url: query.url !== false,
@@ -160,7 +164,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
     resolve: options.resolve
   }
 
-  var pipeline = postcss([
+  const pipeline = postcss([
     modulesValues,
     localByDefault({
       mode: options.mode,
@@ -192,8 +196,8 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
   ])
 
   if (minimize) {
-    var cssnano = require('cssnano')
-    var minimizeOptions = assign({}, query.minimize);
+    const cssnano = require('cssnano')
+    const minimizeOptions = assign({}, query.minimize);
     ['zindex', 'normalizeUrl', 'discardUnused', 'mergeIdents', 'reduceIdents', 'autoprefixer', 'svgo'].forEach(function (name) {
       if (typeof minimizeOptions[name] === 'undefined') {
         minimizeOptions[name] = false
@@ -226,7 +230,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
     })
   }).catch(function (err) {
     if (err.name === 'CssSyntaxError') {
-      var wrappedError = new CSSLoaderError(
+      const wrappedError = new CSSLoaderError(
         'Syntax Error',
         err.reason,
         err.line != null && err.column != null
@@ -242,7 +246,7 @@ module.exports = function processCss (inputSource, inputMap, options, callback)
 }
 
 function formatMessage (message, loc, source) {
-  var formatted = message
+  let formatted = message
   if (loc) {
     formatted = formatted +
       ' (' + loc.line + ':' + loc.column + ')'
@@ -260,7 +264,7 @@ function CSSLoaderError (name, message, loc, source, error) {
   this.name = name
   this.error = error
   this.message = formatMessage(message, loc, source)
-  this.hideStack = true
+  this.message = formatMessage(message, loc, source)
 }
 
 CSSLoaderError.prototype = Object.create(Error.prototype)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.7.0-alpha.0",
+  "version": "2.7.0-alpha.2",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -15,6 +15,11 @@
     "lib"
   ],
   "dependencies": {
+    "@babel/code-frame": "^7.16.0",
+    "@babel/generator": "^7.16.0",
+    "@babel/parser": "^7.16.2",
+    "@babel/traverse": "^7.16.0",
+    "@babel/types": "^7.16.0",
     "@better-scroll/core": "^2.2.1",
     "@better-scroll/movable": "^2.2.1",
     "@better-scroll/observe-dom": "^2.2.1",
@@ -22,17 +27,15 @@
     "@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",
-    "babel-code-frame": "^6.26.0",
-    "babel-generator": "^6.26.1",
-    "babel-traverse": "^6.26.0",
-    "babel-types": "^6.26.0",
-    "babylon": "^6.18.0",
     "consolidate": "^0.15.1",
     "css": "^2.2.1",
     "css-selector-tokenizer": "^0.7.0",
-    "cssnano": "^3.10.0",
+    "cssnano": "^5.0.16",
     "de-indent": "^1.0.2",
     "fastparse": "^1.1.1",
     "hash-sum": "^1.0.2",
@@ -40,20 +43,20 @@
     "html-minifier": "^3.5.8",
     "icss-utils": "^2.1.0",
     "json5": "^2.1.3",
-    "loader-utils": "1.1.0",
+    "loader-utils": "^2.0.2",
     "lodash": "^4.17.15",
     "lodash.camelcase": "^4.3.0",
     "lru-cache": "^4.1.2",
     "mime": "^2.2.2",
     "object-assign": "^4.1.1",
-    "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",
+    "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"
   },
   "peerDependencies": {
@@ -77,5 +80,8 @@
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4"
   },
-  "gitHead": "43fe072e744b33b841b8e396677711e414bcca8b"
+  "engines": {
+    "node": ">=14.14.0"
+  },
+  "gitHead": "75746a75d879c5d202ec096f58281ed43f0ff351"
 }

package/lib/built-in-loader.js

@@ -1,49 +0,0 @@
-const parseComponent = require('./parser')
-const loaderUtils = require('loader-utils')
-const parseRequest = require('./utils/parse-request')
-const normalize = require('./utils/normalize')
-const selectorPath = normalize.lib('selector')
-const genComponentTag = require('./utils/gen-component-tag')
-const getMainCompilation = require('./utils/get-main-compilation')
-
-module.exports = function (content) {
-  this.cacheable()
-  const mainCompilation = getMainCompilation(this._compilation)
-  const mpx = mainCompilation.__mpx__
-  if (!mpx) {
-    return content
-  }
-  const mode = mpx.mode
-  const env = mpx.env
-  const defs = mpx.defs
-  const resourcePath = parseRequest(this.resource).resourcePath
-  const parts = parseComponent(content, {
-    filePath: resourcePath,
-    needMap: this.sourceMap,
-    mode,
-    defs,
-    env
-  })
-
-  let output = ''
-
-  // 内建组件编写规范比较统一，不需要处理太多情况
-  if (parts.template) {
-    output += genComponentTag(parts.template)
-  }
-
-  if (parts.script) {
-    output += '\n' + genComponentTag(parts.script, (script) => {
-      let content = ''
-      if (parts.styles && parts.styles.length) {
-        parts.styles.forEach((style, i) => {
-          const requestString = loaderUtils.stringifyRequest(this, `builtInComponent.styl!=!${selectorPath}?type=styles&index=${i}!${loaderUtils.getRemainingRequest(this)}`)
-          content += `\n  import ${requestString}`
-        })
-      }
-      content += script.content
-      return content
-    })
-  }
-  return output
-}

package/lib/dependencies/RecordStaticResourceDependency.js

@@ -1,47 +0,0 @@
-const NullDependency = require('webpack/lib/dependencies/NullDependency')
-const makeSerializable = require('webpack/lib/util/makeSerializable')
-
-class RecordStaticResourceDependency extends NullDependency {
-  constructor (resourcePath, outputPath, packageRoot = '') {
-    super()
-    this.resourcePath = resourcePath
-    this.outputPath = outputPath
-    this.packageRoot = packageRoot
-  }
-
-  get type () {
-    return 'mpx record static resource'
-  }
-
-  mpxAction (module, compilation, callback) {
-    const mpx = compilation.__mpx__
-    const packageName = this.packageRoot || 'main'
-    mpx.staticResourcesMap[packageName][this.resourcePath] = this.outputPath
-    return callback()
-  }
-
-  serialize (context) {
-    const { write } = context
-    write(this.resourcePath)
-    write(this.outputPath)
-    write(this.packageRoot)
-    super.serialize(context)
-  }
-
-  deserialize (context) {
-    const { read } = context
-    this.resourcePath = read()
-    this.outputPath = read()
-    this.packageRoot = read()
-    super.deserialize(context)
-  }
-}
-
-RecordStaticResourceDependency.Template = class RecordStaticResourceDependencyTemplate {
-  apply () {
-  }
-}
-
-makeSerializable(RecordStaticResourceDependency, '@mpxjs/webpack-plugin/lib/dependencies/RecordStaticResourceDependency')
-
-module.exports = RecordStaticResourceDependency

package/lib/utils/get-main-compilation.js

@@ -1,6 +0,0 @@
-module.exports = function (compilation) {
-  while (compilation.compiler.parentCompilation) {
-    compilation = compilation.compiler.parentCompilation
-  }
-  return compilation
-}

package/lib/utils/read-json-for-src.js

@@ -1,34 +0,0 @@
-const parseRequest = require('./parse-request')
-const mpxJSON = require('./mpx-json')
-const getMainCompilation = require('./get-main-compilation')
-
-module.exports = function readJsonForSrc (src, loaderContext, callback) {
-  const fs = loaderContext._compiler.inputFileSystem
-  const mpx = getMainCompilation(loaderContext._compilation).__mpx__
-  const defs = mpx.defs
-  const resolve = (context, request, callback) => {
-    const { queryObj } = parseRequest(request)
-    context = queryObj.context || context
-    return loaderContext.resolve(context, request, callback)
-  }
-
-  resolve(loaderContext.context, src, (err, result) => {
-    if (err) return callback(err)
-    const { rawResourcePath: resourcePath } = parseRequest(result)
-    loaderContext.addDependency(resourcePath)
-    fs.readFile(resourcePath, (err, content) => {
-      if (err) {
-        return callback(err)
-      }
-      content = content.toString('utf-8')
-      if (resourcePath.endsWith('.json.js')) {
-        try {
-          content = mpxJSON.compileMPXJSONText({ source: content, defs, filePath: resourcePath })
-        } catch (e) {
-          return callback(e)
-        }
-      }
-      callback(null, content)
-    })
-  })
-}