fix: css compilation problems when multiple entries (#961)

* fix: css compilation problems when multiple entries * change minor to patch * refactor: options.output change to absMain * Apply suggestions from code review Co-authored-by: Ryan Christian <[email protected]>
developit · Jun 4, 2022 · cebafa1 · cebafa1
1 parent 4ad4b76
commit cebafa1
Show file tree

Hide file tree

Showing 8 changed files with 131 additions and 7 deletions.
diff --git a/.changeset/angry-worms-smell.md b/.changeset/angry-worms-smell.md
@@ -0,0 +1,5 @@
+---
+'microbundle': patch
+---
+
+Fix for when multiple entries reference different CSS, only the CSS referenced by the first entry will be packaged
diff --git a/src/index.js b/src/index.js
@@ -111,12 +111,7 @@ export default async function microbundle(inputOptions) {
 	for (let i = 0; i < options.entries.length; i++) {
 		for (let j = 0; j < formats.length; j++) {
 			steps.push(
-				createConfig(
-					options,
-					options.entries[i],
-					formats[j],
-					i === 0 && j === 0,
-				),
+				createConfig(options, options.entries[i], formats[j], j === 0),
 			);
 		}
 	}
@@ -502,7 +497,7 @@ function createConfig(options, entry, format, writeMeta) {
 						extract:
 							!!writeMeta &&
 							options.css !== 'inline' &&
-							options.output.replace(EXTENSION, '.css'),
+							absMain.replace(EXTENSION, '.css'),
 						minimize: options.compress,
 						sourceMap: options.sourcemap && options.css !== 'inline',
 					}),

diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
@@ -701,6 +701,99 @@ exports[`fixtures build basic-multi-source with microbundle 8`] = `
 "
 `;
 
+exports[`fixtures build basic-multi-source-css with microbundle 1`] = `
+"Used script: microbundle
+
+Directory tree:
+
+basic-multi-source-css
+  a.css
+  a.js
+  b.css
+  b.js
+  dist
+    a.css
+    a.css.map
+    a.esm.mjs
+    a.esm.mjs.map
+    a.js
+    a.js.map
+    a.umd.js
+    a.umd.js.map
+    b.css
+    b.css.map
+    b.esm.mjs
+    b.esm.mjs.map
+    b.js
+    b.js.map
+    b.umd.js
+    b.umd.js.map
+  package.json
+
+
+Build \\"basic-multi-source-css\\" to dist:
+104 B: a.js.gz
+61 B: a.js.br
+105 B: a.esm.mjs.gz
+67 B: a.esm.mjs.br
+201 B: a.umd.js.gz
+133 B: a.umd.js.br
+104 B: b.js.gz
+61 B: b.js.br
+106 B: b.esm.mjs.gz
+67 B: b.esm.mjs.br
+201 B: b.umd.js.gz
+134 B: b.umd.js.br"
+`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 2`] = `16`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 3`] = `
+".a{display:flex;color:green;background:pink}
+/*# sourceMappingURL=a.css.map */"
+`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 4`] = `
+"function e(){var e=document.createElement(\\"div\\");return e.className=\\"a\\",e}export default e;
+//# sourceMappingURL=a.esm.mjs.map
+"
+`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 5`] = `
+"module.exports=function(){var e=document.createElement(\\"div\\");return e.className=\\"a\\",e};
+//# sourceMappingURL=a.js.map
+"
+`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 6`] = `
+"!function(e,n){\\"object\\"==typeof exports&&\\"undefined\\"!=typeof module?module.exports=n():\\"function\\"==typeof define&&define.amd?define(n):(e||self).basicMultiSourceCss=n()}(this,function(){return function(){var e=document.createElement(\\"div\\");return e.className=\\"a\\",e}});
+//# sourceMappingURL=a.umd.js.map
+"
+`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 7`] = `
+".b{display:flex;color:red;background:#00f}
+/*# sourceMappingURL=b.css.map */"
+`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 8`] = `
+"function e(){var e=document.createElement(\\"div\\");return e.className=\\"b\\",e}export default e;
+//# sourceMappingURL=b.esm.mjs.map
+"
+`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 9`] = `
+"module.exports=function(){var e=document.createElement(\\"div\\");return e.className=\\"b\\",e};
+//# sourceMappingURL=b.js.map
+"
+`;
+
+exports[`fixtures build basic-multi-source-css with microbundle 10`] = `
+"!function(e,n){\\"object\\"==typeof exports&&\\"undefined\\"!=typeof module?module.exports=n():\\"function\\"==typeof define&&define.amd?define(n):(e||self).basicMultiSourceCss=n()}(this,function(){return function(){var e=document.createElement(\\"div\\");return e.className=\\"b\\",e}});
+//# sourceMappingURL=b.umd.js.map
+"
+`;
+
 exports[`fixtures build basic-no-compress with microbundle 1`] = `
 "Used script: microbundle --no-compress
 

diff --git a/test/fixtures/basic-multi-source-css/a.css b/test/fixtures/basic-multi-source-css/a.css
@@ -0,0 +1,5 @@
+.a {
+	display: flex;
+	color: green;
+	background: pink;
+}
diff --git a/test/fixtures/basic-multi-source-css/a.js b/test/fixtures/basic-multi-source-css/a.js
@@ -0,0 +1,7 @@
+import './a.css';
+
+export default function () {
+	const el = document.createElement('div');
+	el.className = 'a';
+	return el;
+}
diff --git a/test/fixtures/basic-multi-source-css/b.css b/test/fixtures/basic-multi-source-css/b.css
@@ -0,0 +1,5 @@
+.b {
+	display: flex;
+	color: red;
+	background: blue;
+}
diff --git a/test/fixtures/basic-multi-source-css/b.js b/test/fixtures/basic-multi-source-css/b.js
@@ -0,0 +1,7 @@
+import './b.css';
+
+export default function () {
+	const el = document.createElement('div');
+	el.className = 'b';
+	return el;
+}
diff --git a/test/fixtures/basic-multi-source-css/package.json b/test/fixtures/basic-multi-source-css/package.json
@@ -0,0 +1,7 @@
+{
+  "name": "basic-multi-source-css",
+  "source":[
+    "./a.js",
+    "./b.js"
+  ]
+}