WIP

parcel-bundler · Feb 17, 2019 · 4a6222d · 4a6222d
1 parent 5429f9c
commit 4a6222d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 33 deletions.
diff --git a/packages/core/parcel-bundler/src/Asset.js b/packages/core/parcel-bundler/src/Asset.js
@@ -84,16 +84,7 @@ class Asset {
     this.dependencies.set(name, Object.assign({name}, opts));
   }
 
-  addURLDependency(url, from = this.name, opts) {
-    if (!url || isURL(url)) {
-      return url;
-    }
-
-    if (typeof from === 'object') {
-      opts = from;
-      from = this.name;
-    }
-
+  resolveDependency(url, from = this.name) {
     const parsed = URL.parse(url);
     let depName;
     let resolved;
@@ -110,8 +101,24 @@ class Asset {
       depName = './' + path.relative(path.dirname(this.name), resolved);
     }
 
+    return {depName, resolved};
+  }
+
+  addURLDependency(url, from = this.name, opts) {
+    if (!url || isURL(url)) {
+      return url;
+    }
+
+    if (typeof from === 'object') {
+      opts = from;
+      from = this.name;
+    }
+
+    const {depName, resolved} = this.resolveDependency(url, from);
+
     this.addDependency(depName, Object.assign({dynamic: true, resolved}, opts));
 
+    const parsed = URL.parse(url);
     parsed.pathname = this.options.parser
       .getAsset(resolved, this.options)
       .generateBundleName();

diff --git a/packages/core/parcel-bundler/src/assets/CSSAsset.js b/packages/core/parcel-bundler/src/assets/CSSAsset.js
@@ -1,14 +1,14 @@
-const path = require('path');
 const Asset = require('../Asset');
+const md5 = require('../utils/md5');
 const postcss = require('postcss');
 const valueParser = require('postcss-value-parser');
 const postcssTransform = require('../transforms/postcss');
 const CssSyntaxError = require('postcss/lib/css-syntax-error');
 
 const URL_RE = /url\s*\("?(?![a-z]+:)/;
 const IMPORT_RE = /@import/;
-const COMPOSES_RE = /composes\:\s*[a-z]+\s*from\s*("|').*("|')\s*;?/;
-const FROM_IMPORT_RE = /[a-z]+\s*from\s*(?:"|')(.*)(?:"|')\s*;?/;
+const COMPOSES_RE = /composes:\s*[a-zA-Z,\s]+from\s*("|').*("|')\s*;?/;
+const FROM_IMPORT_RE = /[a-zA-Z,\s]+from\s*(?:"|')(.*)(?:"|')\s*;?/;
 const PROTOCOL_RE = /^[a-z]+:/;
 
 class CSSAsset extends Asset {
@@ -97,27 +97,16 @@ class CSSAsset extends Asset {
 
       if (decl.prop === 'composes' && FROM_IMPORT_RE.test(decl.value)) {
         let parsed = valueParser(decl.value);
-        let dirty = false;
 
         parsed.walk(node => {
           if (node.type === 'string') {
-            this.addDependency(node.value, {
+            const [, importPath] = FROM_IMPORT_RE.exec(decl.value);
+            this.addURLDependency(importPath, {
+              dynamic: false,
               loc: decl.source.start
             });
-
-            const [, url] = FROM_IMPORT_RE.exec(decl.value);
-            node.value = this.resolver.resolveFilename(
-              url,
-              path.dirname(this.name)
-            );
-            dirty = true;
           }
         });
-
-        if (dirty) {
-          decl.value = parsed.toString();
-          this.ast.dirty = true;
-        }
       }
     });
   }
@@ -168,6 +157,10 @@ class CSSAsset extends Asset {
     ];
   }
 
+  generateClassName(name, filename) {
+    return `${name}_${md5(filename).substr(0, 5)}`;
+  }
+
   generateErrorMessage(err) {
     // Wrap the error in a CssSyntaxError if needed so we can generate a code frame
     if (err.loc && !err.showSourceCode) {

diff --git a/packages/core/parcel-bundler/src/transforms/postcss.js b/packages/core/parcel-bundler/src/transforms/postcss.js
@@ -37,7 +37,8 @@ async function getConfig(asset) {
 
   let postcssModulesConfig = {
     getJSON: (filename, json) => (asset.cssModules = json),
-    Loader: ParcelFileSystemLoader
+    Loader: createLoader(asset),
+    generateScopedName: asset.generateClassName
   };
 
   if (config.plugins && config.plugins['postcss-modules']) {
@@ -75,8 +76,19 @@ async function getConfig(asset) {
   return config;
 }
 
-class ParcelFileSystemLoader extends FileSystemLoader {
-  get finalSource() {
-    return '';
-  }
-}
+const createLoader = asset =>
+  class ParcelFileSystemLoader extends FileSystemLoader {
+    async fetch(composesPath, relativeTo, trace) {
+      let importPath = composesPath.replace(/^["']|["']$/g, '');
+      const {resolved} = asset.resolveDependency(importPath, relativeTo);
+      return FileSystemLoader.prototype.fetch.call(
+        this,
+        resolved,
+        relativeTo,
+        trace
+      );
+    }
+    get finalSource() {
+      return '';
+    }
+  };