Import *.css.json, additionally bundle *.css?

[rauschma]

Describe the problem

At the moment, there is no simple way to support CSS for server-side rendering:

• Node.js somehow has to handle the imported CSS.
• TypeScript should complain (during editing!) if there are typos in IDs, classes, etc.

Describe the proposed solution

• Node.js and TypeScript: import JSON
• Bundling via modular-css: import JSON & bundle CSS fragments into a single file
• Repo with more information: https://github.com/rauschma/server-side-rendered-css

component.tsx
component.css.json
component.css

component.ts:

import { render } from 'preact-render-to-string';
// Node.js does not support named imports for JSON
import css from './component.css.json' with { type: 'json' };

console.log(render(
  <div id={css.warning}></div>
));

component.css.json:

{
  // "unmangled name of ID": "name in CSS bundle"
  "warning": "x1bz9l0f"
}

component.css:

#warning { /* CSS bundle: #x1bz9l0f */
  background-color: red;
}

Alternatives considered

• vanilla-extract: Works but does not let me use CSS, only CSS encoded as TypeScript.

Importance

I cannot use modular-css without it