Re: [csswg-drafts] [cssom] allow text in CSSStyleSheet constructor (#12110)

To give some context, at least as far as I remember it, for how the current API came to be:

1. Modern DOM APIs are trying to at least make it possible, if not the path of least resistance, to do work off the main-thread. CSS parsing is a perfect example: it's expensive, sync parsing blocks the main thread, which can lead to jank and underutilizing multi-core CPUs. So implementors want this API to be non-blocking.
2. Constructors can't be async, so we need some other API for async parsing style text. There could be something like an async factory, but given the need to replace text, something like an instance method was needed anyway.
3. To nudge developers towards the better-for-users async API, the async method got the plain name `replace()` and the worse-for-users sync method got the name `replaceSync()`.
4. Since constructors can't be async, the constructor could only enable the worse-for-users sync parser. In order to still nudge developers towards the better-for-users method, the constructor doesn't take style text at all.

Without changing the opinions on expensive blocking APIs, I'm not sure that the spec group will endorse allowing style text in the constructor.

I do think with addition of top-level await since then, it might be kind of nice to have static factories, which would combing the constructor and replace calls. ie:

```ts
const styles = await CSSStyleSheet.parse(...);
```
or:
```ts
const styles = CSSStyleSheet.parseSync(...);
```

Of course, these factories are pretty trivial to write yourself:

```ts
const parseCSS = async (text: string) => {
  const stylesheet = new CSSStyleSheet();
  await stylesheet.replace(text);
  return stylesheet;
};
```

Note: one advantage of the separate construction and async parsing APIs is that you can construct your stylesheet object eagerly, initiate the parsing, and continue to use it to build your required DOM structures while the text is being parsed, and only block on the parsing promise(s) later on.

-- 
GitHub Notification of comment by justinfagnani
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12110#issuecomment-2884707576 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 15 May 2025 18:23:09 UTC