@marimo-team/frontend 0.25.2-dev97 → 0.25.2-dev99

package/dist/index.html

@@ -66,7 +66,7 @@
     <marimo-server-token data-token="{{ server_token }}" hidden></marimo-server-token>
     <!-- /TODO -->
     <title>{{ title }}</title>
-    <script type="module" crossorigin src="./assets/index-B5XWyg6n.js"></script>
+    <script type="module" crossorigin src="./assets/index-B3pNgH5o.js"></script>
     <link rel="modulepreload" crossorigin href="./assets/rolldown-runtime-B0Z9INg1.js">
     <link rel="modulepreload" crossorigin href="./assets/react-CUdNIagt.js">
     <link rel="modulepreload" crossorigin href="./assets/compiler-runtime-BQ9S8nyo.js">
@@ -241,7 +241,7 @@
     <link rel="stylesheet" crossorigin href="./assets/cells-0PFKL3SH.css">
     <link rel="stylesheet" crossorigin href="./assets/markdown-renderer-DjIHoF9Z.css">
     <link rel="stylesheet" crossorigin href="./assets/JsonOutput-B0GmlMnR.css">
-    <link rel="stylesheet" crossorigin href="./assets/index-Xxay17E9.css">
+    <link rel="stylesheet" crossorigin href="./assets/index-CXX6l_22.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marimo-team/frontend",
-  "version": "0.25.2-dev97",
+  "version": "0.25.2-dev99",
   "main": "dist/main.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -182,7 +182,8 @@
     "build:islands": "cross-env VITE_MARIMO_ISLANDS=true vite --config islands/vite.config.mts build",
     "preview:islands": "cross-env VITE_MARIMO_VERSION='0.4.6' VITE_MARIMO_ISLANDS=true vite --config islands/vite.config.mts build",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "sync-katex-css": "node --experimental-strip-types scripts/sync-katex-css.ts"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",

package/src/css/katex-css.test.ts

@@ -0,0 +1,166 @@
+/* Copyright 2026 Marimo. All rights reserved. */
+
+import { readFile } from "node:fs/promises";
+import postcss from "postcss";
+import { beforeAll, describe, expect, it } from "vitest";
+import {
+  checkKatexCss,
+  generateKatexCss,
+  readUpstreamCss,
+  stylesheetPath,
+} from "../../scripts/katex-css";
+
+let upstream: string;
+let generated: string;
+
+beforeAll(async () => {
+  upstream = await readUpstreamCss();
+  generated = await generateKatexCss(upstream);
+});
+
+describe("copied KaTeX stylesheet", () => {
+  it("matches the installed package with only documented marimo overrides", async () => {
+    await expect(
+      checkKatexCss(upstream, await readFile(stylesheetPath, "utf8")),
+    ).resolves.toBeUndefined();
+  });
+
+  it.each(["added", "removed", "changed"])(
+    "detects %s upstream rule without a version change",
+    async (change) => {
+      const root = postcss.parse(upstream);
+      if (change === "added") {
+        root.append(
+          postcss.parse(
+            ".katex .reflectbox { display: inline-block; transform: scaleX(-1); }",
+          ),
+        );
+      } else {
+        root.walkRules(".katex .mspace", (rule) => {
+          if (change === "removed") {
+            rule.remove();
+          } else {
+            rule.append(postcss.decl({ prop: "color", value: "red" }));
+          }
+        });
+      }
+      await expect(checkKatexCss(root.toString(), generated)).rejects.toThrow(
+        "pnpm sync-katex-css",
+      );
+      const regenerated = await generateKatexCss(root.toString());
+      await checkKatexCss(root.toString(), regenerated);
+    },
+  );
+
+  it.each(["added", "removed", "changed"])(
+    "detects %s local rule",
+    async (change) => {
+      const root = postcss.parse(generated);
+      if (change === "added") {
+        root.append(postcss.parse(".katex .unexpected { display: none; }"));
+      } else {
+        root.walkRules(".katex .mspace", (rule) => {
+          if (change === "removed") {
+            rule.remove();
+          } else {
+            rule.append(postcss.decl({ prop: "color", value: "red" }));
+          }
+        });
+      }
+      await expect(checkKatexCss(upstream, root.toString())).rejects.toThrow(
+        "pnpm sync-katex-css",
+      );
+    },
+  );
+
+  it("preserves math sizing, tag alignment, and equation counters without bundling font faces", () => {
+    const root = postcss.parse(generated);
+    const declarations = (selector: string) => {
+      const values: Record<string, string> = {};
+      root.walkRules(selector, (rule) => {
+        rule.walkDecls((decl) => {
+          values[decl.prop] = decl.value;
+        });
+      });
+      return values;
+    };
+    expect(declarations(".katex")).toEqual({
+      "font-family": '"KaTeX_Main", "Times New Roman", serif',
+      "font-size": "110%",
+      "font-style": "normal",
+      "line-height": "inherit",
+      position: "relative",
+      "text-indent": "0",
+      "text-rendering": "auto",
+    });
+    expect(
+      declarations(".katex-display > .katex > .katex-html > .katex-tag"),
+    ).toEqual({ position: "absolute", right: "0", "text-align": "right" });
+    expect(declarations("body,\n.katex-display")).toEqual({
+      "counter-reset": "katexEqnNo mmlEqnNo",
+    });
+    expect(declarations(".katex .angl")["border-right"]).toBe("0.049em solid");
+    const fontFaces: postcss.AtRule[] = [];
+    root.walkAtRules("font-face", (rule) => {
+      fontFaces.push(rule);
+    });
+    expect(fontFaces).toEqual([]);
+  });
+
+  it.each(["root", "media"])(
+    "preserves SVG rule order and %s scope when upstream adds a competing rule",
+    async (scope) => {
+      const root = postcss.parse(upstream);
+      const svgRules: postcss.Rule[] = [];
+      root.walkRules(".katex svg", (rule) => {
+        svgRules.push(rule);
+      });
+      const secondSvg = svgRules[1];
+      secondSvg.before(postcss.parse(".katex :is(svg) { stroke-width: 3; }"));
+      if (scope === "media") {
+        const media = postcss.atRule({ name: "media", params: "print" });
+        secondSvg.before(media);
+        media.append(secondSvg);
+      }
+
+      const svgCascade = (css: string) => {
+        const rules: {
+          selector: string;
+          scope: string;
+          strokeWidth: string | undefined;
+        }[] = [];
+        postcss.parse(css).walkRules((rule) => {
+          if (
+            rule.selector !== ".katex svg" &&
+            rule.selector !== ".katex :is(svg)"
+          ) {
+            return;
+          }
+          let strokeWidth: string | undefined;
+          rule.walkDecls("stroke-width", (decl) => {
+            strokeWidth = decl.value;
+          });
+          const parent = rule.parent;
+          rules.push({
+            selector: rule.selector,
+            scope:
+              parent?.type === "atrule"
+                ? `${parent.name} ${parent.params}`
+                : "root",
+            strokeWidth,
+          });
+        });
+        return rules;
+      };
+      const regenerated = await generateKatexCss(root.toString());
+      expect(svgCascade(regenerated)).toEqual(svgCascade(root.toString()));
+      await checkKatexCss(root.toString(), regenerated);
+    },
+  );
+
+  it("requires review when an overridden upstream declaration changes", async () => {
+    await expect(
+      generateKatexCss(upstream.replace("line-height:1.2", "line-height:1.3")),
+    ).rejects.toThrow("review overrides");
+  });
+});

package/src/css/katex.min.css

@@ -1,23 +1,20 @@
 /*
- * Adapted from https://cdn.jsdelivr.net/npm/katex@0.18.5/dist/katex.min.css
+ * Generated from the installed katex/dist/katex.min.css.
+ * Run `pnpm sync-katex-css` from the repository root or frontend to regenerate.
+ * Do not edit this file directly; update scripts/katex-css.ts for local overrides.
  *
- * KaTeX's class names change between versions (0.18 prefixed most of its
- * internal classes with `katex-`), so this file must be regenerated whenever
- * the `katex` package is bumped. Steps:
- *
- * 1. Copy the upstream katex.min.css for the installed version.
- * 2. Delete every `@font-face` block. The fonts are declared in katex-fonts.css.
- * 3. Keep the upstream `em` values. KaTeX sizes scripts, rules, and spacing
- *    relative to the surrounding math, which can differ from the root size.
- * 4. Run oxfmt to expand the file, then stylelint with --fix. Merge the two
- *    `.katex svg` rules stylelint flags as duplicates.
- * 5. Re-apply the marimo edits below:
- *    - `.katex`: `font-size: 110%`, `line-height: inherit` and
- *      `font-style: normal` in place of the upstream `font` shorthand, so math
- *      follows the surrounding text size and stays upright in blockquotes.
- *    - `.katex-tag` inside `.katex-display`: `text-align: right`.
- *    - `counter-reset` on `.katex-display` as well as `body`, so equation
- *      numbers restart for each display block.
+ * Documented marimo overrides:
+ * - Remove @font-face: font declarations live in katex-fonts.css.
+ * - Preserve em units so scripts, rules, and spacing scale with surrounding math.
+ * - Replace .katex's font shorthand with its font-family, font-size: 110%,
+ *   font-style: normal, and line-height: inherit to follow surrounding text size
+ *   and keep math upright in blockquotes.
+ * - Right-align display equation tags.
+ * - Reset equation counters on each display block as well as body.
+ * - Preserve duplicate SVG rules in their upstream order and scope, with a
+ *   targeted stylelint exemption so their cascade remains intact.
+ * Formatting and syntax normalization use oxfmt and stylelint; adjacent exact
+ * duplicate declarations left by vendor-prefix normalization are removed.
  */
 
 /* stylelint-disable unit-allowed-list -- KaTeX sizes are relative to the math. */
@@ -1002,6 +999,17 @@
 .katex svg {
   fill: currentcolor;
   stroke: currentcolor;
+  display: block;
+  height: inherit;
+  position: absolute;
+  width: 100%;
+}
+
+.katex svg path {
+  stroke: none;
+}
+/* stylelint-disable no-duplicate-selectors -- Preserve the upstream SVG cascade. */
+.katex svg {
   fill-rule: nonzero;
   fill-opacity: 1;
   stroke-width: 1;
@@ -1011,16 +1019,8 @@
   stroke-dasharray: none;
   stroke-dashoffset: 0;
   stroke-opacity: 1;
-  display: block;
-  height: inherit;
-  position: absolute;
-  width: 100%;
 }
-
-.katex svg path {
-  stroke: none;
-}
-
+/* stylelint-enable no-duplicate-selectors */
 .katex img {
   border-style: none;
   max-height: none;