feat: rework svelte & rollup (#430)

BREAKING CHANGE: - `modular-css-svelte` no longer has a custom rollup integration, use `modular-css-rollup` instead - `modular-css-rollup` now supports a `common` option that will handle outputting any CSS that was removed from chunks due to treeshaking. - `modular-css-rollup` accepts a new `processor` option that is expected to be a fully-configured & instantiated instance of `Processor` from `modular-css-core`.
tivac · Jun 8, 2018 · c80dafe · c80dafe
1 parent 6746694
commit c80dafe
Show file tree

Hide file tree

Showing 39 changed files with 1,079 additions and 763 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1,9 +1,9 @@
 coverage/
-parsers/
-node_modules/
-specimens/
-results/
-gen/
 dangerfile.js
-gen/
 dist/
+gen/
+node_modules/
+parsers/
+results/
+specimens/
+specimens/output/
diff --git a/docs/svelte.md b/docs/svelte.md
@@ -14,7 +14,7 @@ All options are passed to the underlying `Processor` instance, see [Options](api
 const filename = "./Component.html";
 
 const { processor, preprocess } = require("modular-css-svelte")({
-    css : "./dist/bundle.css"
+    // Processor options
 });
 
 const processed = await svelte.preprocess(
@@ -27,24 +27,30 @@ const result = processor.output();
 fs.writeFileSync("./dist/bundle.css", result.css);
 ```
 
-### `rollup-plugin-svelte`
+### `modular-css-rollup`
 
 #### API
 
 ```js
 const rollup = require("rollup").rollup;
 
-const { preprocess, plugin } = require("modular-css-svelte/rollup")({
-    css : "./dist/bundle.css"
+const { preprocess, processor } = require("modular-css-svelte")({
+    // Processor options
 });
 
 const bundle = await rollup({
     input   : "./Component.html",
+
     plugins : [
         require("rollup-plugin-svelte")({
-            preprocess
+            preprocess,
+        }),
+
+        require("modular-css-rollup)({
+            processor,
+
+            common : "common.css",
         }),
-        plugin
     ]
 });
 
@@ -58,21 +64,28 @@ bundle.write({
 #### `rollup.config.js`
 
 ```js
-const { preprocess, plugin } = require("modular-css-svelte/rollup")({
-    css : "./dist/bundle.css"
+const { preprocess, processor } = require("modular-css-svelte")({
+    // Processor options
 });
 
 module.exports = {
     input   : "./Component.html",
+    
     output  : {
         format : "es",
         file   : "./dist/bundle.js"
     },
+
     plugins : [
         require("rollup-plugin-svelte")({
-            preprocess
+            preprocess,
+        }),
+        
+        require("modular-css-rollup)({
+            processor,
+
+            common : "common.css",
         }),
-        plugin
     ]
 };
 ```
diff --git a/package.json b/package.json
@@ -50,7 +50,8 @@
   "jest": {
     "coveragePathIgnorePatterns": [
       "node_modules",
-      "parsers"
+      "parsers",
+      "test-utils"
     ],
     "watchPathIgnorePatterns": [
       "test/output",

diff --git a/packages/rollup/README.md b/packages/rollup/README.md
@@ -44,28 +44,28 @@ export default {
 
 ## Options
 
-### `include`/`exclude`
+### `common`
 
-A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd()`. `include` defaults to `**/*.css`.
+File name to use in case there are any CSS dependencies that appear in multiple bundles.
 
-### `css`
+### `include`/`exclude`
 
-Boolean to determine if CSS files should be output at the end of compilation. Defaults to `true`.
+A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd()`. `include` defaults to `**/*.css`.
 
 ### `json`
 
 Boolean to determine if JSON files should be output at the end of compilation. Defaults to `false`.
 
-### `namedExports`
-
-By default this plugin will create both a default export and named `export`s for each class in a CSS file. You can disable this by setting `namedExports` to `false`.
-
 ### `map`
 
 Boolean to determine if inline source maps should be included. Defaults to `true`.
 
 To force the creation of external source maps set the value to `{ inline : false }`.
 
+### `namedExports`
+
+By default this plugin will create both a default export and named `export`s for each class in a CSS file. You can disable this by setting `namedExports` to `false`.
+
 ### Shared Options
 
 All other options are passed to the underlying `Processor` instance, see [Options](https://github.com/tivac/modular-css/blob/master/docs/api.md#options).
diff --git a/packages/rollup/package-lock.json b/packages/rollup/package-lock.json
diff --git a/packages/rollup/package.json b/packages/rollup/package.json
@@ -21,6 +21,7 @@
     "esutils": "^2.0.2",
     "mkdirp": "^0.5.1",
     "modular-css-core": "file:../core",
-    "rollup-pluginutils": "^2.0.1"
+    "rollup-pluginutils": "^2.0.1",
+    "slash": "^2.0.0"
   }
 }
diff --git a/packages/rollup/rollup.js b/packages/rollup/rollup.js
@@ -4,6 +4,7 @@ const path = require("path");
 
 const keyword = require("esutils").keyword;
 const utils   = require("rollup-pluginutils");
+const slash   = require("slash");
 
 const Processor = require("modular-css-core");
 const output    = require("modular-css-core/lib/output.js");
@@ -14,8 +15,14 @@ const map = {
     mappings : "",
 };
 
+function extensionless(file) {
+    return path.join(path.dirname(file), path.basename(file, path.extname(file)));
+}
+
 module.exports = function(opts) {
     const options = Object.assign(Object.create(null), {
+        common : false,
+
         json : false,
         map  : true,
 
@@ -26,17 +33,13 @@ module.exports = function(opts) {
 
     const filter = utils.createFilter(options.include, options.exclude);
 
+    const processor = options.processor || new Processor(options);
+
     let runs = 0;
-    let processor = new Processor(options);
-    let source;
 
     return {
         name : "modular-css",
 
-        options({ input }) {
-            source = input;
-        },
-
         transform : function(code, id) {
             let removed = [];
 
@@ -69,7 +72,7 @@ module.exports = function(opts) {
                 // Add dependencies
                 out = out.concat(
                     processor.dependencies(id).map((file) =>
-                        `import "${file.replace(/\\/g, "/")}";`
+                        `import "${slash(file)}";`
                     )
                 );
 
@@ -96,32 +99,52 @@ module.exports = function(opts) {
                 };
             });
         },
-        
+
         buildEnd() {
             runs++;
         },
 
         generateBundle : async function(outputOptions, bundle) {
-            await Promise.all(
-                Object.keys(bundle).map(async (entry) => {
-                    const base = path.basename(entry, path.extname(entry));
-                    const files = Object.keys(bundle[entry].modules).filter(filter);
+            const bundles = [];
+            const common  = processor.dependencies();
 
-                    // No point continuing if nothing to output!
-                    if(!files.length) {
-                        return;
-                    }
+            Object.keys(bundle).forEach((entry) => {
+                const files = Object.keys(bundle[entry].modules).filter(filter);
+
+                if(!files.length) {
+                    return;
+                }
+
+                // remove the files being exported from the common bundle
+                files.forEach((file) =>
+                    common.splice(common.indexOf(file), 1)
+                );
+
+                bundles.push({
+                    entry,
+                    files,
+                    base : extensionless(entry),
+                });
+            });
 
+            // Common chunk only emitted if configured & if necessary
+            if(options.common && common.length) {
+                bundles.push({
+                    entry : options.common,
+                    base  : extensionless(options.common),
+                    files : common
+                });
+            }
+
+            await Promise.all(
+                bundles.map(async ({ base, files }) => {
                     // TODO: docs say that empty string arg to .emitAsset() shouldn't be required
                     // https://github.com/rollup/rollup/wiki/Plugins#plugin-context
                     const css = this.emitAsset(`${base}.css`, "");
 
                     const result = await processor.output({
-                        from : source,
-                        to   : css,
-
-                        // Only export for files within this bundle
-                        files : Object.keys(bundle[entry].modules).filter(filter)
+                        to : css,
+                        files
                     });
 
                     this.setAssetSource(css, result.css);

diff --git a/packages/rollup/test/__snapshots__/rollup.test.js.snap b/packages/rollup/test/__snapshots__/rollup.test.js.snap
@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`/rollup.js code splitting should support dynamic imports 1`] = `
+"/* packages/rollup/test/specimens/dynamic-imports/a.css */
+.a {
+
+    color: aqua;
+}
+"
+`;
+
+exports[`/rollup.js code splitting should support dynamic imports 2`] = `
+"/* packages/rollup/test/specimens/dynamic-imports/b.css */
+.b {
+    color: blue;
+}
+"
+`;
+
+exports[`/rollup.js code splitting should support dynamic imports 3`] = `
+"/* packages/rollup/test/specimens/dynamic-imports/c.css */
+.c {
+    
+    color: cyan;
+}
+"
+`;
+
+exports[`/rollup.js code splitting should support dynamic imports 4`] = `
+"/* packages/rollup/test/specimens/dynamic-imports/d.css */
+.d {
+    color: darkred;
+}
+"
+`;
+
 exports[`/rollup.js code splitting should support manual chunks 1`] = `
 "/* packages/rollup/test/specimens/manual-chunks/a.css */
 .a {
@@ -19,8 +53,12 @@ exports[`/rollup.js code splitting should support manual chunks 2`] = `
 `;
 
 exports[`/rollup.js code splitting should support manual chunks 3`] = `
-"/* packages/rollup/test/specimens/manual-chunks/c.css */
-.c { color: green; }
+"/* packages/rollup/test/specimens/manual-chunks/d.css */
+/* packages/rollup/test/specimens/manual-chunks/c.css */
+.c {
+    color: green;
+    background: darkred;
+}
 "
 `;
 
@@ -33,13 +71,29 @@ exports[`/rollup.js code splitting should support splitting up CSS files 1`] = `
 `;
 
 exports[`/rollup.js code splitting should support splitting up CSS files 2`] = `
-"/* packages/rollup/test/specimens/named.css */
-.a {
+"/* packages/rollup/test/specimens/dependencies.css */
+.wooga {
+
+    background: blue;
+}
+"
+`;
+
+exports[`/rollup.js should accept an existing processor instance 1`] = `
+"/* packages/rollup/test/specimens/simple.css */
+.fooga {
     color: red;
 }
 "
 `;
 
+exports[`/rollup.js should accept an existing processor instance 2`] = `
+"/* packages/rollup/test/specimens/fake.css */
+.fake {
+    color: yellow;
+}"
+`;
+
 exports[`/rollup.js should allow disabling of named exports 1`] = `
 "var css = {
     \\"str\\": \\"\\\\\\"string\\\\\\"\\",
@@ -57,6 +111,15 @@ console.log(fooga);
 "
 `;
 
+exports[`/rollup.js should correctly pass to/from params for relative paths 1`] = `
+"/* packages/rollup/test/specimens/relative-paths.css */
+.wooga {
+    color: red;
+    background: url(\\"packages/rollup/test/specimens/folder/to.png\\");
+}
+"
+`;
+
 exports[`/rollup.js should generate CSS 1`] = `
 "/* packages/rollup/test/specimens/simple.css */
 .fooga {