Workaround to make double composition of classes not break

package.json

@@ -29,6 +29,7 @@
     "find-cycle": "^1.0.0",
     "generic-names": "^2.0.1",
     "insert-css": "^2.0.0",
+    "map-obj": "^4.1.0",
     "object.fromentries": "^2.0.1",
     "postcss": "^6.0.9",
     "postcss-modules-extract-imports": "^2.0.0",

src/phase-streams/dedupe-bundle-css.js

@@ -2,6 +2,7 @@
 
 const Promise = require("bluebird");
 const path = require("path");
+const mapObj = require("map-obj");
 
 const stream = require("../stream");
 const createFilePostprocessor = require("../postcss/postprocess");
@@ -32,12 +33,17 @@ module.exports = function (state) {
 				return Promise.try(() => {
 					return processFile(item);
 				}).then(({ result, icssExports }) => {
+					// NOTE: This is a workaround, until we find a more robust solution to this. While composed classes should be delimited by dots in CSS, they should be delimited by *spaces* in HTML. In "double compose" cases, ie. when one class composes another class which was already composed with a third class, we can get a class string like "foo bar.baz" which is wrong; this replaces all the erroneous dots with spaces.
+					let icssExportsHTML = mapObj(icssExports, (key, value) => {
+						return [ key, value.replace(/\./g, " ") ];
+					});
+					
 					allCss += `/* from ${path.relative(entryPoint, item.file)} */\n\n${result.css}\n\n`;
 
 					if (!item.__icssify__discardable) {
 						return {
 							... item,
-							source: `require(${JSON.stringify(relativeLoaderPath)}); module.exports = ${JSON.stringify(icssExports)};`
+							source: `require(${JSON.stringify(relativeLoaderPath)}); module.exports = ${JSON.stringify(icssExportsHTML)};`
 						};
 					}
 				});