@mpxjs/webpack-plugin 2.8.1 → 2.8.7

package/lib/wxss/loader.js

@@ -1,157 +1,259 @@
+/* eslint-disable operator-linebreak */
 /*
   MIT License http://www.opensource.org/licenses/mit-license.php
   Author Tobias Koppers @sokra
-  Modified by @hiyuki
 */
-const loaderUtils = require('loader-utils')
-const processCss = require('./processCss')
-const compileExports = require('./compile-exports')
-const createResolver = require('./createResolver')
-const isUrlRequest = require('../utils/is-url-request')
+// base on css-loader@6.7.1
+
+const postcss = require('postcss')
+const postcssPkg = require('postcss/package.json')
+const { satisfies } = require('semver')
+
+const CssSyntaxError = require('./CssSyntaxError')
+const Warning = require('./Warning')
+const schema = require('./options.json')
+const { icssParser, importParser, urlParser } = require('./plugins')
+const {
+  normalizeOptions,
+  shouldUseModulesPlugins,
+  shouldUseImportPlugin,
+  shouldUseURLPlugin,
+  shouldUseIcssPlugin,
+  getPreRequester,
+  getExportCode,
+  getFilter,
+  getImportCode,
+  getModuleCode,
+  getModulesPlugins,
+  normalizeSourceMap,
+  sort,
+  combineRequests,
+  stringifyRequest
+} = require('./utils')
 const createHelpers = require('../helpers')
 
-module.exports = function (content, map) {
-  if (this.cacheable) this.cacheable()
+module.exports = async function loader (content, map, meta) {
+  const rawOptions = this.getOptions(schema)
+  const plugins = []
   const callback = this.async()
-  const query = loaderUtils.getOptions(this) || {}
-  const moduleMode = query.modules || query.module
-  const camelCaseKeys = query.camelCase || query.camelcase
-  const resolve = createResolver(query.alias)
+
   const mpx = this.getMpx()
   const externals = mpx.externals
   const root = mpx.projectRoot
   const sourceMap = mpx.cssSourceMap || false
 
-  if (sourceMap) {
-    if (map) {
-      if (typeof map === 'string') {
-        map = JSON.stringify(map)
-      }
-
-      if (map.sources) {
-        map.sources = map.sources.map(function (source) {
-          return source.replace(/\\/g, '/')
-        })
-        map.sourceRoot = ''
-      }
-    }
-  } else {
-    // Some loaders (example `"postcss-loader": "1.x.x"`) always generates source map, we should remove it
-    map = null
+  let options
+
+  try {
+    options = normalizeOptions(rawOptions, this)
+    options = Object.assign({}, options, { sourceMap, root, externals })
+  } catch (error) {
+    callback(error)
+
+    return
   }
 
-  const { getRequestString } = createHelpers(this)
+  const replacements = []
+  const exports = []
 
-  processCss(content, map, {
-    mode: moduleMode ? 'local' : 'global',
-    from: loaderUtils.getRemainingRequest(this).split('!').pop(),
-    to: loaderUtils.getCurrentRequest(this).split('!').pop(),
-    query,
-    resolve,
-    minimize: this.minimize,
-    loaderContext: this,
-    sourceMap
-  }, (err, result) => {
-    if (err) return callback(err)
-
-    let cssAsString = JSON.stringify(result.source)
-
-    const alreadyImported = {}
-    const importJs = result.importItems.filter((imp) => {
-      if (!imp.mediaQuery) {
-        if (alreadyImported[imp.url]) {
-          return false
-        }
-        alreadyImported[imp.url] = true
-      }
-      return true
-    }).map((imp, i) => {
-      if (!isUrlRequest(imp.url, root, externals)) {
-        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) + ']);'
-      }
-    }).join('\n')
-
-    const importItemMatcher = (item) => {
-      const match = result.importItemRegExp.exec(item)
-      const idx = +match[1]
-      const importItem = result.importItems[idx]
-      const importUrl = importItem.url
-      return '" + require(' + loaderUtils.stringifyRequest(this, importUrl) + ').locals' +
-        '[' + JSON.stringify(importItem.export) + '] + "'
-    }
+  if (shouldUseModulesPlugins(options)) {
+    plugins.push(...getModulesPlugins(options, this))
+  }
+
+  let importPluginImports = []
+  const importPluginApi = []
+
+  let isSupportAbsoluteURL = false
+
+  // TODO enable by default in the next major release
+  if (
+    this._compilation &&
+    this._compilation.options &&
+    this._compilation.options.experiments &&
+    this._compilation.options.experiments.buildHttp
+  ) {
+    isSupportAbsoluteURL = true
+  }
+  const isSupportDataURL =
+    options.esModule && Boolean('fsStartTime' in this._compiler)
 
-    cssAsString = cssAsString.replace(result.importItemRegExpG, importItemMatcher)
-
-    // helper for ensuring valid CSS strings from requires
-    let urlEscapeHelper = ''
-
-    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) => {
-        const match = result.urlItemRegExp.exec(item)
-        let idx = +match[1]
-        const urlItem = result.urlItems[idx]
-        const url = resolve(urlItem.url)
-        idx = url.indexOf('?#')
-        if (idx < 0) idx = url.indexOf('#')
-        let urlRequest
-        if (idx > 0) { // idx === 0 is catched by isUrlRequest
-          // in cases like url('webfont.eot?#iefix')
-          urlRequest = url.substr(0, idx)
-          return '" + escape(require(' + loaderUtils.stringifyRequest(this, urlRequest) + ')) + "' +
-            url.substr(idx)
-        }
-        urlRequest = url
-        return '" + escape(require(' + loaderUtils.stringifyRequest(this, urlRequest) + ')) + "'
+  if (shouldUseImportPlugin(options)) {
+    plugins.push(
+      importParser({
+        isSupportAbsoluteURL: false,
+        isSupportDataURL: false,
+        isCSSStyleSheet: options.exportType === 'css-style-sheet',
+        loaderContext: this,
+        imports: importPluginImports,
+        api: importPluginApi,
+        filter: options.import.filter,
+        urlHandler: (url) =>
+          stringifyRequest(
+            this,
+            combineRequests(getPreRequester(this)(options.importLoaders), url)
+          ),
+        externals: options.externals,
+        root: options.root
       })
+    )
+  }
+
+  const urlPluginImports = []
+
+  if (shouldUseURLPlugin(options)) {
+    const needToResolveURL = !options.esModule
+
+    plugins.push(
+      urlParser({
+        isSupportAbsoluteURL,
+        isSupportDataURL,
+        imports: urlPluginImports,
+        replacements,
+        context: this.context,
+        rootContext: this.rootContext,
+        filter: getFilter(options.url.filter, this.resourcePath),
+        resolver: needToResolveURL
+          ? this.getResolve({ mainFiles: [], extensions: [] })
+          : // eslint-disable-next-line no-undefined
+          undefined,
+        urlHandler: (url) => stringifyRequest(this, url)
+        // Support data urls as input in new URL added in webpack@5.38.0
+      })
+    )
+  }
+
+  const icssPluginImports = []
+  const icssPluginApi = []
+
+  const needToUseIcssPlugin = shouldUseIcssPlugin(options)
+
+  if (needToUseIcssPlugin) {
+    plugins.push(
+      icssParser({
+        loaderContext: this,
+        imports: icssPluginImports,
+        api: icssPluginApi,
+        replacements,
+        exports,
+        urlHandler: (url) =>
+          stringifyRequest(
+            this,
+            combineRequests(getPreRequester(this)(options.importLoaders), url)
+          )
+      })
+    )
+  }
+
+  // Reuse CSS AST (PostCSS AST e.g 'postcss-loader') to avoid reparsing
+  if (meta) {
+    const { ast } = meta
+
+    if (
+      ast &&
+      ast.type === 'postcss' &&
+      satisfies(ast.version, `^${postcssPkg.version}`)
+    ) {
+      // eslint-disable-next-line no-param-reassign
+      content = ast.root
     }
+  }
+
+  const { resourcePath } = this
 
-    let exportJs = compileExports(result, importItemMatcher, camelCaseKeys)
-    if (exportJs) {
-      exportJs = 'exports.locals = ' + exportJs + ';'
+  let result
+
+  try {
+    result = await postcss(plugins).process(content, {
+      hideNothingWarning: true,
+      from: resourcePath,
+      to: resourcePath,
+      map: options.sourceMap
+        ? {
+            prev: map ? normalizeSourceMap(map, resourcePath) : null,
+            inline: false,
+            annotation: false
+          }
+        : false
+    })
+  } catch (error) {
+    if (error.file) {
+      this.addDependency(error.file)
     }
 
-    let moduleJs
-    if (sourceMap && result.map) {
-      // add a SourceMap
-      map = result.map
-      if (map.sources) {
-        map.sources = map.sources.map(function (source) {
-          return source.split('!').pop().replace(/\\/g, '/')
-        }, this)
-        map.sourceRoot = ''
-      }
-      map.file = map.file.split('!').pop().replace(/\\/g, '/')
-      map = JSON.stringify(map)
-      moduleJs = 'exports.push([module.id, ' + cssAsString + ', "", ' + map + ']);'
+    callback(
+      error.name === 'CssSyntaxError' ? new CssSyntaxError(error) : error
+    )
+
+    return
+  }
+
+  for (const warning of result.warnings()) {
+    this.emitWarning(new Warning(warning))
+  }
+
+  const { getRequestString } = createHelpers(this)
+
+  // 符合css后缀名的文件经过mpx处理后会带上相应的后缀防止 WebPack 的默认解析规则，后续 require/import 相应路径时，导出的不是一段 css 代码了，事实上是一个文件路径。
+  importPluginImports = importPluginImports.map((importItem, index) => {
+    const splittedUrl = importItem.url.slice(1, -1)
+    const requestString = getRequestString('styles', { src: splittedUrl }, {
+      isStatic: true,
+      issuerResource: this.resource,
+      fromImport: true
+    }, index)
+    return {
+      ...importItem,
+      url: requestString
+    }
+  })
+
+  const imports = []
+    .concat(icssPluginImports.sort(sort))
+    .concat(importPluginImports.sort())
+    .concat(urlPluginImports.sort(sort))
+
+  const api = []
+    .concat(importPluginApi.sort(sort))
+    .concat(icssPluginApi.sort(sort))
+
+  if (options.modules.exportOnlyLocals !== true) {
+    imports.unshift({
+      type: 'api_import',
+      importName: '___CSS_LOADER_API_IMPORT___',
+      url: stringifyRequest(this, require.resolve('./runtime/api'))
+    })
+
+    if (options.sourceMap) {
+      imports.unshift({
+        importName: '___CSS_LOADER_API_SOURCEMAP_IMPORT___',
+        url: stringifyRequest(this, require.resolve('./runtime/sourceMaps'))
+      })
     } else {
-      moduleJs = 'exports.push([module.id, ' + cssAsString + ', ""]);'
+      imports.unshift({
+        importName: '___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___',
+        url: stringifyRequest(this, require.resolve('./runtime/noSourceMaps'))
+      })
     }
+  }
 
-    // embed runtime
-    callback(null, urlEscapeHelper +
-      'exports = module.exports = require(' +
-      loaderUtils.stringifyRequest(this, '!!' + require.resolve('./css-base.js')) +
-      ')(' + sourceMap + ');\n' +
-      '// imports\n' +
-      importJs + '\n\n' +
-      '// module\n' +
-      moduleJs + '\n\n' +
-      '// exports\n' +
-      exportJs)
-  })
+  const importCode = getImportCode(imports, options)
+
+  let moduleCode
+
+  try {
+    moduleCode = getModuleCode(result, api, replacements, options, this)
+  } catch (error) {
+    callback(error)
+
+    return
+  }
+
+  const exportCode = getExportCode(
+    exports,
+    replacements,
+    needToUseIcssPlugin,
+    options
+  )
+
+  callback(null, `${importCode}${moduleCode}${exportCode}`)
 }

package/lib/wxss/options.json

@@ -0,0 +1,209 @@
+{
+  "title": "CSS Loader options",
+  "additionalProperties": false,
+  "properties": {
+    "url": {
+      "description": "Allows to enables/disables `url()`/`image-set()` functions handling.",
+      "link": "https://github.com/webpack-contrib/css-loader#url",
+      "anyOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "filter": {
+              "instanceof": "Function"
+            }
+          },
+          "additionalProperties": false
+        }
+      ]
+    },
+    "import": {
+      "description": "Allows to enables/disables `@import` at-rules handling.",
+      "link": "https://github.com/webpack-contrib/css-loader#import",
+      "anyOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "filter": {
+              "instanceof": "Function"
+            }
+          },
+          "additionalProperties": false
+        }
+      ]
+    },
+    "modules": {
+      "description": "Allows to enable/disable CSS Modules or ICSS and setup configuration.",
+      "link": "https://github.com/webpack-contrib/css-loader#modules",
+      "anyOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "enum": ["local", "global", "pure", "icss"]
+        },
+        {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {
+            "auto": {
+              "description": "Allows auto enable CSS modules based on filename.",
+              "link": "https://github.com/webpack-contrib/css-loader#auto",
+              "anyOf": [
+                {
+                  "instanceof": "RegExp"
+                },
+                {
+                  "instanceof": "Function"
+                },
+                {
+                  "type": "boolean"
+                }
+              ]
+            },
+            "mode": {
+              "description": "Setup `mode` option.",
+              "link": "https://github.com/webpack-contrib/css-loader#mode",
+              "anyOf": [
+                {
+                  "enum": ["local", "global", "pure", "icss"]
+                },
+                {
+                  "instanceof": "Function"
+                }
+              ]
+            },
+            "localIdentName": {
+              "description": "Allows to configure the generated local ident name.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidentname",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentContext": {
+              "description": "Allows to redefine basic loader context for local ident name.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidentcontext",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentHashSalt": {
+              "description": "Allows to add custom hash to generate more unique classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashsalt",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentHashFunction": {
+              "description": "Allows to specify hash function to generate classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashfunction",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentHashDigest": {
+              "description": "Allows to specify hash digest to generate classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashdigest",
+              "type": "string",
+              "minLength": 1
+            },
+            "localIdentHashDigestLength": {
+              "description": "Allows to specify hash digest length to generate classes.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidenthashdigestlength",
+              "type": "number"
+            },
+            "hashStrategy": {
+              "description": "Allows to specify should localName be used when computing the hash.",
+              "link": "https://github.com/webpack-contrib/css-loader#hashstrategy",
+              "enum": ["resource-path-and-local-name", "minimal-subset"]
+            },
+            "localIdentRegExp": {
+              "description": "Allows to specify custom RegExp for local ident name.",
+              "link": "https://github.com/webpack-contrib/css-loader#localidentregexp",
+              "anyOf": [
+                {
+                  "type": "string",
+                  "minLength": 1
+                },
+                {
+                  "instanceof": "RegExp"
+                }
+              ]
+            },
+            "getLocalIdent": {
+              "description": "Allows to specify a function to generate the classname.",
+              "link": "https://github.com/webpack-contrib/css-loader#getlocalident",
+              "instanceof": "Function"
+            },
+            "namedExport": {
+              "description": "Enables/disables ES modules named export for locals.",
+              "link": "https://github.com/webpack-contrib/css-loader#namedexport",
+              "type": "boolean"
+            },
+            "exportGlobals": {
+              "description": "Allows to export names from global class or id, so you can use that as local name.",
+              "link": "https://github.com/webpack-contrib/css-loader#exportglobals",
+              "type": "boolean"
+            },
+            "exportLocalsConvention": {
+              "description": "Style of exported classnames.",
+              "link": "https://github.com/webpack-contrib/css-loader#localsconvention",
+              "anyOf": [
+                {
+                  "enum": [
+                    "asIs",
+                    "camelCase",
+                    "camelCaseOnly",
+                    "dashes",
+                    "dashesOnly"
+                  ]
+                },
+                {
+                  "instanceof": "Function"
+                }
+              ]
+            },
+            "exportOnlyLocals": {
+              "description": "Export only locals.",
+              "link": "https://github.com/webpack-contrib/css-loader#exportonlylocals",
+              "type": "boolean"
+            }
+          }
+        }
+      ]
+    },
+    "sourceMap": {
+      "description": "Allows to enable/disable source maps.",
+      "link": "https://github.com/webpack-contrib/css-loader#sourcemap",
+      "type": "boolean"
+    },
+    "importLoaders": {
+      "description": "Allows enables/disables or setups number of loaders applied before CSS loader for `@import`/CSS Modules and ICSS imports.",
+      "link": "https://github.com/webpack-contrib/css-loader#importloaders",
+      "anyOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "string"
+        },
+        {
+          "type": "integer"
+        }
+      ]
+    },
+    "esModule": {
+      "description": "Use the ES modules syntax.",
+      "link": "https://github.com/webpack-contrib/css-loader#esmodule",
+      "type": "boolean"
+    },
+    "exportType": {
+      "description": "Allows exporting styles as array with modules, string or constructable stylesheet (i.e. `CSSStyleSheet`).",
+      "link": "https://github.com/webpack-contrib/css-loader#exporttype",
+      "enum": ["array", "string", "css-style-sheet"]
+    }
+  },
+  "type": "object"
+}

package/lib/wxss/plugins/index.js

@@ -0,0 +1,5 @@
+const importParser = require('./postcss-import-parser')
+const icssParser = require('./postcss-icss-parser')
+const urlParser = require('./postcss-url-parser')
+
+module.exports = { importParser, icssParser, urlParser }