Repository: tivac/modular-css
Pull request #639 (2019-07-24 07:04:17)

Add test for svelte <style> + rollup chunking
<!--- Provide a general summary of your changes in the Title above -->

## Description
<!--- Describe your changes in detail -->
Just a test and some specimens.

## Motivation and Context
<!--- Why is this change required? What problem does it solve? -->
<!--- If it fixes an open issue, please link to the issue here. -->
I want to be sure it works, and this admittedly simple test seems to show that it does. I think there's still a bug rattling around in there somewhere but this is a start.

## How Has This Been Tested?
<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran to -->
<!--- see how your change affects other areas of the code, etc. -->
`npm test`

## Types of changes
<!--- What types of changes does your code introduce? Put an `x` in all the boxes that apply: -->
- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to change)

## Checklist:
<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
- [x] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [x] I have read the **CONTRIBUTING** document.
- [x] I have added tests to cover my changes.
- [x] All new and existing tests passed.



Patch:
diff --git a/jest.config.js b/jest.config.js
index b7d817fb..ab03cd88 100644
--- a/jest.config.js
+++ b/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 : [


Test patch:
diff --git a/packages/svelte/test/__snapshots__/rollup.test.js.snap b/packages/svelte/test/__snapshots__/rollup.test.js.snap
index 6893db93..461619a9 100644
--- a/packages/svelte/test/__snapshots__/rollup.test.js.snap
+++ b/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
diff --git a/packages/svelte/test/rollup.test.js b/packages/svelte/test/rollup.test.js
index d71da09d..35fa44f2 100644
--- a/packages/svelte/test/rollup.test.js
+++ b/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,7 +207,7 @@ describe("/svelte.js", () => {
                             require("@modular-css/rollup")({
                                 processor,
                             }),
-                        ]
+                        ],
                     });
                 } catch(e) {
                     expect(e.toString()).toMatch(/\.wooga/);
@@ -215,4 +215,34 @@ describe("/svelte.js", () => {
             }
         );
     });
+
+    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();
+        });
+    });
 });
diff --git a/packages/svelte/test/specimens/inline-chunking/a-dep.css b/packages/svelte/test/specimens/inline-chunking/a-dep.css
new file mode 100644
index 00000000..5e5f96a1
--- /dev/null
+++ b/packages/svelte/test/specimens/inline-chunking/a-dep.css
@@ -0,0 +1,3 @@
+.adep {
+    margin: 5px;
+}
diff --git a/packages/svelte/test/specimens/inline-chunking/a.html b/packages/svelte/test/specimens/inline-chunking/a.html
new file mode 100644
index 00000000..c1ce8cf5
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/test/specimens/inline-chunking/b-dep.css b/packages/svelte/test/specimens/inline-chunking/b-dep.css
new file mode 100644
index 00000000..7e1e04b5
--- /dev/null
+++ b/packages/svelte/test/specimens/inline-chunking/b-dep.css
@@ -0,0 +1,3 @@
+.bdep {
+    padding: 5px;
+}
diff --git a/packages/svelte/test/specimens/inline-chunking/b.html b/packages/svelte/test/specimens/inline-chunking/b.html
new file mode 100644
index 00000000..4bb1ca83
--- /dev/null
+++ b/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>
diff --git a/packages/svelte/test/specimens/inline-chunking/shared.css b/packages/svelte/test/specimens/inline-chunking/shared.css
new file mode 100644
index 00000000..6d9dfaac
--- /dev/null
+++ b/packages/svelte/test/specimens/inline-chunking/shared.css
@@ -0,0 +1,3 @@
+.shared {
+    background: black;
+}
diff --git a/packages/test-utils/expect/toMatchRollupAssetSnapshot.js b/packages/test-utils/expect/toMatchRollupAssetSnapshot.js
new file mode 100644
index 00000000..68be88ea
--- /dev/null
+++ b/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,
+        );
+    },
+});
diff --git a/packages/test-utils/expect/toMatchRollupCodeSnapshot.js b/packages/test-utils/expect/toMatchRollupCodeSnapshot.js
index 2c991bcf..e334cca1 100644
--- a/packages/test-utils/expect/toMatchRollupCodeSnapshot.js
+++ b/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(