search

honojs / honox

HonoX - Hono based meta framework
https://hono.dev
MIT License
1.46k stars 40 forks source link

Support import css files #90

Open ryuapp opened 7 months ago

ryuapp commented 7 months ago

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.

yusukebe commented 7 months ago

Hi @ryuapp !

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

ryuapp commented 7 months ago

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 commented 7 months ago

Hi @ryuapp

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

emmanuelchucks commented 7 months ago

@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 commented 6 months ago

@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!

yusukebe commented 5 months ago

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.