YES IT IS PASSING OMG

Author: geelen

src/parser.js

@@ -1,4 +1,5 @@
 const importRegexp = /^:import\((.+)\)$/
+import replaceSymbols from './replace-symbols'
 
 export default class Parser {
   constructor( pathFetcher, trace ) {
@@ -26,11 +27,7 @@ export default class Parser {
   }
 
   linkImportedSymbols( css ) {
-    css.eachDecl( decl => {
-      Object.keys(this.translations).forEach( translation => {
-        decl.value = decl.value.replace(translation, this.translations[translation])
-      } )
-    })
+    replaceSymbols(css, this.translations)
   }
 
   extractExports( css ) {

src/replace-symbols.js

@@ -0,0 +1,17 @@
+const matchConstName = /[\w-]+/g
+
+const replace = (declarations, object, propName) => {
+  let matches
+  while (matches = matchConstName.exec(object[propName])) {
+    let replacement = declarations[matches[0]]
+    if (replacement) {
+      object[propName] = object[propName].slice(0, matches.index) + replacement + object[propName].slice(matchConstName.lastIndex)
+      matchConstName.lastIndex -= matches[0].length - replacement.length
+    }
+  }
+}
+
+export default (css, translations) => {
+  css.eachDecl(decl => replace(translations, decl, 'value'))
+  css.eachAtRule('media', atRule => replace(translations, atRule, 'params'))
+}

src/wip.js

@@ -1,40 +1,29 @@
-import postcss from 'postcss';
+import postcss from 'postcss'
+import replaceSymbols from './replace-symbols'
 
-const matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*')$/
+const matchImports = /^(.+?)\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/
 const matchLet = /(?:,\s+|^)([\w-]+):?\s+("[^"]*"|'[^']*'|[^,]+)\s?/g
-const matchConstName = /[\w-]+/g
 const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/
 let options = {}
 let importIndex = 0
 let createImportedName = options && options.createImportedName || ((importName/*, path*/) => `i__const_${importName.replace(/\W/g, '_')}_${importIndex++}`)
 
-const replace = (declarations, object, propName) => {
-  let matches
-  while (matches = matchConstName.exec(object[propName])) {
-    let replacement = declarations[matches[0]]
-    if (replacement) {
-      object[propName] = object[propName].slice(0, matches.index) + replacement + object[propName].slice(matchConstName.lastIndex)
-      matchConstName.lastIndex -= matches[0].length - replacement.length
-    }
-  }
-}
-
 export default css => {
   /* Find any local let rules and store them*/
-  let declarations = {}
+  let translations = {}
   css.eachAtRule(/^-?let$/, atRule => {
     let matches
     while (matches = matchLet.exec(atRule.params)) {
       let [/*match*/, key, value] = matches
-      declarations[key] = value
+      translations[key] = value
+      atRule.removeSelf()
     }
   })
 
-  console.log(declarations)
   /* We want to export anything defined by now, but don't add it to the CSS yet or
   it well get picked up by the replacement stuff */
-  let exportDeclarations = Object.keys(declarations).map(key => postcss.decl({
-    value: declarations[key],
+  let exportDeclarations = Object.keys(translations).map(key => postcss.decl({
+    value: translations[key],
     prop: key,
     before: "\n  ",
     _autoprefixerDisabled: true
@@ -46,23 +35,27 @@ export default css => {
     let matches = matchImports.exec(atRule.params)
     if (matches) {
       let [/*match*/, aliases, path] = matches
+      // We can use constants for path names
+      if (translations[path]) path = translations[path]
       let imports = aliases.split(/\s*,\s*/).map(alias => {
         let tokens = matchImport.exec(alias)
         if (tokens) {
           let [/*match*/, theirName, myName = theirName] = tokens
           let importedName = createImportedName(myName)
-          declarations[myName] = importedName
+          translations[myName] = importedName
           return {theirName, importedName}
         } else {
           throw new Error(`@import statement "${alias}" is invalid!`)
         }
       })
       importAliases.push({path, imports})
+      atRule.removeSelf()
     }
   })
 
+  console.log(translations)
   /* Perform replacements */
-  css.eachDecl(decl => replace(declarations, decl, 'value'))
+  replaceSymbols(css, translations)
 
   /* Add import rules */
   importAliases.forEach(({path, imports}) => {

test/test-cases/aliases/expected.css

@@ -1,10 +1,13 @@
-._aliases_borders__bar {
-  color: red;
+._aliases_borders__dashed {
+  border: 4px dashed;
 }
+
+
 ._aliases_source__foo {
   background: aquamarine;
   border-color: red;
 }
+
 @media (max-width: 599px) {
   ._aliases_source__foo {
     background: white;

test/test-cases/aliases/expected.json

@@ -1,3 +1,5 @@
 {
-  "foo": "_aliases_borders__bar _aliases_source__foo"
+  "borders": "\"./borders.css\"",
+  "breakpoints": "\"./breakpoints.css\"",
+  "foo": "_aliases_source__foo _aliases_borders__dashed"
 }

test/test-cases/aliases/source.css

@@ -1,4 +1,4 @@
-@let borders: "./borders.css", breakpoints: "./breakpoints";
+@let borders: "./borders.css", breakpoints: "./breakpoints.css";
 @import small from breakpoints;
 @import secondary, primary as blue from "./colors.css";