joepie91/icssify
1
0
Fork 1
Code Issues Pull requests Releases Wiki Activity

Workaround to make double composition of classes not break

Browse source
This commit is contained in:
Sven Slootweg 2020-11-17 17:05:44 +01:00
parent f8c3dfe782
commit adf17b2111
2 changed files with 8 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

@ -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",

8
src/phase-streams/dedupe-bundle-css.js
View file

@ -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)};`
};
}
});