Consider adding StyleSheet.createFromString() which returns Promise<StyleSheet>

[TakayoshiKochi]

The original proposal defines the constructor running in a synchronous manner, but can it return Promise<CSSStyleSheet> instead, allowing the implementation to do lazy CSS parsing of the given text?

[TakayoshiKochi]

Firefox does (will?) parse style sheets in different threads, so it would be nice if the main thread won't be blocked by waiting the parsing to finish.

JavaScript constructor is just a function, so it is free to return any type, but as this is an interface usually defined in .idl file for rendering engines, their binding generators have to take care of that. As far as I researched there is no precedent example of a constructor returning a promise (e.g. Asynchronous extended attribute for constructor does not seem to exist), so we may define this as a factory method in some interface, which looks like methods (e.g. json()) in Body (fetch spec).

[TakayoshiKochi]

Let's repurpose this for StyleSheet.createFromString() factory method for asynchronous parsing, spun off from #25 (comment)

[tabatkins]

IDL contructors, unfortunately, can't return Promises. (I've opened whatwg/webidl#563 just in case.) So yeah, .createFromString() is currently the way to go.

Do we want to disallow synchronous parsing entirely, so the constructor can synchronously produce an empty stylesheet only?

[TakayoshiKochi]

@tabatkins we can only expose .createFromString() and disallow new CSSStyleSheet(). Authors can easily wrap the factory method in a function to synchronously return generated stylesheet.

[tabatkins]

Well, no they can't; there's no way to synchronously await a promise.

[calebdwilliams]

I think still having a constructor for an empty stylesheet would be advantageous (for certain use cases), especially if there could eventually be an instance method to append rules from a string:

const sheet = new CSSStyleSheet();
sheet.addRulesFromString(` :host { color: tomato; }) `)
  .then(sheet => console.log('success', sheet))
  .catch(console.error);

So the sheet would still be usable before parsing is completed, but would have the same Promise<StyleSheet> return value.

[tabatkins]

That was my thought - allow the constructor to work, but don't accept any content.

The suggestion to append to the stylesheet async makes good sense!

[calebdwilliams]

@tabatkins @TakayoshiKochi
Would that kind of feature make sense as an enhancement in this proposal or would that need to be something separate?

[TakayoshiKochi]

I think we can resolve the final entrypoints of this feature as

new CSSStyleSheet()

to create empty CSSStyleSheet synchronously, and

Promise<CSSStyleSheet> CSSStyleSheet.createFromString(string)

to parse and create CSSStyleSheet asynchronously.

The details have to be fleshed out elsewhere, but let's close this if no one objects in a few days.
I'll make edit on the spec.

[annevk]

Firefox will have to continue support synchronous parsing due to <style>, but maybe we shouldn't encourage that in API form.