bundle css; custom styles; named themes

[mbostock]

This adopts esbuild to bundle our CSS. This should eventually help with #60, but the idea for now is merely to separate the CSS into separate files so it’s a bit easier to manage.

[Fil]

Great!

Will it also bundle user-defined styles too in the future (related to #60 and #169, maybe?)?

[mbostock]

Yeah, still need to figure out how, but the idea is that this makes it easier for the user to supply their own style.css for a custom theme while still importing parts of our default styles.

[mbostock]

I’ve added a style config option to this PR now. It defaults to our default stylesheet:

@import url("observablehq:theme-auto.css");
@import url("observablehq:default.css");

But you can override it, say to force a light theme, or to define a custom one:

@import url("observablehq:theme-light.css");
@import url("observablehq:default.css");

The built-in CSS modules are enumerated here:

https://github.com/observablehq/cli/blob/bdcb5f0dbffb778e97bbaf6cfe55b1841df15814/src/rollup.ts#L24-L27

[Fil]

I was going to comment on the missing documentation :)

I think this is a good user experience. It's especially enjoyable that relative @import paths work as expected.

[dleeftink]

Am I right to understand that with the current bundler, a new .css file will be bundled per .md file that have a custom style override defined in the YAML frontmatter?

In many cases, I need some pages to only load an additional snippet on top of the site’s global customs.css (which is loaded on first visit), instead of having an additional .css file bundled/served just for the snippet.

For instance, using style: "/article.css" as a per-page override, I would expect the page to re-use the (cached) custom.css as the base style, and only load the additional article.css when visiting a page that has the style override set.

In article.css I can then simply @import various styled components to keep the style overrides modular.

@import url("./article/header.css");
@import url("./article/section.css");
@import url("./article/typography.css");

The article.css will then only bundle the imports instead of bundling the full theme + page overrides. This file is then appended to the page head after the global custom.css.

Another way of achieving this is providing a class field in the YAML metadata, which allows users to bundle all their styles in a single custom.css and apply per-page overrides in the global stylesheet itself (a less modular approach I think).