Ensure :imports and :exports

Author: TrySound

src/icss.js

@@ -1,7 +1,42 @@
 const postcss = require('postcss')
 
+const importPattern = /^:import\(("[^"]*"|'[^']*'|[\w-]+)\)$/
+
+const exportPattern = /^:export$/
+
+const getDeclsObject = rule => {
+  const object = {}
+  rule.walkDecls(decl => {
+    object[decl.prop] = decl.value
+  })
+  return object
+}
+
+export const extractICSSImports = css => {
+  const imports = {}
+  css.walkRules(rule => {
+    const matches = importPattern.exec(rule.selector)
+    if (matches) {
+      const path = matches[1]
+      imports[path] = Object.assign({}, imports[path], getDeclsObject(rule))
+      rule.remove()
+    }
+  })
+  return imports
+}
+
+export const extractICSSExports = css => {
+  const exports = {}
+  css.walkRules(exportPattern, rule => {
+    Object.assign(exports, getDeclsObject(rule))
+    rule.remove()
+  })
+  return exports
+}
+
 const genICSSImportsRules = imports => {
-  return imports.map(({ path, aliases }) => {
+  return Object.keys(imports).map(path => {
+    const aliases = imports[path]
     const declarations = Object.keys(aliases).map(key =>
       postcss.decl({
         prop: key,

src/index.js

@@ -1,13 +1,18 @@
 const postcss = require('postcss')
 const { default: replaceSymbols, replaceAll } = require('icss-replace-symbols')
-const { genICSSRules } = require('./icss.js')
+const {
+  extractICSSImports,
+  extractICSSExports,
+  genICSSRules
+} = require('./icss.js')
 
 const matchImports = /^(.+?|\([\s\S]+?\))\s+from\s+("[^"]*"|'[^']*'|[\w-]+)$/
 const matchValueDefinition = /(?:\s+|^)([\w-]+):?\s+(.+?)\s*$/g
 const matchImport = /^([\w-]+)(?:\s+as\s+([\w-]+))?/
 
+// 'i' prefix to prevent postcss parsing "_" as css hook
 const getAliasName = (name, index) =>
-  `__value_${name.replace(/\W/g, '_')}_${index}`
+  `i__value_${name.replace(/\W/g, '_')}_${index}`
 
 let importIndex = 0
 const createImportedName = importName => getAliasName(importName, importIndex++)
@@ -16,15 +21,15 @@ module.exports = postcss.plugin('postcss-modules-values', () => (
   css,
   result
 ) => {
-  let importAliases = []
-  let definitions = {}
+  const imports = extractICSSImports(css)
+  const exports = extractICSSExports(css)
 
   const addDefinition = atRule => {
     let matches
     while ((matches = matchValueDefinition.exec(atRule.params))) {
       let [, key, value] = matches
       // Add to the definitions, knowing that values can refer to each other
-      definitions[key] = replaceAll(definitions, value)
+      exports[key] = replaceAll(exports, value)
       atRule.remove()
     }
   }
@@ -34,7 +39,7 @@ module.exports = postcss.plugin('postcss-modules-values', () => (
     if (matches) {
       let [, aliasesString, path] = matches
       // We can use constants for path names
-      if (definitions[path]) path = definitions[path]
+      if (exports[path]) path = exports[path]
       let aliases = aliasesString
         .replace(/^\(\s*([\s\S]+)\s*\)$/, '$1')
         .split(/\s*,\s*/)
@@ -43,7 +48,7 @@ module.exports = postcss.plugin('postcss-modules-values', () => (
           if (tokens) {
             let [, theirName, myName = theirName] = tokens
             let importedName = createImportedName(myName)
-            definitions[myName] = importedName
+            exports[myName] = importedName
             return { theirName, importedName }
           } else {
             throw new Error(`@import statement "${alias}" is invalid!`)
@@ -53,7 +58,7 @@ module.exports = postcss.plugin('postcss-modules-values', () => (
           acc[importedName] = theirName
           return acc
         }, {})
-      importAliases.push({ path, aliases })
+      imports[path] = Object.assign({}, imports[path], aliases)
       atRule.remove()
     }
   }
@@ -72,10 +77,10 @@ module.exports = postcss.plugin('postcss-modules-values', () => (
   })
 
   /* If we have no definitions, don't continue */
-  if (Object.keys(definitions).length === 0) return
+  if (Object.keys(exports).length === 0) return
 
   /* Perform replacements */
-  replaceSymbols(css, definitions)
+  replaceSymbols(css, exports)
 
-  css.prepend(genICSSRules(importAliases, definitions))
+  css.prepend(genICSSRules(imports, exports))
 })

test/test.js

@@ -76,10 +76,10 @@ test('should import and re-export a simple constant', () => {
   ).resolves.toEqual(
     strip(`
       :import("./colors.css") {
-        __value_red_0: red
+        i__value_red_0: red
       }
       :export {
-        red: __value_red_0
+        red: i__value_red_0
       }
     `)
   )
@@ -94,12 +94,12 @@ test('should import a simple constant and replace usages', () => {
   ).resolves.toEqual(
     strip(`
       :import("./colors.css") {
-        __value_red_1: red;
+        i__value_red_1: red;
       }
       :export {
-        red: __value_red_1;
+        red: i__value_red_1;
       }
-      .foo { color: __value_red_1; }
+      .foo { color: i__value_red_1; }
     `)
   )
 })
@@ -113,12 +113,12 @@ test('should import and alias a constant and replace usages', () => {
   ).resolves.toEqual(
     strip(`
       :import("./colors.css") {
-        __value_red_2: blue;
+        i__value_red_2: blue;
       }
       :export {
-        red: __value_red_2;
+        red: i__value_red_2;
       }
-      .foo { color: __value_red_2; }
+      .foo { color: i__value_red_2; }
     `)
   )
 })
@@ -133,15 +133,15 @@ test('should import multiple from a single file', () => {
   ).resolves.toEqual(
     strip(`
       :import("./colors.css") {
-        __value_blue_3: blue;
-        __value_red_4: red;
+        i__value_blue_3: blue;
+        i__value_red_4: red;
       }
       :export {
-        blue: __value_blue_3;
-        red: __value_red_4;
+        blue: i__value_blue_3;
+        red: i__value_red_4;
       }
-      .foo { color: __value_red_4; }
-      .bar { color: __value_blue_3 }
+      .foo { color: i__value_red_4; }
+      .bar { color: i__value_blue_3 }
     `)
   )
 })
@@ -154,11 +154,11 @@ test('should import from a definition', () => {
   ).resolves.toEqual(
     strip(`
       :import("./colors.css") {
-        __value_red_5: red
+        i__value_red_5: red
       }
       :export {
         colors: "./colors.css";
-        red: __value_red_5
+        red: i__value_red_5
       }
     `)
   )
@@ -172,10 +172,10 @@ test('should only allow values for paths if defined in the right order', () => {
   ).resolves.toEqual(
     strip(`
       :import(colors) {
-        __value_red_6: red
+        i__value_red_6: red
       }
       :export {
-        red: __value_red_6;
+        red: i__value_red_6;
         colors: "./colors.css"
       }
     `)
@@ -226,14 +226,14 @@ test('should preserve import order', () => {
   ).resolves.toEqual(
     strip(`
       :import("./a.css") {
-        __value_a_7: a
+        i__value_a_7: a
       }
       :import("./b.css") {
-        __value_b_8: b
+        i__value_b_8: b
       }
       :export {
-        a: __value_a_7;
-        b: __value_b_8
+        a: i__value_a_7;
+        b: i__value_b_8
       }
     `)
   )
@@ -247,12 +247,12 @@ test('should allow custom-property-style names', () => {
   ).resolves.toEqual(
     strip(`
       :import("./colors.css") {
-        __value___red_9: --red;
+        i__value___red_9: --red;
       }
       :export {
-        --red: __value___red_9;
+        --red: i__value___red_9;
       }
-      .foo { color: __value___red_9; }
+      .foo { color: i__value___red_9; }
     `)
   )
 })
@@ -306,15 +306,15 @@ test('should import multiple from a single file on multiple lines', () => {
   ).resolves.toEqual(
     strip(`
       :import("./colors.css") {
-        __value_blue_10: blue;
-        __value_red_11: red;
+        i__value_blue_10: blue;
+        i__value_red_11: red;
       }
       :export {
-        blue: __value_blue_10;
-        red: __value_red_11;
+        blue: i__value_blue_10;
+        red: i__value_red_11;
       }
-      .foo { color: __value_red_11; }
-      .bar { color: __value_blue_10 }
+      .foo { color: i__value_red_11; }
+      .bar { color: i__value_blue_10 }
     `)
   )
 })
@@ -348,3 +348,28 @@ test('should allow values with nested parantheses', () => {
     `)
   )
 })
+
+test('reuse existing :import with same name and :export', () => {
+  return expect(
+    runCSS(`
+      :import('./colors.css') {
+        i__some_import: blue;
+      }
+      :export {
+        b: i__c;
+      }
+      @value a from './colors.css';
+    `)
+  ).resolves.toEqual(
+    strip(`
+      :import('./colors.css') {
+        i__some_import: blue;
+        i__value_a_12: a
+      }
+      :export {
+        b: i__c;
+        a: i__value_a_12
+      }
+    `)
+  )
+})