Global CSS is applied only after there are changes to a component after Global CSS was modified

AFAICT this is a duplicate of 🐛 Global AssetLibrary should render with its auto-saved state (if any) when rendered in the XB UI Active . @balintbrews will be able to confirm.

It's related, but not the duplicate of that issue. Here is our current treatment of global CSS.

1. Changes to global CSS get auto-saved in the AssetLibrary entity. In this early implementation only the source code is saved, and we only use the config entity as the mean of storage — no generated library from it gets attached to the page.
2. Changes to JavaScript code, CSS code (not global), props, slots, and list of required props get auto-saved in the JavaScriptComponent entity whenever any of those changes occur. As part of compiling the CSS for the component, we take what is in global CSS, and use it for building the CSS with Tailwind CSS. Global CSS serves as the Tailwind configuration, but any additional styles will also make it to the compiled output. We concatenate the component's CSS source (after it's transpiled with Lightning CSS) with this compiled output, and save it to the code component's compiled CSS property.

I won't go into details here how this will need to be rectified and improved. (Please mind that we needed to get to 0.2.0-alpha1. 🙂)

As far as the context for this issue, the solution is easy. We need to trigger a component auto-save also when the global CSS is updated. I'll have an MR shortly.

Is the intent of this to make sure that the component you're currently editing is re-autosaved when global css is changed? But other components don't automatically get recompiled with the new global css, right? I think that's fine if that's what we want the scope of this issue to be, but just want to make sure that's explicit if that's the case.

Interesting. Doesn't this mean there could be some pretty interesting behavior if different components included a different version of the global CSS? If that's the case, we should probably try to solve this in a way where we didn't have to include the global CSS with individual components.

That's what I meant when I said that the approach will need to be rectified. ☺️ I have thoughts on how, and I was planning to open an issue. In the meantime, we can land this improvement on what we currently have.

Who should review this? @hooroomoo? @jessebaker?

Most importantly, what's left after this? AFAICT it is:

1. Back-end: load the draft/auto-saved instead of the live/config-stored global asset library if there is one → 🐛 Global AssetLibrary should render with its auto-saved state (if any) when rendered in the XB UI Active
2. Front-end: stop compiling global CSS into code components, and actually rely on the global asset library being loaded on all pages → issue needed

Assigning to @balintbrews for answering both of those questions.

1. 🐛 Global AssetLibrary should render with its auto-saved state (if any) when rendered in the XB UI Active can be worked on independently.
2. 📌 Compile Tailwind CSS globally for code components Active is the follow-up issue.

Automatically closed - issue fixed for 2 weeks with no activity.