Implement bundling files from @import statements.

systemjs · May 2, 2018 · 69148b2 · 69148b2
1 parent 12e6185
commit 69148b2
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git 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 = new loader.constructor();
 
   // backwards compat with fileURL for rootURL
   if (loader.rootURL && loader.rootURL.substr(0, 5) == 'file:')
@@ -70,6 +71,7 @@ exports.bundle = function(loads, compileOpts, outputOpts) {
 
   var inputFiles = {};
   cssLoads.forEach(function(load) {
+    importLoader.builder = load.metadata.builder;
     inputFiles[path.relative(baseURLPath, fromFileURL(load.address))] = {
       source: load.metadata.style,
       sourceMap: load.metadata.styleSourceMap
@@ -84,11 +86,28 @@ exports.bundle = function(loads, compileOpts, outputOpts) {
 
   var cwd = process.cwd();
 
+  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,
+          sourceMap: load.metadata.styleSourceMap
+        };
+      }
+    });
+  };
+
   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 importLoader.import(fileName, module.id).then(function() {
+        return resolved;
+      });
     },
     load: function(fileName, opts) {
       if (absUrl(fileName))

diff --git 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)