From 71ca94d005eb1f5fbcc4e0694a0a9dc7cb44eff9 Mon Sep 17 00:00:00 2001 From: jjrv Date: Thu, 3 May 2018 01:03:57 +0300 Subject: [PATCH 1/2] Implement bundling files from @import statements. --- css-plugin-base-builder.js | 27 ++++++++++++++++++++++++--- css-plugin-base.js | 1 + 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/css-plugin-base-builder.js b/css-plugin-base-builder.js index 63261ea..34b9cfd 100644 --- a/css-plugin-base-builder.js +++ b/css-plugin-base-builder.js @@ -70,6 +70,7 @@ exports.bundle = function(loads, compileOpts, outputOpts) { var inputFiles = {}; cssLoads.forEach(function(load) { + loader.builder = load.metadata.builder; inputFiles[path.relative(baseURLPath, fromFileURL(load.address))] = { source: load.metadata.style, sourceMap: load.metadata.styleSourceMap @@ -83,12 +84,31 @@ exports.bundle = function(loads, compileOpts, outputOpts) { } var cwd = process.cwd(); + var translate = loader.translate; + + loader.translate = function(load) { + return translate.call(this, load).then(function() { + if(load.metadata.style) { + inputFiles[path.relative(baseURLPath, fromFileURL(load.address))] = { + source: load.metadata.style, + sourceMap: load.metadata.styleSourceMap + }; + load.metadata.format = 'amd'; + } + }); + }; var postCssPlugins = [atImport({ resolve: function(fileName, dirname, opts) { - if (absUrl(fileName)) - return fileName; - return path.relative(baseURLPath, path.join(dirname, fileName)); + var resolved = fileName; + if (!absUrl(fileName)) { + fileName = path.join(dirname, fileName); + resolved = path.relative(baseURLPath, fileName); + } + + return loader.import(fileName, module.id).then(function() { + return resolved; + }); }, load: function(fileName, opts) { if (absUrl(fileName)) @@ -157,6 +177,7 @@ exports.bundle = function(loads, compileOpts, outputOpts) { }) .then(function(result) { var cssOutput = result.css; + loader.translate = translate; // write a separate CSS file if necessary if (loader.separateCSS) { diff --git a/css-plugin-base.js b/css-plugin-base.js index 3d54c8f..e3aa34f 100644 --- a/css-plugin-base.js +++ b/css-plugin-base.js @@ -16,6 +16,7 @@ function CSSPluginBase(compileCSS) { return Promise.resolve(compileCSS.call(loader, load.source, load.address, load.metadata.loaderOptions || {})) .then(function(result) { + Object.defineProperty(load.metadata, 'builder', { enumerable: false, value: loader.builder }); load.metadata.style = result.css; load.metadata.styleSourceMap = result.map; if (result.moduleFormat) From 3994fad5f10a16de7ca6e7c6531d046832bcf086 Mon Sep 17 00:00:00 2001 From: jjrv Date: Thu, 3 May 2018 08:22:46 +0300 Subject: [PATCH 2/2] Use builder's system instance when handling CSS imports. --- css-plugin-base-builder.js | 18 ++++++++++++------ css-plugin-base.js | 2 +- 2 files changed, 13 insertions(+), 7 deletions(-) diff --git a/css-plugin-base-builder.js b/css-plugin-base-builder.js index 34b9cfd..9c6ba62 100644 --- a/css-plugin-base-builder.js +++ b/css-plugin-base-builder.js @@ -55,6 +55,7 @@ exports.bundle = function(loads, compileOpts, outputOpts) { return; var loader = this; + var importLoader; // backwards compat with fileURL for rootURL if (loader.rootURL && loader.rootURL.substr(0, 5) == 'file:') @@ -70,7 +71,7 @@ exports.bundle = function(loads, compileOpts, outputOpts) { var inputFiles = {}; cssLoads.forEach(function(load) { - loader.builder = load.metadata.builder; + importLoader = load.metadata.loader; inputFiles[path.relative(baseURLPath, fromFileURL(load.address))] = { source: load.metadata.style, sourceMap: load.metadata.styleSourceMap @@ -84,10 +85,11 @@ exports.bundle = function(loads, compileOpts, outputOpts) { } var cwd = process.cwd(); - var translate = loader.translate; + var oldTranslate = importLoader.translate; + var oldImport = importLoader.import; - loader.translate = function(load) { - return translate.call(this, load).then(function() { + importLoader.translate = function(load) { + return loader.translate.call(this, load).then(function() { if(load.metadata.style) { inputFiles[path.relative(baseURLPath, fromFileURL(load.address))] = { source: load.metadata.style, @@ -98,6 +100,8 @@ exports.bundle = function(loads, compileOpts, outputOpts) { }); }; + importLoader.import = loader.import; + var postCssPlugins = [atImport({ resolve: function(fileName, dirname, opts) { var resolved = fileName; @@ -106,7 +110,7 @@ exports.bundle = function(loads, compileOpts, outputOpts) { resolved = path.relative(baseURLPath, fileName); } - return loader.import(fileName, module.id).then(function() { + return importLoader.import(fileName, module.id).then(function() { return resolved; }); }, @@ -177,7 +181,9 @@ exports.bundle = function(loads, compileOpts, outputOpts) { }) .then(function(result) { var cssOutput = result.css; - loader.translate = translate; + + importLoader.translate = oldTranslate; + importLoader.import = oldImport; // write a separate CSS file if necessary if (loader.separateCSS) { diff --git a/css-plugin-base.js b/css-plugin-base.js index e3aa34f..9521d8e 100644 --- a/css-plugin-base.js +++ b/css-plugin-base.js @@ -16,7 +16,7 @@ function CSSPluginBase(compileCSS) { return Promise.resolve(compileCSS.call(loader, load.source, load.address, load.metadata.loaderOptions || {})) .then(function(result) { - Object.defineProperty(load.metadata, 'builder', { enumerable: false, value: loader.builder }); + Object.defineProperty(load.metadata, 'loader', { enumerable: false, value: loader }); load.metadata.style = result.css; load.metadata.styleSourceMap = result.map; if (result.moduleFormat)