Devinxi - Unified CSS handling

[katywings]

Design Goals

This PR implements the Ambient CSS import column of the table below. The ?url import + Explicit API column is part of a separate ongoing progress.

#	Item	Ambient CSS import	?url import + Explicit API	Comment
1	Integration	manifest-aware lazy	Primitive, JSX, Component or routeData?
2	DEV/PROD consistency	X	X
3	Supports CSS modules	X	Unlikely?
4	Prevents FOUC	X	X	Flash of unstyled content
5	Prevents FOEC		X	Flash of early-styled content
6	Renders to head	X	X
7	Loads on link hover	X	Unlikely?
8	Prevents rendering duplicates	X	X
9	Unmounts on client-side navigation		X
10	Runtime impact	Cheap	Expensive
11	Doesn't depend on vite		X

Included Fixes

• Broken Vite CSS HMR and auto load is fixed (regression from devinxi)
• ?url imported asset's are not server rendered anymore
• Fixes [Bug?]: CSS is not applied on build when Vite build.cssCodeSplit: false option is used #1324
• Fixes [Bug?]: Required CSS is removed when components are re-exported #1843
• Fixes [Bug?]: The same stylesheet appear above html element when use props.children to render  #1704
• Fixes [Bug?]: Fragmented and imported css is injected into the body tag and causes html to repaint/shift #1654
• Fixes [Bug?]: CSS styles in dev mode broken #1810

Limitations

• The lazy transpilation uses a naive approach to narrow down the target files:
  • It can't detect if a file is dynamically imported, so it adds the necessary id$$ export to all jsx/tsx files with export default
  • Lazy loading components from aggregated modules e.g. export { default } from "./xyz.tsx cannot mount the related css, as the aggregated module misses the id$$ from xyz.tsx

New CSS fixture

Tasks

• Create an example for css testing
• ?url imported css should not be server rendered
• <link> should be mounted before suspension-end during spa navigation
• Suspension from spa navigation should only end after <link> has been loaded - Will be part of a separate API
• Assets should be deduplicated on ssr
• Public manifest and asset mount API (Edit: Public manifest API analog to RFC: Client assets metadata API for SSR vitejs/vite#20913 will be implemented in a different branch)
• Integrate useAssets in dev (making dev and prod use the same API)
• Implement unified lazy
• Optimize unified lazy plugin
• Test glob import support for lazy
• Convert assets to tags in the useAssets runtime, instead of the manifest json
• Test CSS Order, is it better? Is it the same?

[changeset-bot]

⚠️ No Changeset found

Latest commit: 206e659

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@solidjs/start@1965

commit: 206e659

[brenelz]

This is still going to be post-devinxi into main?

[brenelz]

bunch of conflicts now too

[katywings]

This is still going to be post-devinxi into main?

@brenelz It's still up for discussion of this is going straight into devinxi or if it is going into main. Why 😅?

[katywings]

bunch of conflicts now too

@brenelz Just rebased it, conflicts are gone 😃. Next on my TODO list: rework the DEV part (try to render <link> in dev, instead of <style>).

[netlify]

❌ Deploy Preview for solid-start-landing-page failed. Why did it fail? →

Name	Link
🔨 Latest commit	206e659
🔍 Latest deploy log	https://app.netlify.com/projects/solid-start-landing-page/deploys/6918b59cf110630008b7dcff

[brenelz]

Looking good