Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix stylesheet types #177

Closed
onemen opened this issue Jun 14, 2023 · 1 comment
Closed

fix stylesheet types #177

onemen opened this issue Jun 14, 2023 · 1 comment

Comments

@onemen
Copy link
Contributor

onemen commented Jun 14, 2023

'fontStylestylesheetUrl' is deprecated.ts(6385) client.d.ts(42, 6): The declaration was marked as deprecated here.

-  import fontStylestylesheetUrl from './styles/font.css'
-  import tailwindStylesheetUrl from './styles/tailwind.css'
+  import fontStylestylesheetUrl from './styles/font.css?inline'
+  import tailwindStylesheetUrl from './styles/tailwind.css?inline'

why we need this duplication in the same function?

epic-stack/app/root.tsx

Lines 40 to 43 in f21bbe9

// Preload CSS as a resource to avoid render blocking
{ rel: 'preload', href: fontStylestylesheetUrl, as: 'style' },
{ rel: 'preload', href: tailwindStylesheetUrl, as: 'style' },
cssBundleHref ? { rel: 'preload', href: cssBundleHref, as: 'style' } : null,

epic-stack/app/root.tsx

Lines 63 to 65 in f21bbe9

{ rel: 'stylesheet', href: fontStylestylesheetUrl },
{ rel: 'stylesheet', href: tailwindStylesheetUrl },
cssBundleHref ? { rel: 'stylesheet', href: cssBundleHref } : null,

@xHomu
Copy link
Contributor

xHomu commented Jun 14, 2023

It's a bit verbose, but that line solves this particular warning in Lighthouse:

image

Details on preloading CSS: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload

This lets the main thread to continue rendering the HTML while the css streams in. Otherwise, the main thread holds until the arrives.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants