diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index 9d73eea362..132a8d43a9 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -1453,8 +1453,8 @@ try { }) const typeLoaderProcessInfo = { - styles: ['css-loader', wxssLoaderPath, styleCompilerPath], - template: ['html-loader', wxmlLoaderPath, templateCompilerPath] + styles: ['node_modules/css-loader', wxssLoaderPath, styleCompilerPath], + template: ['node_modules/html-loader', wxmlLoaderPath, templateCompilerPath] } // 应用过rules后,注入mpx相关资源编译loader @@ -1517,15 +1517,15 @@ try { if (mpx.mode === 'web') { const mpxStyleOptions = queryObj.mpxStyleOptions const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : '' - const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher') + const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher') let cssLoaderIndex = -1 let vueStyleLoaderIndex = -1 let mpxStyleLoaderIndex = -1 loaders.forEach((loader, index) => { const currentLoader = toPosix(loader.loader) - if (currentLoader.includes('css-loader') && cssLoaderIndex === -1) { + if (currentLoader.includes('node_modules/css-loader') && cssLoaderIndex === -1) { cssLoaderIndex = index - } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader') && vueStyleLoaderIndex === -1) { + } else if (currentLoader.includes('node_modules/vue-loader/lib/loaders/stylePostLoader') && vueStyleLoaderIndex === -1) { vueStyleLoaderIndex = index } else if (currentLoader.includes(styleCompilerPath) && mpxStyleLoaderIndex === -1) { mpxStyleLoaderIndex = index diff --git a/packages/webpack-plugin/lib/utils/ts-loader-watch-run-loader-filter.js b/packages/webpack-plugin/lib/utils/ts-loader-watch-run-loader-filter.js index 9d147d3d5f..eb93027bc4 100644 --- a/packages/webpack-plugin/lib/utils/ts-loader-watch-run-loader-filter.js +++ b/packages/webpack-plugin/lib/utils/ts-loader-watch-run-loader-filter.js @@ -1,7 +1,7 @@ module.exports = (loaders, loaderIndex) => { for (let i = loaderIndex; i >= 0; i--) { const currentLoader = loaders[i] - if (currentLoader.path.endsWith('ts-loader/dist/stringify-loader.js')) { + if (currentLoader.path.endsWith('node_modules/ts-loader/dist/stringify-loader.js')) { return i } } diff --git a/packages/webpack-plugin/lib/wxss/compile-exports.js b/packages/webpack-plugin/lib/wxss/compile-exports.js deleted file mode 100644 index 749d229f3a..0000000000 --- a/packages/webpack-plugin/lib/wxss/compile-exports.js +++ /dev/null @@ -1,52 +0,0 @@ -const camelCase = require('lodash.camelcase') - -function dashesCamelCase (str) { - return str.replace(/-+(\w)/g, function (match, firstLetter) { - return firstLetter.toUpperCase() - }) -} - -module.exports = function compileExports (result, importItemMatcher, camelCaseKeys) { - if (!Object.keys(result.exports).length) { - return '' - } - - const exportJs = Object.keys(result.exports).reduce(function (res, key) { - let valueAsString = JSON.stringify(result.exports[key]) - valueAsString = valueAsString.replace(result.importItemRegExpG, importItemMatcher) - - function addEntry (k) { - res.push('\t' + JSON.stringify(k) + ': ' + valueAsString) - } - - let targetKey - switch (camelCaseKeys) { - case true: - addEntry(key) - targetKey = camelCase(key) - if (targetKey !== key) { - addEntry(targetKey) - } - break - case 'dashes': - addEntry(key) - targetKey = dashesCamelCase(key) - if (targetKey !== key) { - addEntry(targetKey) - } - break - case 'only': - addEntry(camelCase(key)) - break - case 'dashesOnly': - addEntry(dashesCamelCase(key)) - break - default: - addEntry(key) - break - } - return res - }, []).join(',\n') - - return '{\n' + exportJs + '\n}' -} diff --git a/packages/webpack-plugin/lib/wxss/createResolver.js b/packages/webpack-plugin/lib/wxss/createResolver.js deleted file mode 100644 index dbeb7fa052..0000000000 --- a/packages/webpack-plugin/lib/wxss/createResolver.js +++ /dev/null @@ -1,36 +0,0 @@ -module.exports = function createResolver (alias) { - if (typeof alias !== 'object' || Array.isArray(alias)) { - return function (url) { - return url - } - } - - alias = Object.keys(alias).map(function (key) { - let onlyModule = false - let obj = alias[key] - if (/\$$/.test(key)) { - onlyModule = true - key = key.substr(0, key.length - 1) - } - if (typeof obj === 'string') { - obj = { - alias: obj - } - } - obj = Object.assign({ - name: key, - onlyModule: onlyModule - }, obj) - return obj - }) - - return function (url) { - alias.forEach(function (obj) { - const name = obj.name - if (url === name || (!obj.onlyModule && url.startsWith(name + '/'))) { - url = obj.alias + url.substr(name.length) - } - }) - return url - } -} diff --git a/packages/webpack-plugin/lib/wxss/css-base.js b/packages/webpack-plugin/lib/wxss/css-base.js deleted file mode 100644 index 1fe3e40c12..0000000000 --- a/packages/webpack-plugin/lib/wxss/css-base.js +++ /dev/null @@ -1,79 +0,0 @@ -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra - Modified by @hiyuki -*/ -// css base code, injected by the css-loader -module.exports = function (useSourceMap) { - const list = [] - - // return the list of modules as css string - list.toString = function toString () { - return this.map(function (item) { - const content = cssWithMappingToString(item, useSourceMap) - if (item[2]) { - return '@media ' + item[2] + '{' + content + '}' - } else { - return content - } - }).join('') - } - - // import a list of modules into the list - list.i = function (modules, mediaQuery) { - if (typeof modules === 'string') { - modules = [[null, modules, '']] - } - const alreadyImportedModules = {} - for (let i = 0; i < this.length; i++) { - const id = this[i][0] - if (typeof id === 'number') { - alreadyImportedModules[id] = true - } - } - for (let i = 0; i < modules.length; i++) { - const item = modules[i] - // skip already imported module - // this implementation is not 100% perfect for weird media query combinations - // when a module is imported multiple times with different media queries. - // I hope this will never occur (Hey this way we have smaller bundles) - if (typeof item[0] !== 'number' || !alreadyImportedModules[item[0]]) { - if (mediaQuery && !item[2]) { - item[2] = mediaQuery - } else if (mediaQuery) { - item[2] = '(' + item[2] + ') and (' + mediaQuery + ')' - } - list.push(item) - } - } - } - return list -} - -function cssWithMappingToString (item, useSourceMap) { - const content = item[1] || '' - const cssMapping = item[3] - if (!cssMapping) { - return content - } - - if (useSourceMap && typeof btoa === 'function') { - const sourceMapping = toComment(cssMapping) - const sourceURLs = cssMapping.sources.map(function (source) { - return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */' - }) - - return [content].concat(sourceURLs).concat([sourceMapping]).join('\n') - } - - return [content].join('\n') -} - -// Adapted from convert-source-map (MIT) -function toComment (sourceMap) { - // eslint-disable-next-line no-undef - const base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) - const data = 'sourceMappingURL=data:application/json;charset=utf-8;base64,' + base64 - - return '/*# ' + data + ' */' -} diff --git a/packages/webpack-plugin/lib/wxss/getLocalIdent.js b/packages/webpack-plugin/lib/wxss/getLocalIdent.js deleted file mode 100644 index e3d07e7d6f..0000000000 --- a/packages/webpack-plugin/lib/wxss/getLocalIdent.js +++ /dev/null @@ -1,25 +0,0 @@ -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra - Modified by @hiyuki -*/ -const loaderUtils = require('loader-utils') -const path = require('path') - -module.exports = function getLocalIdent (loaderContext, localIdentName, localName, options) { - if (!options.context) { - if (loaderContext.rootContext) { - options.context = loaderContext.rootContext - } else if (loaderContext.options && typeof loaderContext.options.context === 'string') { - options.context = loaderContext.options.context - } else { - options.context = loaderContext.context - } - } - const request = path.relative(options.context, loaderContext.resourcePath) - options.content = options.hashPrefix + request + '+' + localName - localIdentName = localIdentName.replace(/\[local\]/gi, localName) - const hash = loaderUtils.interpolateName(loaderContext, localIdentName, options) - /* eslint-disable prefer-regex-literals */ - return hash.replace(new RegExp('[^a-zA-Z0-9\\-_\u00A0-\uFFFF]', 'g'), '-').replace(/^((-?[0-9])|--)/, '_$1') -} diff --git a/packages/webpack-plugin/lib/wxss/localsLoader.js b/packages/webpack-plugin/lib/wxss/localsLoader.js deleted file mode 100644 index 802199a198..0000000000 --- a/packages/webpack-plugin/lib/wxss/localsLoader.js +++ /dev/null @@ -1,44 +0,0 @@ -/* - 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') - -module.exports = function (content) { - if (this.cacheable) this.cacheable() - 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) - - processCss(content, null, { - mode: moduleMode ? 'local' : 'global', - query: query, - minimize: this.minimize, - loaderContext: this, - resolve: resolve - }, function (err, result) { - if (err) return callback(err) - - function 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) + ')' + - '[' + JSON.stringify(importItem.export) + '] + "' - } - - let exportJs = compileExports(result, importItemMatcher.bind(this), camelCaseKeys) - if (exportJs) { - exportJs = 'module.exports = ' + exportJs + ';' - } - - callback(null, exportJs) - }.bind(this)) -} diff --git a/packages/webpack-plugin/lib/wxss/processCss.js b/packages/webpack-plugin/lib/wxss/processCss.js deleted file mode 100644 index 85d0257cd9..0000000000 --- a/packages/webpack-plugin/lib/wxss/processCss.js +++ /dev/null @@ -1,274 +0,0 @@ -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra - Modified by @hiyuki -*/ -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') - -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 - -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 - } - - 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) - - if (isUrlRequest(url, options.root)) { - url = loaderUtils.urlToRequest(url, options.root) - } - - importItems.push({ - url: url, - mediaQuery: mediaQuery - }) - rule.remove() - }) - } - - 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] - }) - }) - }) - - 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 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) - } - }) - - options.importItems = importItems - options.urlItems = urlItems - options.exports = exports - } - } -} - -module.exports = function processCss (inputSource, inputMap, options, callback) { - 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 - - const customGetLocalIdent = query.getLocalIdent || getLocalIdent - - const parserOptions = { - root: root, - mode: options.mode, - url: query.url !== false, - import: query.import !== false, - resolve: options.resolve - } - - const pipeline = postcss([ - modulesValues, - localByDefault({ - mode: options.mode, - rewriteUrl: function (global, url) { - if (parserOptions.url) { - url = url.trim() - - if (!url.replace(/\s/g, '').length || !isUrlRequest(url, root)) { - return url - } - if (global) { - return loaderUtils.urlToRequest(url, root) - } - } - return url - } - }), - extractImports(), - modulesScope({ - generateScopedName: function generateScopedName (exportName) { - return customGetLocalIdent(options.loaderContext, localIdentName, exportName, { - regExp: localIdentRegExp, - hashPrefix: query.hashPrefix || '', - context: context - }) - } - }), - parserPlugin(parserOptions) - ]) - - if (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 - } - }) - pipeline.use(cssnano(minimizeOptions)) - } - - pipeline.process(inputSource, { - // we need a prefix to avoid path rewriting of PostCSS - from: '/css-loader!' + options.from, - to: options.to, - map: options.sourceMap - ? { - prev: inputMap, - sourcesContent: true, - inline: false, - annotation: false - } - : null - }).then(function (result) { - callback(null, { - source: result.css, - map: result.map && result.map.toJSON(), - exports: parserOptions.exports, - importItems: parserOptions.importItems, - importItemRegExpG: /___CSS_LOADER_IMPORT___([0-9]+)___/g, - importItemRegExp: /___CSS_LOADER_IMPORT___([0-9]+)___/, - urlItems: parserOptions.urlItems, - urlItemRegExpG: /___CSS_LOADER_URL___([0-9]+)___/g, - urlItemRegExp: /___CSS_LOADER_URL___([0-9]+)___/ - }) - }).catch(function (err) { - if (err.name === 'CssSyntaxError') { - const wrappedError = new CSSLoaderError( - 'Syntax Error', - err.reason, - err.line != null && err.column != null - ? { line: err.line, column: err.column } - : null, - err.input.source - ) - callback(wrappedError) - } else { - callback(err) - } - }) -} - -function formatMessage (message, loc, source) { - let formatted = message - if (loc) { - formatted = formatted + - ' (' + loc.line + ':' + loc.column + ')' - } - if (loc && source) { - formatted = formatted + - '\n\n' + formatCodeFrame(source, loc.line, loc.column) + '\n' - } - return formatted -} - -function CSSLoaderError (name, message, loc, source, error) { - Error.call(this) - Error.captureStackTrace(this, CSSLoaderError) - this.name = name - this.error = error - this.message = formatMessage(message, loc, source) - this.message = formatMessage(message, loc, source) -} - -CSSLoaderError.prototype = Object.create(Error.prototype) -CSSLoaderError.prototype.constructor = CSSLoaderError