CSS coverage & warnings on unknown classes (#1040)

* chore: latest package-lock

* chore: update playwright

* feat: add coverage and warning support

* test: tests for coverage

* changeset

* test: updated rollup snapshot

* docs: fix changeset

* docs: updates

* docs: we know webpack 5 works

Author: tivac

.changeset/six-islands-tell.md

@@ -0,0 +1,24 @@
+---
+"@modular-css/css-to-js": minor
+"@modular-css/vite": minor
+"@modular-css/rollup": minor
+"@modular-css/webpack": minor
+---
+
+## CSS coverage & warnings on unused classes
+
+Added `dev.warn` and `dev.coverage` as supported options for `@modular-css/css-to-js` package, and by extension `@modular-css/rollup`, `@modular-css/vite`, and `@modular-css/webpack`.
+
+`dev.warn` will cause unknown classes requested from JS to log a warning to the console, instead of the current errors that are thrown.
+
+`dev.coverage` will cause a global named `mcssCoverage` to be created which will track accesses of all exported classes per file and allow you to identify unused styles.
+
+Example of a `mcssCoverage` object
+
+```js
+{
+    "packages/vite/tests/specimens/shared/static-c.mcss" : { c : 0 },
+    "packages/vite/tests/specimens/static/a.mcss" : { a : 1 },
+    "packages/vite/tests/specimens/static/b.mcss" : { b : 1 },
+}
+```

package-lock.json

@@ -32,7 +32,7 @@
     "@modular-css/shortnames": "^28.0.0",
     "@modular-css/svelte": "^29.0.4",
     "@modular-css/vite": "^30.1.0",
-    "@playwright/test": "^1.28.1",
+    "@playwright/test": "^1.50.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/pluginutils": "^5.1.0",
@@ -59,7 +59,6 @@
     "node-notifier": "^10.0.1",
     "p-defer": "^3.0.0",
     "peggy": "^2.0.0",
-    "playwright": "^1.49.1",
     "postcss": "^8.4.14",
     "postcss-nested": "^7.0.2",
     "read-dir-deep": "^7.0.1",

package.json

@@ -2,7 +2,7 @@
 
 Internal package, used to take a `modular-css` processed file and turn it into a variety of JS-appropriate information.
 
-Used by `@modular-css/rollup` and `@modular-css/vite` so far.
+Used by `@modular-css/rollup`, `@modular-css/vite`, and `@modular-css/wepback`.
 
 ## Usage
 

packages/css-to-js/README.md

@@ -46,6 +46,7 @@ const deconflict = (map, source) => {
 };
 
 const prop = ([ key, value ]) => (key === value ? key : `${JSON.stringify(key)} : ${value}`);
+
 const esm = (key, value) => {
     const safeKey = identifierfy(key);
     const safeValue = identifierfy(value);
@@ -285,28 +286,49 @@ exports.transform = (file, processor, opts = {}) => {
         }
     });
 
+    const classes = defaultExports.map(prop).join(",\n");
+
     if(options.dev) {
+        const source = relative(processor.options.cwd, id);
+        const issue = options.dev.warn ?
+            `console.warn(key, "is not exported by ${source}")` :
+            `throw new ReferenceError(key + " is not exported by ${source}");`;
+
+        if(options.dev.coverage) {
+            out.push(dedent(`
+                if(!globalThis.mcssCoverage) {
+                    globalThis.mcssCoverage = Object.create(null);
+                }
+                
+                globalThis.mcssCoverage["${source}"] = {
+                    __proto__ : null,
+                    "${defaultExports.map(prop).join("\" : 0,\n")}" : 0,
+                };
+            `));
+
+            out.push("");
+        }
+
         out.push(dedent(`
             const data = {
-                ${defaultExports.map(prop).join(",\n")}
+                ${classes}
             };
 
             export default new Proxy(data, {
                 get(tgt, key) {
                     if(key in tgt) {
+                        ${options.dev.coverage ? `globalThis.mcssCoverage["${source}"][key]++;\n` : ""}
                         return tgt[key];
                     }
 
-                    throw new ReferenceError(
-                        key + " is not exported by " + ${JSON.stringify(relative(processor.options.cwd, id))}
-                    );
+                    ${issue}
                 }
             })
         `));
     } else if(options.defaultExport) {
         out.push(dedent(`
             export default {
-                ${defaultExports.map(prop).join(",\n")}
+                ${classes}
             };
         `));
     }

packages/css-to-js/css-to-js.js

@@ -1,5 +1,37 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`@modular-css/css-to-js API should create coverage infrastructure when options.dev.coverage is truthy: code 1`] = `
+const a = "mc74f3fa7b_a";
+if(!globalThis.mcssCoverage) {
+    globalThis.mcssCoverage = Object.create(null);
+}
+
+globalThis.mcssCoverage["a.css"] = {
+    __proto__ : null,
+    "a" : 0,
+};
+
+const data = {
+    a
+};
+
+export default new Proxy(data, {
+    get(tgt, key) {
+        if(key in tgt) {
+            globalThis.mcssCoverage["a.css"][key]++;
+
+            return tgt[key];
+        }
+
+        throw new ReferenceError(key + " is not exported by a.css");
+    }
+})
+
+export {
+    a
+};
+`;
+
 exports[`@modular-css/css-to-js API should dedupe repeated identifiers: code 1`] = `
 import { a } from "<ROOT-DIR>/a.css";
 const a1 = a + " " + "mc71966a67_a";
@@ -21,12 +53,11 @@ const data = {
 export default new Proxy(data, {
     get(tgt, key) {
         if(key in tgt) {
+            
             return tgt[key];
         }
 
-        throw new ReferenceError(
-            key + " is not exported by " + "a.css"
-        );
+        throw new ReferenceError(key + " is not exported by a.css");
     }
 })
 
@@ -213,6 +244,26 @@ export {
 export const styles = ".mc74f3fa7b_a { color: red; }";
 `;
 
+exports[`@modular-css/css-to-js API should output warnings when options.dev.warn is truthy 1`] = `
+Snapshot Diff:
+- First value
++ Second value
+
+@@ --- --- @@
+          if(key in tgt) {
+              
+              return tgt[key];
+          }
+
+-         throw new ReferenceError(key + " is not exported by a.css");
++         console.warn(key, "is not exported by a.css")
+      }
+  })
+
+  export {
+      a
+`;
+
 exports[`@modular-css/css-to-js API should output without default export: code 1`] = `
 const a = "mc74f3fa7b_a";
 

packages/css-to-js/test/__snapshots__/api.test.js.snap

@@ -236,6 +236,27 @@ describe("@modular-css/css-to-js API", () => {
         expect(code).toMatchSnapshot("code");
     });
 
+    it("should output warnings when options.dev.warn is truthy", async () => {
+        const processor = new Processor({ resolvers });
+
+        await processor.string("./a.css", `.a { color: red; }`);
+
+        const { code : noWarn } = transform("./a.css", processor, { dev : { warn : false } });
+        const { code : warn } = transform("./a.css", processor, { dev : { warn : true } });
+
+        expect(noWarn).toMatchDiffSnapshot(warn);
+    });
+    
+    it("should create coverage infrastructure when options.dev.coverage is truthy", async () => {
+        const processor = new Processor({ resolvers });
+
+        await processor.string("./a.css", `.a { color: red; }`);
+
+        const { code } = transform("./a.css", processor, { dev : { coverage : true } });
+
+        expect(code).toMatchSnapshot("code");
+    });
+
     it.each([
         true,
         false,

packages/css-to-js/test/api.test.js

@@ -114,12 +114,11 @@ 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"
-        );
+        throw new ReferenceError(key + " is not exported by packages/rollup/test/specimens/simple.css");
     }
 });