katex 0.17.0 → 0.18.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "katex",
-  "version": "0.17.0",
+  "version": "0.18.1",
   "description": "Fast math typesetting for the web.",
   "main": "dist/katex.js",
   "types": "types/katex.d.ts",
@@ -55,7 +55,7 @@
     "types/"
   ],
   "license": "MIT",
-  "packageManager": "yarn@4.1.1",
+  "packageManager": "pnpm@11.4.0",
   "devDependencies": {
     "@babel/core": "^7.29.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -92,7 +92,7 @@
     "fs-extra": "^10.1.0",
     "globals": "^17.6.0",
     "got": "^11.8.5",
-    "husky": "^4.3.8",
+    "husky": "^9.1.7",
     "istanbul-lib-coverage": "^3.2.0",
     "istanbul-lib-report": "^3.0.0",
     "istanbul-reports": "^3.1.5",
@@ -109,6 +109,8 @@
     "mkdirp": "^1.0.4",
     "p-retry": "^4.6.2",
     "pako": "^2.0.4",
+    "pixelmatch": "^7.2.0",
+    "pngjs": "^7.0.0",
     "postcss": "^8.4.16",
     "postcss-loader": "^7.0.1",
     "postcss-preset-env": "^7.8.0",
@@ -135,40 +137,36 @@
   },
   "bin": "cli.js",
   "scripts": {
-    "test": "yarn test:lint && yarn test:ts && yarn test:jest",
-    "test:lint": "yarn test:lint:js && yarn test:lint:css",
+    "test": "pnpm test:lint && pnpm test:ts && pnpm test:jest",
+    "test:lint": "pnpm test:lint:js && pnpm test:lint:css",
     "test:lint:js": "eslint .",
     "test:lint:css": "stylelint src/styles/katex.scss static/main.css website/static/**/*.css",
     "test:jest": "jest",
     "test:jest:watch": "jest --watch",
     "test:jest:update": "jest --updateSnapshot",
     "test:jest:coverage": "jest --coverage",
-    "test:screenshots": "yarn test:screenshots:update --verify",
+    "test:screenshots": "pnpm test:screenshots:update --verify",
     "test:screenshots:update": "dockers/screenshotter/screenshotter.sh",
     "test:perf": "NODE_ENV=test node -e \"require('@babel/register')({extensions:['.js','.ts']}); require('./test/perf-test.ts')\"",
     "test:ts": "tsc --noEmit",
     "test:build": "node test/verify-build.js",
     "clean": "rm -rf dist/ node_modules/",
-    "clean-install": "yarn clean && yarn",
+    "clean-install": "pnpm clean && pnpm install",
     "start": "webpack serve --config webpack.dev.js",
     "analyze": "webpack --config webpack.analyze.js",
     "build": "rimraf dist/ && mkdirp dist && cp README.md dist && rollup -c --failAfterWarnings && webpack && node update-sri.js package dist/README.md",
     "build:fonts": "dockers/fonts/buildFonts.sh",
     "build:metrics": "dockers/fonts/buildMetrics.sh",
-    "watch": "yarn build --watch",
-    "postversion": "yarn dist && node update-sri.js package README.md contrib/*/README.md docs/*.md website/pages/index.html",
+    "watch": "pnpm build --watch",
+    "postversion": "pnpm dist && node update-sri.js package README.md contrib/*/README.md docs/*.md website/pages/index.html",
     "semantic-release": "semantic-release",
-    "dist": "yarn build && yarn dist:zip",
-    "dist:zip": "rimraf katex/ katex.tar.gz katex.zip && cp -R dist katex && tar czf katex.tar.gz katex && zip -rq katex.zip katex && rimraf katex/"
+    "dist": "pnpm build && pnpm dist:zip",
+    "dist:zip": "rimraf katex/ katex.tar.gz katex.zip && cp -R dist katex && tar czf katex.tar.gz katex && zip -rq katex.zip katex && rimraf katex/",
+    "prepare": "husky"
   },
   "dependencies": {
     "commander": "^8.3.0"
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "yarn test:lint"
-    }
-  },
   "jest": {
     "collectCoverageFrom": [
       "src/**/*.{js,ts}",

package/src/MacroExpander.ts

@@ -449,10 +449,10 @@ export default class MacroExpander implements MacroContextInterface {
      */
     isDefined(name: string): boolean {
         return this.macros.has(name) ||
-            functions.hasOwnProperty(name) ||
-            symbols.math.hasOwnProperty(name) ||
-            symbols.text.hasOwnProperty(name) ||
-            implicitCommands.hasOwnProperty(name);
+            Object.prototype.hasOwnProperty.call(functions, name) ||
+            Object.prototype.hasOwnProperty.call(symbols.math, name) ||
+            Object.prototype.hasOwnProperty.call(symbols.text, name) ||
+            Object.prototype.hasOwnProperty.call(implicitCommands, name);
     }
 
     /**
@@ -460,8 +460,11 @@ export default class MacroExpander implements MacroContextInterface {
      */
     isExpandable(name: string): boolean {
         const macro = this.macros.get(name);
-        return macro != null ? typeof macro === "string"
-                || typeof macro === "function" || !macro.unexpandable
-            : functions.hasOwnProperty(name) && !functions[name].primitive;
+        if (macro != null) {
+            return typeof macro === "string"
+                || typeof macro === "function"
+                || !macro.unexpandable;
+        }
+        return Object.prototype.hasOwnProperty.call(functions, name) && !functions[name].primitive;
     }
 }

package/src/Namespace.ts

@@ -1,4 +1,3 @@
-
 /**
  * A `Namespace` refers to a space of nameable things like macros or lengths,
  * which can be `set` either globally or local to a nested group, using an
@@ -8,12 +7,11 @@
  */
 
 import ParseError from "./ParseError";
-export type Mapping<Value> = Record<string, Value>;
 
 export default class Namespace<Value> {
-    current: Mapping<Value>;
-    builtins: Mapping<Value>;
-    undefStack: Mapping<Value | null | undefined>[];
+    current: Record<string, Value>;
+    builtins: Record<string, Value>;
+    undefStack: Record<string, Value | undefined>[];
 
     /**
      * Both arguments are optional.  The first argument is an object of
@@ -21,8 +19,8 @@ export default class Namespace<Value> {
      * of initial (global-level) mappings, which will constantly change
      * according to any global/top-level `set`s done.
      */
-    constructor(builtins: Mapping<Value> = {},
-                globalMacros: Mapping<Value> = {}) {
+    constructor(builtins: Record<string, Value> = {},
+                globalMacros: Record<string, Value> = {}) {
         this.current = globalMacros;
         this.builtins = builtins;
         this.undefStack = [];
@@ -43,14 +41,12 @@ export default class Namespace<Value> {
             throw new ParseError("Unbalanced namespace destruction: attempt " +
                 "to pop global namespace; please report this as a bug");
         }
-        const undefs = this.undefStack.pop();
-        for (const undef in undefs) {
-            if (undefs.hasOwnProperty(undef)) {
-                if (undefs[undef] == null) {
-                    delete this.current[undef];
-                } else {
-                    this.current[undef] = undefs[undef];
-                }
+        const undefs = this.undefStack.pop()!;
+        for (const key of Object.keys(undefs)) {
+            if (undefs[key] === undefined) {
+                delete this.current[key];
+            } else {
+                this.current[key] = undefs[key];
             }
         }
     }
@@ -70,8 +66,8 @@ export default class Namespace<Value> {
      * `get(name) != null`.
      */
     has(name: string): boolean {
-        return this.current.hasOwnProperty(name) ||
-               this.builtins.hasOwnProperty(name);
+        return Object.prototype.hasOwnProperty.call(this.current, name) ||
+            Object.prototype.hasOwnProperty.call(this.builtins, name);
     }
 
     /**
@@ -83,7 +79,7 @@ export default class Namespace<Value> {
      * `if (namespace.has(...))`.
      */
     get(name: string): Value | undefined {
-        if (this.current.hasOwnProperty(name)) {
+        if (Object.prototype.hasOwnProperty.call(this.current, name)) {
             return this.current[name];
         } else {
             return this.builtins[name];
@@ -97,7 +93,7 @@ export default class Namespace<Value> {
      * operation at every level, so takes time linear in their number.
      * A value of undefined means to delete existing definitions.
      */
-    set(name: string, value: Value | null | undefined, global: boolean = false) {
+    set(name: string, value: Value | undefined, global: boolean = false) {
         if (global) {
             // Global set is equivalent to setting in all groups.  Simulate this
             // by destroying any undos currently scheduled for this name,
@@ -114,7 +110,7 @@ export default class Namespace<Value> {
             // unless an undo is already in place, in which case that older
             // value is the correct one.
             const top = this.undefStack[this.undefStack.length - 1];
-            if (top && !top.hasOwnProperty(name)) {
+            if (top && !Object.prototype.hasOwnProperty.call(top, name)) {
                 top[name] = this.current[name];
             }
         }

package/src/Options.ts

@@ -265,7 +265,7 @@ class Options {
     sizingClasses(oldOptions: Options): Array<string> {
         if (oldOptions.size !== this.size) {
             return [
-                "sizing",
+                "katex-sizing",
                 "reset-size" + oldOptions.size,
                 "size" + this.size,
             ];
@@ -281,7 +281,7 @@ class Options {
     baseSizingClasses(): Array<string> {
         if (this.size !== Options.BASESIZE) {
             return [
-                "sizing",
+                "katex-sizing",
                 "reset-size" + this.size,
                 "size" + Options.BASESIZE,
             ];

package/src/Parser.ts

@@ -843,7 +843,7 @@ export default class Parser {
             result = this.parseFunction(breakOnTokenText, name) ||
                 this.parseSymbol();
             if (result == null && text[0] === "\\" &&
-                    !implicitCommands.hasOwnProperty(text)) {
+                    !Object.prototype.hasOwnProperty.call(implicitCommands, text)) {
                 if (this.settings.throwOnError) {
                     throw new ParseError(
                         "Undefined control sequence: " + text, firstToken);
@@ -939,7 +939,7 @@ export default class Parser {
         }
         // At this point, we should have a symbol, possibly with accents.
         // First expand any accented base symbol according to unicodeSymbols.
-        if (unicodeSymbols.hasOwnProperty(text[0]) &&
+        if (Object.prototype.hasOwnProperty.call(unicodeSymbols, text[0]) &&
             !symbols[this.mode][text[0]]) {
             // This behavior is not strict (XeTeX-compatible) in math mode.
             if (this.settings.strict && this.mode === "math") {

package/src/atoms.ts

@@ -4,30 +4,30 @@
  * pull in `isAtom` without dragging in the ~870-line symbol tables.
  */
 
-// Some of these have a "-token" suffix since these are also used as `ParseNode`
-// types for raw text tokens, and we want to avoid conflicts with higher-level
-// `ParseNode` types. These `ParseNode`s are constructed within `Parser` by
-// looking up the `symbols` map.
-export const ATOMS = {
-    "bin": 1,
-    "close": 1,
-    "inner": 1,
-    "open": 1,
-    "punct": 1,
-    "rel": 1,
-};
-export const NON_ATOMS = {
-    "accent-token": 1,
-    "mathord": 1,
-    "op-token": 1,
-    "spacing": 1,
-    "textord": 1,
-};
+const atomList = [
+    "bin",
+    "close",
+    "inner",
+    "open",
+    "punct",
+    "rel",
+] as const;
 
-export type Atom = keyof typeof ATOMS;
-export type NonAtom = keyof typeof NON_ATOMS;
+const nonAtomList = [
+    "accent-token",
+    "mathord",
+    "op-token",
+    "spacing",
+    "textord",
+] as const;
+
+const Atoms: ReadonlySet<string> = new Set(atomList);
+export const NonAtoms: ReadonlySet<string> = new Set(nonAtomList);
+
+export type Atom = typeof atomList[number];
+type NonAtom = typeof nonAtomList[number];
 export type Group = Atom | NonAtom;
 
 export function isAtom(value: string): value is Atom {
-    return value in ATOMS;
+    return Atoms.has(value);
 }

package/src/buildCommon.ts

@@ -212,7 +212,7 @@ export const makeOrd = function(
         if (lookupSymbol(text, fontName, mode).metrics) {
             return makeSymbol(text, fontName, mode, options,
                 classes.concat(fontClasses));
-        } else if (ligatures.hasOwnProperty(text) &&
+        } else if (Object.prototype.hasOwnProperty.call(ligatures, text) &&
                    fontName.slice(0, 10) === "Typewriter") {
             // Deconstruct ligatures in monospace fonts (\texttt, \tt).
             const parts = [];
@@ -775,7 +775,7 @@ export const staticSvg = function(value: string, options: Options): SvgSpan {
         "viewBox": "0 0 " + 1000 * width + " " + 1000 * height,
         "preserveAspectRatio": "xMinYMin",
     });
-    const span = makeSvgSpan(["overlay"], [svgNode], options);
+    const span = makeSvgSpan(["katex-overlay"], [svgNode], options);
     span.height = height;
     span.style.height = makeEm(height);
     span.style.width = makeEm(width);

package/src/buildHTML.ts

@@ -182,7 +182,7 @@ const traverseNonSpaceNodes = function(
 
         if (nonspace) {
             prev.node = node;
-        } else if (isRoot && node.hasClass("newline")) {
+        } else if (isRoot && node.hasClass("katex-newline")) {
             prev.node = makeSpan(["leftmost"]); // treat like beginning of line
         }
         prev.insertAfter = (index => n => {
@@ -292,18 +292,18 @@ export const buildGroup = function(
 
 /**
  * Combine an array of HTML DOM nodes (e.g., the output of `buildExpression`)
- * into an unbreakable HTML node of class .base, with proper struts to
+ * into an unbreakable HTML node of class .katex-base, with proper struts to
  * guarantee correct vertical extent.  `buildHTML` calls this repeatedly to
  * make up the entire expression as a sequence of unbreakable units.
  */
 function buildHTMLUnbreakable(children: HtmlDomNode[], options: Options) {
     // Compute height and depth of this chunk.
-    const body = makeSpan(["base"], children, options);
+    const body = makeSpan(["katex-base"], children, options);
 
     // Add strut, which ensures that the top of the HTML element falls at
     // the height of the expression, and the bottom of the HTML element
     // falls at the depth of the expression.
-    const strut = makeSpan(["strut"]);
+    const strut = makeSpan(["katex-strut"]);
     strut.style.height = makeEm(body.height + body.depth);
     if (body.depth) {
         strut.style.verticalAlign = makeEm(-body.depth);
@@ -329,7 +329,7 @@ export default function buildHTML(tree: AnyParseNode[], options: Options): DomSp
     const expression = buildExpression(tree, options, "root");
 
     let eqnNum;
-    if (expression.length === 2 && expression[1].hasClass("tag")) {
+    if (expression.length === 2 && expression[1].hasClass("katex-tag")) {
         // An environment with automatic equation numbers, e.g. {gather}.
         eqnNum = expression.pop();
     }
@@ -354,7 +354,7 @@ export default function buildHTML(tree: AnyParseNode[], options: Options): DomSp
             let nobreak = false;
             while (i < expression.length - 1 &&
                    expression[i + 1].hasClass("mspace") &&
-                   !expression[i + 1].hasClass("newline")) {
+                   !expression[i + 1].hasClass("katex-newline")) {
                 i++;
                 parts.push(expression[i]);
                 if (expression[i].hasClass("nobreak")) {
@@ -366,7 +366,7 @@ export default function buildHTML(tree: AnyParseNode[], options: Options): DomSp
                 children.push(buildHTMLUnbreakable(parts, options));
                 parts = [];
             }
-        } else if (expression[i].hasClass("newline")) {
+        } else if (expression[i].hasClass("katex-newline")) {
             // Write the line except the newline
             parts.pop();
             if (parts.length > 0) {
@@ -388,7 +388,7 @@ export default function buildHTML(tree: AnyParseNode[], options: Options): DomSp
             buildExpression(tag, options, true),
             options,
         );
-        tagChild.classes = ["tag"];
+        tagChild.classes = ["katex-tag"];
         children.push(tagChild);
     } else if (eqnNum) {
         children.push(eqnNum);

package/src/buildMathML.ts

@@ -32,9 +32,9 @@ export const makeText = function(
 ): TextNode {
     if (symbols[mode][text] && symbols[mode][text].replace &&
         text.charCodeAt(0) !== 0xD835 &&
-        !(ligatures.hasOwnProperty(text) && options &&
-          ((options.fontFamily && options.fontFamily.slice(4, 6) === "tt") ||
-           (options.font && options.font.slice(4, 6) === "tt")))) {
+        !(Object.prototype.hasOwnProperty.call(ligatures, text) &&
+          (options?.fontFamily?.slice(4, 6) === "tt" ||
+           options?.font?.slice(4, 6) === "tt"))) {
         text = symbols[mode][text].replace!;
     }
 

package/src/environments/array.ts

@@ -520,8 +520,8 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
 
     // Add \hline(s), if any.
     if (hlines.length > 0) {
-        const line = makeLineSpan("hline", options, ruleThickness);
-        const dashes = makeLineSpan("hdashline", options, ruleThickness);
+        const line = makeLineSpan("katex-hline", options, ruleThickness);
+        const dashes = makeLineSpan("katex-hdashline", options, ruleThickness);
         const vListElems = [{type: "elem" as const, elem: tableBody, shift: 0}];
         while (hlines.length > 0) {
             const hline = hlines.pop()!;
@@ -546,7 +546,7 @@ const htmlBuilder: HtmlBuilder<"array"> = function(group, options) {
             positionType: "individualShift",
             children: tagSpans,
         }, options);
-        const tagCol = makeSpan(["tag"], [eqnNumCol], options);
+        const tagCol = makeSpan(["katex-tag"], [eqnNumCol], options);
         return makeFragment([tableBody, tagCol]);
     }
 };

package/src/fontMetrics.ts

@@ -257,10 +257,8 @@ export function getGlobalMetrics(size: number): FontMetrics {
         const metrics: FontMetrics = fontMetricsBySizeIndex[sizeIndex] = {
             cssEmPerMu: sigmasAndXis.quad[sizeIndex] / 18,
         };
-        for (const key in sigmasAndXis) {
-            if (sigmasAndXis.hasOwnProperty(key)) {
-                metrics[key] = sigmasAndXis[key][sizeIndex];
-            }
+        for (const key of Object.keys(sigmasAndXis)) {
+            metrics[key] = sigmasAndXis[key][sizeIndex];
         }
     }
     return fontMetricsBySizeIndex[sizeIndex]!;

package/src/functions/accent.ts

@@ -125,7 +125,7 @@ export const htmlBuilder: HtmlBuilderSupSub<"accent"> = (grp, options) => {
         // Shift the accent over by the skew.
         let left = skew;
 
-        // CSS defines `.katex .accent .accent-body:not(.accent-full) { width: 0 }`
+        // CSS defines `.katex .katex-accent .accent-body:not(.accent-full) { width: 0 }`
         // so that the accent doesn't contribute to the bounding box.
         // We need to shift the character by its width (effectively half
         // its width) to compensate.
@@ -173,7 +173,7 @@ export const htmlBuilder: HtmlBuilderSupSub<"accent"> = (grp, options) => {
     }
 
     const accentWrap =
-        makeSpan(["mord", "accent"], [accentBody], options);
+        makeSpan(["mord", "katex-accent"], [accentBody], options);
 
     if (supSubGroup) {
         // Here, we replace the "base" child of the supsub with our newly

package/src/functions/cr.ts

@@ -35,7 +35,7 @@ defineFunction({
     htmlBuilder(group, options) {
         const span = makeSpan(["mspace"], [], options);
         if (group.newLine) {
-            span.classes.push("newline");
+            span.classes.push("katex-newline");
             if (group.size) {
                 span.style.marginTop =
                     makeEm(calculateSize(group.size, options));

package/src/functions/enclose.ts

@@ -32,7 +32,7 @@ const htmlBuilder: HtmlBuilder<"enclose"> = (group, options) => {
     const isSingleChar = isCharacterBox(group.body);
 
     if (label === "sout") {
-        img = makeSpan(["stretchy", "sout"]);
+        img = makeSpan(["katex-stretchy", "katex-sout"]);
         img.height = options.fontMetrics().defaultRuleThickness / scale;
         imgShift = -0.5 * options.fontMetrics().xHeight;
 

package/src/functions/environment.ts

@@ -25,7 +25,7 @@ defineFunction({
 
         if (funcName === "\\begin") {
             // begin...end is similar to left...right
-            if (!environments.hasOwnProperty(envName)) {
+            if (!Object.prototype.hasOwnProperty.call(environments, envName)) {
                 throw new ParseError(
                     "No such environment: " + envName, nameGroup);
             }

package/src/functions/html.ts

@@ -49,7 +49,24 @@ defineFunction({
                 };
                 break;
             case "\\htmlData": {
-                const data = value.split(",");
+                // `{,}` escapes a literal comma. Braces are used rather than a
+                // backslash because `\,` is a macro (a thin space) that expands
+                // away before this raw argument is ever read.
+                const ESCAPED_COMMA = "{,}";
+                const data: string[] = [];
+                let current = "";
+                for (let i = 0; i < value.length; i++) {
+                    if (value.startsWith(ESCAPED_COMMA, i)) {
+                        current += ",";
+                        i += ESCAPED_COMMA.length - 1;
+                    } else if (value[i] === ",") {
+                        data.push(current);
+                        current = "";
+                    } else {
+                        current += value[i];
+                    }
+                }
+                data.push(current);
                 for (let i = 0; i < data.length; i++) {
                     const item = data[i];
                     const firstEquals = item.indexOf("=");
@@ -92,9 +109,9 @@ defineFunction({
         }
 
         const span = makeSpan(classes, elements, options);
-        for (const attr in group.attributes) {
-            if (attr !== "class" && group.attributes.hasOwnProperty(attr)) {
-                span.setAttribute(attr, group.attributes[attr]);
+        for (const [attr, value] of Object.entries(group.attributes)) {
+            if (attr !== "class") {
+                span.setAttribute(attr, value);
             }
         }
         return span;

package/src/functions/lap.ts

@@ -30,13 +30,13 @@ defineFunction({
             // ref: https://www.math.lsu.edu/~aperlis/publications/mathclap/
             inner = makeSpan(
                 [], [html.buildGroup(group.body, options)]);
-            // wrap, since CSS will center a .clap > .inner > span
-            inner = makeSpan(["inner"], [inner], options);
+            // wrap, since CSS will center a .clap > .katex-inner > span
+            inner = makeSpan(["katex-inner"], [inner], options);
         } else {
             inner = makeSpan(
-                ["inner"], [html.buildGroup(group.body, options)]);
+                ["katex-inner"], [html.buildGroup(group.body, options)]);
         }
-        const fix = makeSpan(["fix"], []);
+        const fix = makeSpan(["katex-fix"], []);
         let node = makeSpan(
             [group.alignment], [inner, fix], options);
 
@@ -45,7 +45,7 @@ defineFunction({
         // Next, use a strut to set the height of the HTML bounding box.
         // Otherwise, a tall argument may be misplaced.
         // This code resolved issue #1153
-        const strut = makeSpan(["strut"]);
+        const strut = makeSpan(["katex-strut"]);
         strut.style.height = makeEm(node.height + node.depth);
         if (node.depth) {
             strut.style.verticalAlign = makeEm(-node.depth);
@@ -54,8 +54,8 @@ defineFunction({
 
         // Next, prevent vertical misplacement when next to something tall.
         // This code resolves issue #1234
-        node = makeSpan(["thinbox"], [node], options);
-        return makeSpan(["mord", "vbox"], [node], options);
+        node = makeSpan(["katex-thinbox"], [node], options);
+        return makeSpan(["mord", "katex-vbox"], [node], options);
     },
     mathmlBuilder: (group, options) => {
         // mathllap, mathrlap, mathclap

package/src/functions/overline.ts

@@ -41,7 +41,7 @@ defineFunction({
             ],
         }, options);
 
-        return makeSpan(["mord", "overline"], [vlist], options);
+        return makeSpan(["mord", "katex-overline"], [vlist], options);
     },
     mathmlBuilder(group, options) {
         const operator = new MathNode(

package/src/functions/phantom.ts

@@ -57,9 +57,9 @@ defineFunction({
 
     htmlBuilder: (group, options) => {
         const inner = makeSpan(
-            ["inner"],
+            ["katex-inner"],
             [html.buildGroup(group.body, options.withPhantom())]);
-        const fix = makeSpan(["fix"], []);
+        const fix = makeSpan(["katex-fix"], []);
         return makeSpan(
             ["mord", "rlap"], [inner, fix], options);
     },

package/src/functions/rule.ts

@@ -28,7 +28,7 @@ defineFunction({
 
     htmlBuilder(group, options) {
         // Make an empty span for the rule
-        const rule = makeSpan(["mord", "rule"], [], options);
+        const rule = makeSpan(["mord", "katex-rule"], [], options);
 
         // Calculate the shift, width, and height of the rule, and account for units
         const width = calculateSize(group.width, options);

package/src/functions/sizing.ts

@@ -22,7 +22,7 @@ export function sizingGroup(
     // Add size-resetting classes to the inner list and set maxFontSize
     // manually. Handle nested size changes.
     for (let i = 0; i < inner.length; i++) {
-        const pos = inner[i].classes.indexOf("sizing");
+        const pos = inner[i].classes.indexOf("katex-sizing");
         if (pos < 0) {
             Array.prototype.push.apply(inner[i].classes,
                 options.sizingClasses(baseOptions));

package/src/functions/smash.ts

@@ -69,7 +69,7 @@ defineFunction({
 
         if (group.smashHeight && group.smashDepth) {
             // Symmetric \smash can stay in inline layout.
-            return makeSpan(["mord", "smash"], [node], options);
+            return makeSpan(["mord", "katex-smash"], [node], options);
         }
 
         // In order to influence makeVList for asymmetric smashing, we have to

package/src/functions/sqrt.ts

@@ -104,7 +104,7 @@ defineFunction({
             }, options);
             // Add a class surrounding it so we can add on the appropriate
             // kerning
-            const rootVListWrap = makeSpan(["root"], [rootVList]);
+            const rootVListWrap = makeSpan(["katex-root"], [rootVList]);
 
             return makeSpan(["mord", "sqrt"],
                 [rootVListWrap, body], options);