From adf17b2111f346960ea1bf71cff9c200cbe8fbf2 Mon Sep 17 00:00:00 2001 From: Sven Slootweg Date: Tue, 17 Nov 2020 17:05:44 +0100 Subject: [PATCH] Workaround to make double composition of classes not break --- package.json | 1 + src/phase-streams/dedupe-bundle-css.js | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index b8245e3..9d8dcc1 100644 --- a/package.json +++ b/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", diff --git a/src/phase-streams/dedupe-bundle-css.js b/src/phase-streams/dedupe-bundle-css.js index c99929a..14f944e 100644 --- a/src/phase-streams/dedupe-bundle-css.js +++ b/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)};` }; } });