Fix CSS order when merging type change bundles (#8766)

parcel-bundler · Jan 17, 2023 · ddae31a · ddae31a
1 parent 2172672
commit ddae31a
Show file tree

Hide file tree

Showing 7 changed files with 19 additions and 5 deletions.
diff --git a/packages/bundlers/default/src/DefaultBundler.js b/packages/bundlers/default/src/DefaultBundler.js
@@ -1155,10 +1155,10 @@ function createIdealGraph(
     invariant(a !== 'root' && b !== 'root');
     let bundleRootB = nullthrows(b.mainEntryAsset);
     let mainBundleRoot = nullthrows(a.mainEntryAsset);
-    for (let asset of a.assets) {
-      b.assets.add(asset);
+    for (let asset of b.assets) {
+      a.assets.add(asset);
+      a.size += asset.stats.size;
     }
-    a.assets = b.assets;
     for (let depId of dependencyBundleGraph.getNodeIdsConnectedTo(
       dependencyBundleGraph.getNodeIdByContentKey(String(otherNodeId)),
       ALL_EDGE_TYPES,

diff --git a/packages/core/integration-tests/test/css-modules.js b/packages/core/integration-tests/test/css-modules.js
@@ -353,6 +353,7 @@ describe('css modules', () => {
     assert(css.includes('height: 100px;'));
     assert(css.includes('height: 300px;'));
     assert(css.indexOf('_test') < css.indexOf('_intermediate'));
+    assert(css.indexOf('_intermediate') < css.indexOf('_composes5'));
   });
 
   it('should support composes imports for multiple selectors', async () => {

diff --git a/packages/core/integration-tests/test/css.js b/packages/core/integration-tests/test/css.js
@@ -22,17 +22,21 @@ describe('css', () => {
     assertBundles(b, [
       {
         name: 'index.js',
-        assets: ['index.js', 'local.js'],
+        assets: ['index.js', 'local.js', 'c.js'],
       },
       {
         name: 'index.css',
-        assets: ['index.css', 'local.css'],
+        assets: ['index.css', 'local.css', 'c.css'],
       },
     ]);
 
     let output = await run(b);
     assert.equal(typeof output, 'function');
     assert.equal(output(), 3);
+
+    let css = await outputFS.readFile(path.join(distDir, 'index.css'), 'utf8');
+    assert.ok(css.indexOf('.c {') < css.indexOf('.local {'));
+    assert.ok(css.indexOf('.local {') < css.indexOf('.index {'));
   });
 
   it('should bundle css dependencies in the correct, postorder traversal order', async () => {

diff --git a/packages/core/integration-tests/test/integration/css/c.css b/packages/core/integration-tests/test/integration/css/c.css
@@ -0,0 +1,3 @@
+.c {
+  color: red;
+}
diff --git a/packages/core/integration-tests/test/integration/css/c.js b/packages/core/integration-tests/test/integration/css/c.js
@@ -0,0 +1 @@
+require('./c.css');
diff --git a/packages/core/integration-tests/test/integration/css/local.js b/packages/core/integration-tests/test/integration/css/local.js
@@ -1,3 +1,4 @@
+require('./c.js');
 require('./local.css');
 
 exports.a = 1;

diff --git a/packages/transformers/css/src/CSSTransformer.js b/packages/transformers/css/src/CSSTransformer.js
@@ -222,6 +222,10 @@ export default (new Transformer({
                 ref.specifier,
               )};\n`;
               dependencies.set(ref.specifier, d);
+              asset.addDependency({
+                specifier: ref.specifier,
+                specifierType: 'esm',
+              });
             }
             s += '${' + `${d}[${JSON.stringify(ref.name)}]` + '}';
           }