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

Support import css files #90

Open
ryuapp opened this issue Feb 24, 2024 · 6 comments · May be fixed by #93
Open

Support import css files #90

ryuapp opened this issue Feb 24, 2024 · 6 comments · May be fixed by #93
Labels
enhancement New feature or request

Comments

@ryuapp
Copy link

ryuapp commented Feb 24, 2024

What is the feature you are proposing?

Now, in order to use tailwindcss with HonoX, we need to configure it with vite and add link tags for dev and prod envs in head.
This seems a bit troublesome.

It would be good if we could just import it as following:

import "../style.css"

If there is already a way to achieve this, please comment it.
@ryuapp ryuapp added the enhancement New feature or request label Feb 24, 2024
@yusukebe yusukebe linked a pull request Feb 24, 2024 that will close this issue
Draft
@yusukebe
Copy link
Member

Hi @ryuapp !

Thanks for the suggestion. I've implemented the feature of the Script component to support it: #93. How about this?

@ryuapp
Copy link
Author

ryuapp commented Feb 25, 2024

Thank you, @yusukebe!
Allow me to comment on just two points.

  1. FOUC(flash of unstyled content)
    I save files or reload a screen every time, a flicker occurs on dev mode.
    Without this, the PR is a good DX.

  2. Only Global Style?
    I don't have a problem as long as I can easily import tailwindcss, but there may be times when we want to load a css file only on a specific page. Therefore, I think it's best to be able to import it within files of routes directory.

Even with the current PR, that meets my demands!

@yusukebe
Copy link
Member

Hi @ryuapp

Can you share the example using Tailwind CSS with this PR? I want to know the setting. Using PostCSS?

@emmanuelchucks
Copy link

@ryuapp consider importing css this way

import styles from "../style.css?url"

export default jsxRenderer(async ({ title, children }) => {
  return (
    <html lang="en">
      <head>
        ...
        <link href={styles} rel="stylesheet" />
        ...
      </head>
      ...
    </html>
  )
})

and updating your vite.config.ts

export default defineConfig(({ mode }) => {
  if (mode === "client") {
    return {
      plugins: [client()],
    }
  }

  return {
    plugins: [honox(), pages()],
    build: {
      assetsDir: "static",
      ssrEmitAssets: true,
    },
  }
})

@ryuapp
Copy link
Author

ryuapp commented Mar 10, 2024 •
edited

@emmanuelchucks
I prefer it to the current config.
I currently use that config, but in the future I would like to configure it only with the import syntax.
Thank you!

@laiso laiso mentioned this issue Apr 1, 2024
Open
@yusukebe
Copy link
Member

I'm trying to use Remix on Hono's Vite dev-server. In that app, it can support "css side-effects imports" which is a matter of this issue:

https://github.com/yusukebe/hono-and-remix-on-vite/blob/ff51520bf0f8f42896ae0d4bacf596d2cb216331/app/root.tsx#L3

So, we may make it by referring to Remix.

@yusukebe yusukebe mentioned this issue Jun 3, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat: Script component supports css honojs/honox
3 participants
@yusukebe @emmanuelchucks @ryuapp