Optimize class attributes built from CSS module classes

A `class` value assembled from CSS module classes (a stylesheet import or a
`<style/name>` object) previously bailed to the runtime `classValue` walker,
since `styles.foo` is a member expression the constant folder can't resolve.

Recognize these as known class strings so the optimizer can treat them like
static tokens: HTML concatenates them directly, DOM applies constant classes
once at mount and toggles the conditional ones in place, and `_attr_class_item`
handles a class that resolves to multiple tokens (eg from `composes:`). In
development a class that resolves to a non-string logs a warning; the wrapper is
compiled away in optimized builds.

Author: DylanPiercey

.changeset/css-module-class-optimization.md

@@ -0,0 +1,5 @@
+---
+"@marko/runtime-tags": patch
+---
+
+Optimize `class` attributes built from CSS module classes. A member access on a CSS module - a default/namespace import from a stylesheet, or a `<style/name>` tag's object - is now treated as a known class string, so `class=[styles.card, { [styles.active]: on }]` no longer falls back to the runtime `class` walker. Constant classes are folded into the concatenated string on the server and applied once at mount on the client, while toggles update in place. `_attr_class_item` now also handles a class that resolves to multiple space-separated tokens (eg from `composes:`). In development, a CSS module class that resolves to a non-string (a typo or a class missing from the stylesheet) logs a warning; this assertion is compiled away in optimized builds.

.sizes.json

@@ -7,8 +7,8 @@
     {
       "name": "*",
       "total": {
-        "min": 25867,
-        "brotli": 9506
+        "min": 25968,
+        "brotli": 9546
       }
     },
     {

.sizes/dom.js

@@ -1,4 +1,4 @@
-// size: 25867 (min) 9506 (brotli)
+// size: 25968 (min) 9546 (brotli)
 //#region packages/runtime-tags/dist/dom.mjs
 let empty = [],
   rest = Symbol(),
@@ -327,6 +327,9 @@ function _call(fn, v) {
 function stringifyClassObject(name, value) {
   return value ? name : "";
 }
+function _class_module_value(value, name) {
+  return value;
+}
 function stringifyStyleObject(name, value) {
   return value || value === 0 ? name + ":" + value : "";
 }
@@ -1449,7 +1452,10 @@ function _attr_class_items(element, items) {
   for (let key in items) _attr_class_item(element, key, items[key]);
 }
 function _attr_class_item(element, name, value) {
-  element.classList.toggle(name, !!value);
+  let { classList } = element;
+  if (~name.indexOf(" "))
+    for (let token of name.split(" ")) classList.toggle(token, !!value);
+  else classList.toggle(name, !!value);
 }
 function _attr_style(element, value) {
   setAttribute(

packages/runtime-tags/src/__tests__/fixtures/attr-class-css-module-style/__snapshots__/dom.bundle.debug.js

@@ -0,0 +1,16 @@
+// template.marko
+const $template = "<div></div><div></div>";
+const $walks = " b b";
+function $setup($scope) {
+	_attr_class_item($scope["#div/0"], _class_module_value(void 0, "card"), 1);
+	_attr_class_item($scope["#div/1"], _class_module_value(void 0, "card"), 1);
+}
+const $active = /* @__PURE__ */ _const("active", ($scope) => {
+	_attr_class_item($scope["#div/0"], _class_module_value(void 0, "on"), $scope.active);
+	_attr_class_item($scope["#div/1"], _class_module_value(void 0, "on"), $scope.active);
+});
+const $input = ($scope, input) => $active($scope, input.active);
+var template_default = /* @__PURE__ */ _template("__tests__/template.marko", $template, $walks, $setup, $input);
+
+// v:template.marko.module.css
+var v_template_marko_module_default = "\n  .card { color: green }\n  .on { color: blue }\n";

packages/runtime-tags/src/__tests__/fixtures/attr-class-css-module-style/__snapshots__/html.bundle.debug.js

@@ -0,0 +1,11 @@
+// v:template.marko.module.css
+var v_template_marko_module_default = "\n  .card { color: green }\n  .on { color: blue }\n";
+
+// template.marko
+var template_default = _template("__tests__/template.marko", (input) => {
+	const $scope0_reason = _scope_reason(), $sg__input_active = _serialize_guard($scope0_reason, 0);
+	const $scope0_id = _scope_id();
+	const { active } = input;
+	_html(`<div${_attr_class(`${_class_module_value(void 0, "card")}${active ? " " + _class_module_value(void 0, "on") : ""}`)}></div>${_el_resume($scope0_id, "#div/0", $sg__input_active)}<div${_attr_class(`${_class_module_value(void 0, "card")}${active ? " " + _class_module_value(void 0, "on") : ""}`)}></div>${_el_resume($scope0_id, "#div/1", $sg__input_active)}`);
+	_serialize_if($scope0_reason, 0) && writeScope($scope0_id, {}, "__tests__/template.marko", 0);
+}, 1);

packages/runtime-tags/src/__tests__/fixtures/attr-class-css-module-style/__snapshots__/html.bundle.js

@@ -0,0 +1,8 @@
+// template.marko
+var template_default = _template("a", (input) => {
+	const $scope0_reason = _scope_reason(), $sg__input_active = _serialize_guard($scope0_reason, 0);
+	const $scope0_id = _scope_id();
+	const { active } = input;
+	_html(`<div${_attr_class(`${void 0}${active ? " " + void 0 : ""}`)}></div>${_el_resume($scope0_id, "a", $sg__input_active)}<div${_attr_class(`${void 0}${active ? " " + void 0 : ""}`)}></div>${_el_resume($scope0_id, "b", $sg__input_active)}`);
+	_serialize_if($scope0_reason, 0) && writeScope($scope0_id, {});
+}, 1);

packages/runtime-tags/src/__tests__/fixtures/attr-class-css-module-style/sizes.json

@@ -0,0 +1,3 @@
+{
+  "dom": {}
+}

packages/runtime-tags/src/__tests__/fixtures/attr-class-css-module-style/template.marko

@@ -0,0 +1,10 @@
+<style/styles>
+  .card { color: green }
+  .on { color: blue }
+</style>
+
+<const/{ active }=input/>
+
+// A `<style/var>` object resolves classes the same way a module import does.
+<div class=[styles.card, { [styles.on]: active }]/>
+<div class=[styles.card, active && styles.on]/>

packages/runtime-tags/src/__tests__/fixtures/attr-class-css-module-style/test.ts

@@ -0,0 +1,8 @@
+import type { TestConfig } from "../../main.test";
+
+// CSS module class values are supplied by the bundler, not this harness (which
+// loads `.css` as text), so this fixture asserts on the compiled output only.
+export const config: TestConfig = {
+  skip_csr: true,
+  skip_ssr: true,
+};

packages/runtime-tags/src/__tests__/fixtures/attr-class-css-module/__snapshots__/dom.bundle.debug.js

@@ -0,0 +1,29 @@
+// template.marko
+const $template = "<div></div><div></div><div></div><div></div><div class=base></div>";
+const $walks = " b b b b b";
+function $setup($scope) {
+	_attr_class_item($scope["#div/0"], _class_module_value(styles_module_default.card, "card"), 1);
+	_attr_class_item($scope["#div/3"], _class_module_value(styles_module_default.card, "card"), 1);
+	_attr_class_item($scope["#div/4"], _class_module_value(styles_module_default.card, "card"), 1);
+}
+const $active = /* @__PURE__ */ _const("active", ($scope) => {
+	_attr_class_item($scope["#div/0"], _class_module_value(styles_module_default.on, "on"), $scope.active);
+	_attr_class_item($scope["#div/1"], _class_module_value(styles_module_default.on, "on"), $scope.active);
+	_attr_class_item($scope["#div/3"], _class_module_value(styles_module_default.on, "on"), $scope.active);
+	_attr_class_item($scope["#div/4"], _class_module_value(styles_module_default.on, "on"), $scope.active);
+});
+const $input_x__OR__input_y = /* @__PURE__ */ _or(10, ($scope) => _attr_class_items($scope["#div/2"], {
+	[_class_module_value(styles_module_default.a, "a")]: $scope.x,
+	[_class_module_value(styles_module_default.b, "b")]: $scope.y
+}));
+const $x = /* @__PURE__ */ _const("x", $input_x__OR__input_y);
+const $y = /* @__PURE__ */ _const("y", $input_x__OR__input_y);
+const $input = ($scope, input) => {
+	$active($scope, input.active);
+	$x($scope, input.x);
+	$y($scope, input.y);
+};
+var template_default = /* @__PURE__ */ _template("__tests__/template.marko", $template, $walks, $setup, $input);
+
+// styles.module.css
+var styles_module_default = ".card {\n  color: green;\n}\n.on {\n  color: blue;\n}\n.a {\n  color: red;\n}\n.b {\n  color: teal;\n}\n";