Re: [w3c/webcomponents] CSS Modules (#759)

A question that I don't see resolved in this thread is whether CSS modules should be leaf nodes in the module graph.  That is to say, how do we handle `@import url("foo.css")` in a CSS module?  I see three possibilities:
1.  CSS Modules are leaf modules, and don't allow `@import` references (following the example of [replaceSync](https://wicg.github.io/construct-stylesheets/#dom-cssstylesheet-replacesync) in constructable stylesheets).
module.
1.  CSS modules are leaf modules; prior to creating the module record for a CSS module, load the full `@import` tree of its stylesheet and if any fail to resolve, treat it as a parse error for the module.
1.  CSS Modules are non-leaf (cyclic) modules.  Process a CSS Module's `@importe`d stylesheets as its requested module children in the module graph, with their own module records.  They will Instantiate and Evaluate as distinct modules.

I don't think we want to do option 1 as that seems too restrictive.
One of the main differences I see between options 2 and 3 is that 3 implies that if a CSS file is `@import`ed multiple times for a given realm, each import would share a single CSSStyleSheet between them (because a module is only instantiated/evaluated once for a given module specifier).  This has the advantage that if a developer includes a stylesheet multiple times by mistake or because of shared CSS dependencies, there will be performance and memory gains in sharing it.  On the other hand, this is a divergence from the existing behavior where multiple `@import`s of the same .css file each come with their own CSSStyleSheet.  I'm not sure how developers count on the existing behavior and whether it would be disruptive to make CSS modules work differently.

Performance-wise I don't think there is much difference between 2 and 3 (other than from only evaluating redundant `@import`s once).  In both cases, we can fetch all the CSS files (and the rest of the module graph) in parallel, and we can't move on to graph Instantiation until all the CSS files (and other modules) are fetched.

Does anyone have thoughts on this?  Any other considerations I'm missing?

-- 
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/w3c/webcomponents/issues/759#issuecomment-490256626