From 2c151b6412f3108c5b896c695e70e09464cfe314 Mon Sep 17 00:00:00 2001 From: Chris Lloyd Date: Wed, 8 Jun 2016 17:55:32 -0700 Subject: [PATCH 1/2] Manage loader resolution with Webpack. Fixes #286. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Instead of assuming that child-loaders are the same as the parent, use Webpack’s build in dependency resolution. The benefits of this is that it’s easier to treat the CSS dependency tree differently (i.e. extract text for certain vendor libs). The tradeoff is that it gives people the ability to shoot themselves in the foot if they misconfigure their loaders. This is worthwhile IMHO as the error will fail fast. It shouldn’t change behavior for existing users. --- lib/getImportPrefix.js | 14 -------------- lib/loader.js | 13 +++++-------- lib/localsLoader.js | 8 +------- test/helpers.js | 1 + 4 files changed, 7 insertions(+), 29 deletions(-) delete mode 100644 lib/getImportPrefix.js diff --git a/lib/getImportPrefix.js b/lib/getImportPrefix.js deleted file mode 100644 index 5d3be772..00000000 --- a/lib/getImportPrefix.js +++ /dev/null @@ -1,14 +0,0 @@ -/* - MIT License http://www.opensource.org/licenses/mit-license.php - Author Tobias Koppers @sokra -*/ -module.exports = function getImportPrefix(loaderContext, query) { - if(query.importLoaders === false) - return ""; - var importLoaders = parseInt(query.importLoaders, 10) || 0; - var loadersRequest = loaderContext.loaders.slice( - loaderContext.loaderIndex, - loaderContext.loaderIndex + 1 + importLoaders - ).map(function(x) { return x.request; }).join("!"); - return "-!" + loadersRequest + "!"; -}; diff --git a/lib/loader.js b/lib/loader.js index 7574ba15..79db4297 100644 --- a/lib/loader.js +++ b/lib/loader.js @@ -5,10 +5,8 @@ var path = require("path"); var loaderUtils = require("loader-utils"); var processCss = require("./processCss"); -var getImportPrefix = require("./getImportPrefix"); var compileExports = require("./compile-exports"); - module.exports = function(content, map) { if(this.cacheable) this.cacheable(); var callback = this.async(); @@ -33,8 +31,9 @@ module.exports = function(content, map) { var cssAsString = JSON.stringify(result.source); - // for importing CSS - var importUrlPrefix = getImportPrefix(this, query); + result.importItems.forEach(function(imp) { + this.addDependency(imp.url); + }.bind(this)); var alreadyImported = {}; var importJs = result.importItems.filter(function(imp) { @@ -50,8 +49,7 @@ module.exports = function(content, map) { JSON.stringify("@import url(" + imp.url + ");") + ", " + JSON.stringify(imp.mediaQuery) + "]);"; } else { - var importUrl = importUrlPrefix + imp.url; - return "exports.i(require(" + loaderUtils.stringifyRequest(this, importUrl) + "), " + JSON.stringify(imp.mediaQuery) + ");"; + return "exports.i(require(" + loaderUtils.stringifyRequest(this, imp.url) + "), " + JSON.stringify(imp.mediaQuery) + ");"; } }, this).join("\n"); @@ -59,8 +57,7 @@ module.exports = function(content, map) { var match = result.importItemRegExp.exec(item); var idx = +match[1]; var importItem = result.importItems[idx]; - var importUrl = importUrlPrefix + importItem.url; - return "\" + require(" + loaderUtils.stringifyRequest(this, importUrl) + ").locals" + + return "\" + require(" + loaderUtils.stringifyRequest(this, importItem.url) + ").locals" + "[" + JSON.stringify(importItem.export) + "] + \""; } diff --git a/lib/localsLoader.js b/lib/localsLoader.js index c1982a48..634a5668 100644 --- a/lib/localsLoader.js +++ b/lib/localsLoader.js @@ -4,10 +4,8 @@ */ var loaderUtils = require("loader-utils"); var processCss = require("./processCss"); -var getImportPrefix = require("./getImportPrefix"); var compileExports = require("./compile-exports"); - module.exports = function(content) { if(this.cacheable) this.cacheable(); var callback = this.async(); @@ -23,15 +21,11 @@ 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 = importUrlPrefix + importItem.url; - return "\" + require(" + loaderUtils.stringifyRequest(this, importUrl) + ")" + + return "\" + require(" + JSON.stringify(importItem.url) + ")" + "[" + JSON.stringify(importItem.export) + "] + \""; } diff --git a/test/helpers.js b/test/helpers.js index fc99c8d3..182c1386 100644 --- a/test/helpers.js +++ b/test/helpers.js @@ -34,6 +34,7 @@ function assetEvaluated(output, result, modules) { function runLoader(loader, input, map, addOptions, callback) { var opt = { + addDependency: function(url) {}, options: { context: "" }, From b968b438726965a4470b8b0d2674d6ca911fd15f Mon Sep 17 00:00:00 2001 From: Chris Lloyd Date: Fri, 12 Aug 2016 12:04:51 -0700 Subject: [PATCH 2/2] Only import global CSS --- lib/loader.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/lib/loader.js b/lib/loader.js index 79db4297..1473809e 100644 --- a/lib/loader.js +++ b/lib/loader.js @@ -49,7 +49,8 @@ module.exports = function(content, map) { JSON.stringify("@import url(" + imp.url + ");") + ", " + JSON.stringify(imp.mediaQuery) + "]);"; } else { - return "exports.i(require(" + loaderUtils.stringifyRequest(this, imp.url) + "), " + JSON.stringify(imp.mediaQuery) + ");"; + return "exports.i(require(" + loaderUtils.stringifyRequest(this, + imp.url) + "), " + JSON.stringify(imp.mediaQuery) + ");"; } }, this).join("\n"); @@ -57,7 +58,7 @@ module.exports = function(content, map) { var match = result.importItemRegExp.exec(item); var idx = +match[1]; var importItem = result.importItems[idx]; - return "\" + require(" + loaderUtils.stringifyRequest(this, importItem.url) + ").locals" + + return "\" + require(" + loaderUtils.stringifyRequest(this, importItem.url) + ")" + "[" + JSON.stringify(importItem.export) + "] + \""; }