🦋 Changeset detected

Latest commit: 2ab5121

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

Limitation The CSS loader cannot be registered synchronously

This seems expected. We can't rely on import ordering because while eval happens in order, fetching and parsing happen in parallel.

To discuss

• Should CSSStyleSheet be added to the global context?

Not by default, it should be installed with the other DOM globals.

• How to proceed with the loader?
• Should the logic in packages/reactive-element/src/css-tag.ts be adapted?

What do you mean with these last two points?

• How to proceed with the loader?

How to provide/integrate the loader. I think you answered this by suggesting to add it to install-global-dom-shim.ts.

• Should the logic in packages/reactive-element/src/css-tag.ts be adapted?

Should usage of CSSStyleSheet be enabled in SSR?

I changed the terminology from loader to hook to align with the terminology used by Node.js

Hello @thescientist13
Can you check whether this PR meets the criteria to close #4862?
I have the thought to create a follow-up PR to add an entry/import module @lit-labs/ssr/dom-shim.js, which would install the hook and the DOM shim globals. It could be used like node --import @lit-labs/ssr/dom-shim.js my-script.js. Would that help for your use case?

Hey @kyubisation thanks so much for all your great work on this!

Can you check whether this PR meets the criteria to close #4862?

It seems like it would, but I haven't had a case to use the installWindowOnGlobal yet in a Lit+SSR project so my experience / usage there is limited.

Inferring from the changes in this PR though, would I just simply need to add these lines to the top of my script in the repro repo?

// add these lines
import '@lit-labs/ssr-dom-shim/css-hook.js';
import {installWindowOnGlobal} from './dom-shim.js';
installWindowOnGlobal();

// rest of the code as normal
import fs from 'node:fs/promises';
import { html } from 'lit';
import { render } from '@lit-labs/ssr';
import { collectResult } from '@lit-labs/ssr/lib/render-result.js';
import './components/greeting/greeting.js';

//...

I have the thought to create a follow-up PR to add an entry/import module @lit-labs/ssr/dom-shim.js, which would install the hook and the DOM shim globals. It could be used like node --import @lit-labs/ssr/dom-shim.js my-script.js. Would that help for your use case?

Yeah, I think that would be helpful for composition purposes, so consumers can cherry-pick whatever parts they want of this implementation, which I think is really nice for folks building meta-frameworks around Lit / Lit+SSR.

Left some other thoughts in the PR, feel free to take or leave them.

Inferring from the changes in this PR though, would I just simply need to add these lines to the top of my script in the repro repo?

// add these lines
import '@lit-labs/ssr-dom-shim/css-hook.js';
import {installWindowOnGlobal} from './dom-shim.js';
installWindowOnGlobal();

// rest of the code as normal
import fs from 'node:fs/promises';
import { html } from 'lit';
import { render } from '@lit-labs/ssr';
import { collectResult } from '@lit-labs/ssr/lib/render-result.js';
import './components/greeting/greeting.js';

//...

No, that would still break, as the imports to the hook and the component (which in turn imports the css file) are on the same "level".
You would either to dynamically import the/any component (e.g. await import('./components/greeting/greeting.js');) or register the hook via Node.js CLI/environment variable paramters (e.g. node --import @lit-labs/ssr-dom-shim/css-hook.js my-script.js, which I think you already adapted here).

No, that would still break, as the imports to the hook and the component (which in turn imports the css file) are on the same "level".
You would either to dynamically import the/any component (e.g. await import('./components/greeting/greeting.js');) or register the hook via Node.js CLI/environment variable paramters (e.g. node --import @lit-labs/ssr-dom-shim/css-hook.js my-script.js, which I think you already adapted here).

Ah, OK. I'm reviewing the README a bit with more your recommendations and think I get it now.

I assume this is because of the requirement to exclude CSSStyleSheet from being auto-installed? I suppose if that was not the case, we wouldn't have to "externalize" this to userland through something like installWindowOnGlobal? Would certainly like to see if we can discuss this a bit during the next eng call. Maybe we could change the position on this once (CSS) Import Attributes reach full interop? 🤞

@justinfagnani @thescientist13 I implemented a check whether the runtime environment support importing CSS files directly and whether hooks can be registered. Feel free to provide feedback, if you have concerns.