How to bundle KaTeX CSS to a single output CSS with webpack?

[cirosantilli]

I would like to produce a single bundled CSS file. In the example below, normalize works if I comment out the KaTeX part, so I know I'm on the right track, but I haven't managed to get the KaTeX part to work.

First I tried:

main.scss

@use "normalize.css/normalize.css";
@use "katex/dist/katex.min.css";

body {
  background-color: red;
}

webpack.config.js

const path = require('path');

const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const nodeModulesPath = path.resolve(__dirname, 'node_modules');

module.exports = {
  entry: {
    main: ['./main.scss'],
  },
  mode: 'none',
  module: {
    rules: [
      {
        test: /\.(scss|css)$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
          },
          {
            loader:  'css-loader',
            options: {
              sourceMap: true,
            },
          },
          // 'resolve-url-loader',
          {
            loader: "sass-loader",
            options: {
              sassOptions: {
                includePaths: [nodeModulesPath],
              },
            },
          },
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin(),
    ],
    minimize: true,
  },
};

package.json

{
  "name": "webpack-cheat",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "webpack",
    "sass": "rm -f dist/main.css && sass main.scss dist/main.css"
  },
  "author": "Ciro Santilli",
  "license": "MIT",
  "devDependencies": {
    "css-loader": "5.2.4",
    "css-minimizer-webpack-plugin": "3.0.2",
    "katex": "^0.13.11",
    "mini-css-extract-plugin": "2.1.0",
    "normalize.css": "8.0.1",
    "resolve-url-loader": "^4.0.0",
    "sass": "1.32.11",
    "sass-loader": "11.0.1",
    "style-loader": "2.0.0",
    "webpack": "5.36.1",
    "webpack-cli": "4.6.0",
    "webpack-dev-server": "3.11.2"
  }
}

which fails with:

Error: Can't resolve 'fonts/KaTeX_AMS-Regular.woff2' in '/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import'

presumably because node_modules/katex/dist/katex.css does:

@font-face {
  font-family: 'KaTeX_AMS';
  src: url(fonts/KaTeX_AMS-Regular.woff2) format('woff2'), url(fonts/KaTeX_AMS-Regular.woff) format('woff'), url(fonts/KaTeX_AMS-Regular.ttf) format('truetype');

and fonts/KaTeX_AMS-Regular.ttf is at node_modules/katex/dist/fonts/KaTeX_AMS-Regular.ttf`, and relative paths are not being searched.

This was asked at: https://stackoverflow.com/questions/54042335/webpack-and-fonts-with-relative-paths so then I tried to use resolve-url-loader' by uncommenting the line `// 'resolve-url-loader' above, but then it fails with:

ERROR in ./main.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/resolve-url-loader/index.js):
Error: resolve-url-loader: error processing CSS
  a valid source-map is not present (ensure preceding loaders output a source-map)
  at file:///home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/main.scss:344:3
    at encodeError (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/resolve-url-loader/index.js:287:12)
    at onFailure (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/resolve-url-loader/index.js:228:14)
    at processResult (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/webpack/lib/NormalModule.js:676:19)
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/webpack/lib/NormalModule.js:778:5
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at onFailure (/home/ciro/bak/git/cirosantilli.github.io/web-cheat/webpack/sass-import/node_modules/resolve-url-loader/index.js:228:5)

asking at: bholloway/resolve-url-loader#212

Any clues? Also asked at: https://stackoverflow.com/questions/68366936/how-to-bundle-katex-css-to-a-single-output-css-with-webpack

[edemaine]

Any chance you can use node_modules/katex/src/katex.less? That points to the correct font directory (../fonts instead of fonts/).

[edemaine]

Ah, I see now why Less @import "katex/src/katex.less" doesn't work. That file does @import "fonts.less", and fonts.less uses the path "../fonts". So far so good -- the repo has a root fonts directory. However, in the NPM distribution, it's in dist. Hence the problem.

One possible fix here would be to distribute a version of katex.less (possibly even with an overridable fonts directory variable) within dist in NPM. Then you could use that version instead of the one in src. But given that the CSS version works, I think that's the best thing to recommend, until #3116 happens.

[HenrikStaaf]

@cirosantilli What is the reason for wanting to produce a single bundled CSS file? Does it help with page speeds?

[cirosantilli]

@HenrikStaaf the main issue for me was not performance, but transitive dependencies/sanity of distribution.

E.g. https://github.com/cirosantilli/cirodown is a markup language with KaTeX support out of box.

That package uses KaTeX and CSS from various other sources.

Therefore, the sanest way to distribute the CSS for that markup language is to package everything into a single CSS file, that way end users only need to include a single cirodown.css file to make output render correctly.

And one of the sanest ways to package a bunch of CSS files into one is to run webpack before any releases of the markup and add the .css to the NPM package.

Now I'm being forced to do some hacks calling sass directly without webpack: ourbigbook/ourbigbook#157

[HenrikStaaf]

@cirosantilli I see, I am currently looking for a fix to the huge DOM trees that Katex produces. I love Katex but it is killing the page speed of my math pages :(. I thought this may be one way to fix these performance issues.

[cirosantilli]

@HenrikStaaf ah I see. Yeah, I suppose this is a hard problem, besides the more obvious options of either going more native (will browsers every support mathml??) or going more reactive and do it on Js after HTML page render (and thus become mathjax slow load horror). Out of curiosity, is this for Mathleaks BTW/are you https://www.linkedin.com/in/henrik-s-a15b6b67/ ? Interesting project.

[HenrikStaaf]

Yes correct, Im doing this for Mathleaks :)

…

On Tue, 12 Oct 2021 at 17:10, cirosantilli ***@***.***> wrote: @HenrikStaaf <https://github.com/HenrikStaaf> ah I see. Yeah, I suppose this is a hard problem, besides the more obvious options of either going more native (will browsers every support mathml??) or going more reactive and do it on Js after HTML page render (and thus become mathjax slow load horror). Out of curiosity, is this for Mathleaks BTW/are you https://www.linkedin.com/in/henrik-s-a15b6b67/ ? Interesting project. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#3115 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGHMRTXR3VPXS7M2EYJMNQ3UGRFWVANCNFSM5AJS3YLQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

[cirosantilli]

The amazing maintainer of resolve-url-loader pointed me out the solution: bholloway/resolve-url-loader#212 (comment) needed to add {sourceMap: true} working example at: https://github.com/cirosantilli/cirosantilli.github.io/tree/c4a93c23e9e009a0a36e76673d167c6149295dec/web-cheat/webpack/sass cc. @HenrikStaaf @edemaine

[HenrikStaaf]

Hi @cirosantilli.

What was solved here? I am sorry for not understanding :) is this a fix to the DOM tree issue?

[cirosantilli]

Ah, not to the DOM thing, only to the katex + webpack without manually loading fonts.

[HenrikStaaf]

Does this increase loading speeds?

[cirosantilli]

I don't think it will. My main concern was to not duplicate those includes across the package dependency chain.

[HenrikStaaf]

i understand. Thank you for the update :)