feat: dev mode for rollup (#518)

Adds new `dev` option to output a Proxy that throws on invalid property accesses.

packages/rollup/README.md

@@ -60,6 +60,10 @@ export default {
 
 File name to use in case there are any CSS dependencies that appear in multiple bundles. Defaults to "common.css".
 
+### `dev`
+
+Enable dev mode. In dev mode the default export of a CSS file will be a `Proxy` instead of a bare object. Attempts to access non-existant properties on the proxy will throw a `ReferenceError` to assist in catching invalid usage.
+
 ### `include`/`exclude`
 
 A minimatch pattern, or an array of minimatch patterns, relative to `process.cwd()`. `include` defaults to `**/*.css`.

packages/rollup/package.json

@@ -22,11 +22,13 @@
   ],
   "dependencies": {
     "@modular-css/processor": "file:../processor",
+    "dedent": "0.7.0",
     "esutils": "^2.0.2",
     "mkdirp": "^0.5.1",
+    "slash": "^2.0.0",
     "rollup-pluginutils": "^2.0.1"
   },
   "peerDependencies": {
-    "rollup": "^0.65.0"
+    "rollup": ">0.65.0"
   }
 }

packages/rollup/rollup.js

@@ -4,8 +4,9 @@
 const path = require("path");
 
 const { keyword } = require("esutils");
-
-const utils   = require("rollup-pluginutils");
+const utils = require("rollup-pluginutils");
+const dedent = require("dedent");
+const slash = require("slash");
 
 const Processor = require("@modular-css/processor");
 const output    = require("@modular-css/processor/lib/output.js");
@@ -33,11 +34,12 @@ module.exports = function(opts) {
         include      : "**/*.css",
         namedExports : true,
         styleExport  : false,
+        dev          : false,
     }, opts);
 
     const filter = utils.createFilter(options.include, options.exclude);
 
-    const { styleExport, done, map } = options;
+    const { styleExport, done, map, dev } = options;
 
     if(typeof map === "undefined") {
         // Sourcemaps don't make much sense in styleExport mode
@@ -83,6 +85,23 @@ module.exports = function(opts) {
             const exported = output.join(exports);
 
             const out = [
+                dev ? dedent(`
+                    const data = ${JSON.stringify(exported)};
+
+                    export default new Proxy(data, {
+                        get(tgt, key) {
+                            if(key in tgt) {
+                                return tgt[key];
+                            }
+
+                            throw new ReferenceError(
+                                key + " is not exported by " + ${JSON.stringify(
+                                    slash(path.relative(process.cwd(), id))
+                                )}
+                            );
+                        }
+                    })
+                `) :
                 `export default ${JSON.stringify(exported, null, 4)};`,
             ];
 

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

@@ -118,6 +118,25 @@ exports[`/rollup.js should not output sourcemaps when they are disabled 1`] = `
 "
 `;
 
+exports[`/rollup.js should output a proxy in dev mode 1`] = `
+"const data = {\\"str\\":\\"\\\\\\"string\\\\\\"\\",\\"fooga\\":\\"fooga\\"};
+
+var css = new Proxy(data, {
+    get(tgt, key) {
+        if(key in tgt) {
+            return tgt[key];
+        }
+
+        throw new ReferenceError(
+            key + \\" is not exported by \\" + \\"packages/rollup/test/specimens/simple.css\\"
+        );
+    }
+});
+
+console.log(css);
+"
+`;
+
 exports[`/rollup.js should provide named exports 1`] = `
 "var str = \\"\\\\\\"string\\\\\\"\\";
 var num = \\"10\\";

packages/rollup/test/rollup.test.js

@@ -437,6 +437,22 @@ describe("/rollup.js", () => {
         expect(read("./rollup/repeated-references/assets/repeated-references.css")).toMatchSnapshot();
     });
 
+    it("should output a proxy in dev mode", async () => {
+        const bundle = await rollup({
+            input   : require.resolve("./specimens/simple.js"),
+            plugins : [
+                plugin({
+                    namer,
+                    dev : true,
+                }),
+            ],
+        });
+
+        const result = await bundle.generate({ format });
+
+        expect(result.code).toMatchSnapshot();
+    });
+
     describe("errors", () => {
         function checkError(err) {
             expect(err.toString()).toMatch("error-plugin:");