test(svelte): Add test for svelte <style> + rollup chunking (#639)

It works in this test, but based on stuff I've seen working on the website I'm not convinced that there isn't still a bug.

Author: tivac

jest.config.js

@@ -22,6 +22,7 @@ module.exports = {
                 "<rootDir>/packages/test-utils/expect/toMatchDiffSnapshot.js",
                 "<rootDir>/packages/test-utils/expect/toMatchRollupSnapshot.js",
                 "<rootDir>/packages/test-utils/expect/toMatchRollupCodeSnapshot.js",
+                "<rootDir>/packages/test-utils/expect/toMatchRollupAssetSnapshot.js",
             ],
 
             snapshotSerializers : [

packages/svelte/test/__snapshots__/rollup.test.js.snap

@@ -1,5 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`/svelte.js rollup chunking should correctly chunk svelte files using inline <style> 1`] = `
+Object {
+  "a.css": "
+/* packages/svelte/test/specimens/inline-chunking/a-dep.css */
+.mc6ca450b0_adep {
+    margin: 5px;
+}
+/* packages/svelte/test/specimens/inline-chunking/a.html */
+.mc80aa5044_a {
+    color: aqua;
+}
+",
+  "b.css": "
+/* packages/svelte/test/specimens/inline-chunking/b-dep.css */
+.mcf56d52f6_bdep {
+    padding: 5px;
+}
+/* packages/svelte/test/specimens/inline-chunking/b.html */
+.mcbb945b2f_b {
+    color: blue;
+}
+",
+  "shared.css": "
+/* packages/svelte/test/specimens/inline-chunking/shared.css */
+.mcfef68931_shared {
+    background: black;
+}
+",
+}
+`;
+
 exports[`/svelte.js rollup watching should generate updated output 1`] = `
 Snapshot Diff:
 - First value

packages/svelte/test/rollup.test.js

@@ -196,7 +196,7 @@ describe("/svelte.js", () => {
                                         import Component from "./error-${type}.html";
 
                                         console.log(Component);
-                                    `
+                                    `,
                                 },
 
                                 allowFallthrough : true,
@@ -207,12 +207,42 @@ describe("/svelte.js", () => {
                             require("@modular-css/rollup")({
                                 processor,
                             }),
-                        ]
+                        ],
                     });
                 } catch(e) {
                     expect(e.toString()).toMatch(/\.wooga/);
                 }
             }
         );
     });
+
+    describe("rollup chunking", () => {
+        it("should correctly chunk svelte files using inline <style>", async () => {
+            const { preprocess, processor } = plugin();
+
+            const bundle = await rollup({
+                input : [
+                    require.resolve("./specimens/inline-chunking/a.html"),
+                    require.resolve("./specimens/inline-chunking/b.html"),
+                ],
+
+                plugins : [
+                    require("rollup-plugin-svelte")({
+                        preprocess,
+                    }),
+                    require("@modular-css/rollup")({
+                        processor,
+                    }),
+                ],
+            });
+
+            const out = await bundle.generate({
+                format         : "esm",
+                assetFileNames : "[name][extname]",
+                chunkFileNames : "[name]",
+            });
+
+            expect(out).toMatchRollupAssetSnapshot();
+        });
+    });
 });

packages/svelte/test/specimens/inline-chunking/a-dep.css

@@ -0,0 +1,3 @@
+.adep {
+    margin: 5px;
+}

packages/svelte/test/specimens/inline-chunking/a.html

@@ -0,0 +1,10 @@
+<div class="{css.a}">A.HTML</div>
+
+<style>
+.a {
+    composes: shared from "./shared.css";
+    composes: adep from "./a-dep.css";
+    
+    color: aqua;
+}
+</style>

packages/svelte/test/specimens/inline-chunking/b-dep.css

@@ -0,0 +1,3 @@
+.bdep {
+    padding: 5px;
+}

packages/svelte/test/specimens/inline-chunking/b.html

@@ -0,0 +1,10 @@
+<div class="{css.b}">B.HTML</div>
+
+<style>
+.b {
+    composes: shared from "./shared.css";
+    composes: bdep from "./b-dep.css";
+    
+    color: blue;
+}
+</style>

packages/svelte/test/specimens/inline-chunking/shared.css

@@ -0,0 +1,3 @@
+.shared {
+    background: black;
+}

packages/test-utils/expect/toMatchRollupAssetSnapshot.js

@@ -0,0 +1,22 @@
+"use strict";
+
+const { toMatchSnapshot } = require("jest-snapshot");
+
+expect.extend({
+    toMatchRollupAssetSnapshot({ output }) {
+        const out = Object.create(null);
+        
+        output.forEach(({ isAsset, fileName, source }) => {
+            if(!isAsset) {
+                return;
+            }
+
+            out[fileName] = `\n${source}`;
+        });
+
+        return toMatchSnapshot.call(
+            this,
+            out,
+        );
+    },
+});

packages/test-utils/expect/toMatchRollupCodeSnapshot.js

@@ -6,12 +6,12 @@ expect.extend({
     toMatchRollupCodeSnapshot({ output }) {
         const out = Object.create(null);
 
-        output.forEach((chunk) => {
-            if(chunk.isAsset) {
+        output.forEach(({ isAsset, name, code }) => {
+            if(isAsset) {
                 return;
             }
 
-            out[chunk.name] = chunk.code;
+            out[name] = code;
         });
 
         return toMatchSnapshot.call(