Migrate local cirodown's CSS/Js bundling to webpack to better integrate with the dynamic website

[cirosantilli]

At 139b042 it is all a mess with ./build-sass + npm run browserify for regular renders + renders editor.html, and webpack for the dynamic website through next.js.

In web/pages/_app.tsx we are forced to reimport all dependencies of cirodown.scss as:

import 'katex/dist/katex.css'
import 'normalize.css/normalize.css'

which duplicates the logic and leads to subtle bugs.

exports hacks are also required in cirodown.runtime.js to make it work for both cases.

We can get rid completely of the external_includes approach. It will either be full embed per document, or link to a single CSS + single JS under node_modules/cirodown.

[cirosantilli]

Minimal prototype: https://github.com/cirosantilli/cirosantilli.github.io/tree/504b52f78e2b6a39498322b64c457e3137ae7ac2/web-cheat/webpack/sass-import

katex fails with relative url paths, https://stackoverflow.com/questions/54042335/webpack-and-fonts-with-relative-paths we try to fix with resolve-url-loader and then it blows up 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)

Asked at:

• How to bundle KaTeX CSS to a single output CSS with webpack? KaTeX/KaTeX#3115
• https://stackoverflow.com/questions/68366936/how-to-bundle-katex-css-to-a-single-output-css-with-webpack

Prototype: https://github.com/cirosantilli/cirodown/tree/webpack

[cirosantilli]

As of 9116b87 the Js if fully embedded! Missing CSS due to above mentioned font woes, but raw SASS was able to embed everything for us (minus fonts which we are copying manually for now).

[cirosantilli]

Katex font issues were solved as per: https://stackoverflow.com/questions/68366936/how-to-bundle-katex-css-from-node-modules-to-a-single-output-css-from-a-sass-us/70693720#70693720 and now stuck at: https://stackoverflow.com/questions/70698775/how-to-make-webpack-generate-separate-css-and-js-with-the-same-name-index-in

We could migrate to webpack if we were using a different name, e.g. dist/cirodown-css.css instead of the nicer dist/cirodown.css, but unless we find some specific advantage of webpack besides "being saner", going to keep ./build-sass around for the nicer .css name.

The almost working branch at: https://github.com/cirosantilli/cirodown/tree/sass-webpack