Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Confusing Returnings of Server Side Rendering API

See original GitHub issue

Description

Expected SSR generates a rendered (styles included) HTML content. But it seems that it only parses the html and outputs the generated CSS.

confusing returnings:

html in the output is the same as the input one and useless.
stylesCss should contain color variables used in HTML.
colorsCss is always about 20 kb in size without any tree-shaking, no matter what the input is.
colorsMetaContent is useless, I don’t know in which case it will be used.

That is, developers need to inject the uncompleted (without color variables) or unused (too many color variables) CSS into HTML manually, which is not good for DX and performance.

BTW, the SSR example on the document is outdated.

Reproduction

Run the test on StackBlitz

import { render } from "@master/css/render";
import { StyleSheet, Style } from "@master/css";

const target: string[] = [
    `<div class="p:12"></div>`,
    `<div class="font:24 font:56@2xl font:48@lg font:32@md bg:blue-54:hover bg:blue-47 bg:blue-68:active color:orange"></div>`,
];

for (const html of target) {
    test(html);
}

function test(html: string) {
    const key = `render \x1b[93m${html}\x1b[m`;

    console.time(key);
    const result = render(html, { StyleSheet, Style });
    console.timeEnd(key);

    console.log("html:", `\x1b[92m${result.html}\x1b[m`);
    console.log("stylesCss:", `\x1b[96m${result.stylesCss}\x1b[m`);
    console.log("colorsMetaContent:", `\x1b[94m${result.colorsMetaContent}\x1b[m`);
    console.log("length of colorsCss:", `\x1b[95m${result.colorsCss.length}\x1b[m`);
}