fix: support chunks that don't depend on css (#544)

Fixes #543
tivac · Jan 18, 2019 · 10074e3 · 10074e3
1 parent 5665237
commit 10074e3
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 21 deletions.
diff --git a/packages/rollup/rollup.js b/packages/rollup/rollup.js
@@ -313,7 +313,7 @@ module.exports = (opts) => {
                     });
                 }
             }
-            
+
             if(options.json) {
                 const dest = typeof options.json === "string" ? options.json : "exports.json";
 
@@ -333,7 +333,12 @@ module.exports = (opts) => {
 
                 out.forEach(({ dest : file, dependencies }, entry) => {
                     meta[entry] = {
-                        dependencies : [ file, ...dependencies.map((key) => out.get(key).dest) ]
+                        dependencies : [
+                            file,
+                            ...dependencies
+                                .filter((key) => out.has(key))
+                                .map((key) => out.get(key).dest),
+                        ]
                     };
                 });
 

diff --git a/packages/rollup/test/__snapshots__/splitting.test.js.snap b/packages/rollup/test/__snapshots__/splitting.test.js.snap
@@ -303,34 +303,86 @@ Array [
 
 exports[`/rollup.js code splitting should support outputting metadata about CSS dependencies 1`] = `
 Array [
+  Object {
+    "file": "a.css",
+    "text": "/* packages/rollup/test/specimens/metadata/a.css */
+.a { color: aqua; }
+",
+  },
+  Object {
+    "file": "b.css",
+    "text": "/* packages/rollup/test/specimens/metadata/b.css */
+.b { color: blue; }
+",
+  },
   Object {
     "file": "chunk.css",
-    "text": "/* packages/rollup/test/specimens/simple.css */
-.fooga {
-    color: red;
-}
+    "text": "/* packages/rollup/test/specimens/metadata/d.css */
+.d { color: darkkhaki; }
 ",
   },
   Object {
-    "file": "dependencies.css",
-    "text": "/* packages/rollup/test/specimens/dependencies.css */
-.wooga {
+    "file": "metadata.json",
+    "text": "{
+    \\"chunk2.js\\": {
+        \\"dependencies\\": [
+            \\"assets/chunk.css\\"
+        ]
+    },
+    \\"a.js\\": {
+        \\"dependencies\\": [
+            \\"assets/a.css\\",
+            \\"assets/chunk.css\\"
+        ]
+    },
+    \\"b.js\\": {
+        \\"dependencies\\": [
+            \\"assets/b.css\\",
+            \\"assets/chunk.css\\"
+        ]
+    }
+}",
+  },
+]
+`;
 
-    background: blue;
-}
+exports[`/rollup.js code splitting should support outputting metadata about CSS dependencies to a named file  1`] = `
+Array [
+  Object {
+    "file": "a.css",
+    "text": "/* packages/rollup/test/specimens/metadata/a.css */
+.a { color: aqua; }
 ",
   },
   Object {
-    "file": "metadata.json",
+    "file": "b.css",
+    "text": "/* packages/rollup/test/specimens/metadata/b.css */
+.b { color: blue; }
+",
+  },
+  Object {
+    "file": "chunk.css",
+    "text": "/* packages/rollup/test/specimens/metadata/d.css */
+.d { color: darkkhaki; }
+",
+  },
+  Object {
+    "file": "chunks.json",
     "text": "{
-    \\"chunk.js\\": {
+    \\"chunk2.js\\": {
+        \\"dependencies\\": [
+            \\"assets/chunk.css\\"
+        ]
+    },
+    \\"a.js\\": {
         \\"dependencies\\": [
+            \\"assets/a.css\\",
             \\"assets/chunk.css\\"
         ]
     },
-    \\"dependencies.js\\": {
+    \\"b.js\\": {
         \\"dependencies\\": [
-            \\"assets/dependencies.css\\",
+            \\"assets/b.css\\",
             \\"assets/chunk.css\\"
         ]
     }

diff --git a/packages/rollup/test/specimens/metadata/a.css b/packages/rollup/test/specimens/metadata/a.css
@@ -0,0 +1 @@
+.a { color: aqua; }
diff --git a/packages/rollup/test/specimens/metadata/a.js b/packages/rollup/test/specimens/metadata/a.js
@@ -0,0 +1,4 @@
+import c from "./c.js";
+import css from "./a.css";
+
+console.log(css, c);
diff --git a/packages/rollup/test/specimens/metadata/b.css b/packages/rollup/test/specimens/metadata/b.css
@@ -0,0 +1 @@
+.b { color: blue; }
diff --git a/packages/rollup/test/specimens/metadata/b.js b/packages/rollup/test/specimens/metadata/b.js
@@ -0,0 +1,4 @@
+import c from "./c.js";
+import css from "./b.css";
+
+console.log(css, c);
diff --git a/packages/rollup/test/specimens/metadata/c.js b/packages/rollup/test/specimens/metadata/c.js
@@ -0,0 +1,3 @@
+import("./d.js").then(console.log);
+
+export default "c";
diff --git a/packages/rollup/test/specimens/metadata/d.css b/packages/rollup/test/specimens/metadata/d.css
@@ -0,0 +1 @@
+.d { color: darkkhaki; }
diff --git a/packages/rollup/test/specimens/metadata/d.js b/packages/rollup/test/specimens/metadata/d.js
@@ -0,0 +1,5 @@
+import css from "./d.css";
+
+console.log(css);
+
+export default "d";
diff --git a/packages/rollup/test/splitting.test.js b/packages/rollup/test/splitting.test.js
@@ -55,12 +55,12 @@ describe("/rollup.js", () => {
 
             expect(dir("./splitting/assets")).toMatchSnapshot();
         });
-        
+
         it("should support outputting metadata about CSS dependencies", async () => {
             const bundle = await rollup({
                 input : [
-                    require.resolve("./specimens/simple.js"),
-                    require.resolve("./specimens/dependencies.js"),
+                    require.resolve("./specimens/metadata/a.js"),
+                    require.resolve("./specimens/metadata/b.js"),
                 ],
 
                 plugins : [
@@ -85,6 +85,35 @@ describe("/rollup.js", () => {
             expect(dir("./css-metadata/assets")).toMatchSnapshot();
         });
 
+        it("should support outputting metadata about CSS dependencies to a named file ", async () => {
+            const bundle = await rollup({
+                input : [
+                    require.resolve("./specimens/metadata/a.js"),
+                    require.resolve("./specimens/metadata/b.js"),
+                ],
+
+                plugins : [
+                    plugin({
+                        namer,
+                        map,
+                        meta : "chunks.json",
+                    }),
+                ],
+            });
+
+            await bundle.write({
+                format,
+                sourcemap,
+
+                assetFileNames,
+                chunkFileNames,
+
+                dir : prefix(`./output/css-metadata-named`),
+            });
+
+            expect(dir("./css-metadata-named/assets")).toMatchSnapshot();
+        });
+
         it("should support splitting up CSS files w/ shared assets", async () => {
             const bundle = await rollup({
                 input : [
@@ -359,15 +388,15 @@ describe("/rollup.js", () => {
                     require.resolve("./specimens/circular-dependencies/a.js"),
                     require.resolve("./specimens/circular-dependencies/b.js"),
                 ],
-                
+
                 plugins : [
                     plugin({
                         namer,
                         map,
                     }),
                 ],
             });
-    
+
             await bundle.write({
                 format,
                 sourcemap,
@@ -377,7 +406,7 @@ describe("/rollup.js", () => {
 
                 dir : prefix(`./output/circular-dependencies`)
             });
-    
+
             expect(dir(`./circular-dependencies`)).toMatchSnapshot();
         });
     });