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.

Sign up for GitHub

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

Jump to bottom

feat: Script component supports css #93

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat: Script component supports css #93

wants to merge 1 commit into from
+21 −3

Conversation

yusukebe
Copy link
Member

Resolves #90

With the Script component in this PR, you can import CSS for both development and production easily:

// app/client.ts
import { createClient } from 'honox/client'
import './style.css' // import `css`

createClient()
// app/routes/_renderer.tsx
import { jsxRenderer } from 'hono/jsx-renderer'
import { Script } from 'honox/server'

export default jsxRenderer(({ children }) => {
  return (
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <Script src="/app/client.ts" />
      </head>
      <body>{children}</body>
    </html>
  )
})
// vite.config.ts
import pages from '@hono/vite-cloudflare-pages'
import honox from 'honox/vite'
import client from 'honox/vite/client'
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      plugins: [client()]
    }
  } else {
    return {
      plugins: [honox(), pages()]
    }
  }
})

Then output HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <link href="static/client-wNd0jdbA.css" rel="stylesheet"/>
    </head>
    <body>
        <div>
            <h1>Hello!</h1>
        </div>
    </body>
</html>

@yusukebe yusukebe mentioned this pull request Feb 24, 2024
Open
@emmanuelchucks
Copy link

Can we have something similar for images too?

@yusukebe
Copy link
Member Author

Hi @emmanuelchucks

I don't know what details you are talking about, but that is not what we are discussing in this PR

@ryuapp
Copy link

ryuapp commented Feb 29, 2024

@yusukebe
Here's example. I'm using PostCSS.
https://github.com/ryuapp/honox-tailwind-template/tree/import-css

In this example, FOUT will occur on every reload.

@yusukebe
Copy link
Member Author

yusukebe commented Mar 1, 2024

@ryuapp Thanks!

You are right. Even if it is raw CSS and not Tailwind CSS, the problem still occurs. I think that is, app/client.ts is executed by the browser, so the content is displayed before CSS is applied.

Hmmm... Unless this issue is resolved, this feature will not ship. I would like to see some good solutions...

@yusukebe yusukebe marked this pull request as draft March 1, 2024 07:30
@hideokamoto-stripe
Copy link

Possibly it's related to this: vercel/next.js#12868

@yusukebe
Copy link
Member Author

yusukebe commented Mar 1, 2024

@hideokamoto-stripe

So, does that mean embedding inlined CSS into HTML at server-side rendering time? I have thought of that method but have not implemented it. I may try it. Thanks!

@bruceharrison1984
Copy link
Contributor

bruceharrison1984 commented Mar 1, 2024 •
edited

Having played around with this as well, any solution that involves only injecting the link tag via javascript will have a FOUC. I don't think there is any way around this short of hiding the html until the CSS tag has been injected.

Explicitly adding the CSS link avoids this, but then you lose out on cache-busting via random CSS names. Other frameworks deal with the notion of vital CSS that is explicitly added to the DOM to build out the shell, and then the other styles are injected via JS.

This is difficult because how do you determine which CSS is vital, and which isn't?

I suppose one solution could be a static-named file (vital.css?) that users could utilize for base-styles to reduce FOUC, and other styles are then loaded via JS. I'm not sure how this would play with frameworks like Tailwind though. I'd be afraid of breaking TW in any form because it's wildly popular right now.

@yusukebe
Copy link
Member Author

yusukebe commented Mar 3, 2024

Or, it could output a manifest and refer to it during development, but I think that would decrease the performance.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Support import css files
5 participants
@yusukebe @emmanuelchucks @ryuapp @hideokamoto-stripe @bruceharrison1984