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: add Link component for external (built) css #181

Merged
merged 2 commits into from
Jun 4, 2024
Merged

feat: add Link component for external (built) css #181

merged 2 commits into from
Jun 4, 2024
+108 −0

Conversation

mika-f
Copy link
Contributor

@mika-f mika-f commented Jun 1, 2024

Motivation

For example, you may want to use TailwindCSS for styling HonoX components. Currently, it is possible to develop using the <link /> tag, but the build result does not contain a unique value such as a file hash, which can lead to unintended caching.
This PR addresses such a use case.

Example

As an example, we are considering the following use cases:

// _renderer.tsx
import { jsxRenderer } from "hono/jsx-renderer";
import { Script, Link } from "honox/server";

export default jsxRenderer(() => {
  return (
    <html lang="en">
      <head>
        <Link href="/app/globals.css" rel="stylesheet" />
      </head>
      <body class="bg-white">
        {/* omitted... */}
      </body>
    </html>
  );
});

// vite.config.ts
import { defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  if (mode === "client") {
    return {
      build: {
        rollupOptions: {
          input: ["/app/globals.css"],
          output: {
            assetFileNames: "static/assets/[name].[hash].[ext]",
          },
        },
      },
      /* omitted... */
    };
  } else {
    return {
      /* omitted... */
    };
  }
});

yusukebe
yusukebe reviewed Jun 3, 2024
View reviewed changes
src/server/components/link.tsx Outdated
import type { FC } from 'hono/jsx'
import type { Manifest } from 'vite'

type Options = { manifest?: Manifest; prod: boolean } & JSX.IntrinsicElements['link']
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should prod be prod??

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's right! I fixed it!

@yusukebe
Copy link
Member

yusukebe commented Jun 3, 2024

Hi @mika-f

This is a super cool feature! I'd like to merge it, but I've left one comment. Check it!

@yusukebe
Copy link
Member

yusukebe commented Jun 3, 2024

Hey @ryuapp @bruceharrison1984 !

What do you think of this feature? Will it resolve #90, though we still need to add a path to the CSS file in vite.config.ts?

@ryuapp
Copy link

ryuapp commented Jun 3, 2024

Great work. I like this feature because this simplifies a renderer file.

Will it resolve #90, though we still need to add a path to the CSS file in vite.config.ts?

Partially solve it.
The reason I'm asking for #90 is because I'm looking for a simple way to import CSS.
I would be even happier if this feature could be used with zero configuration.

yusukebe
yusukebe approved these changes Jun 4, 2024
View reviewed changes
Copy link
Member

@yusukebe yusukebe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@yusukebe
Copy link
Member

yusukebe commented Jun 4, 2024

@ryuapp

Thank you for the comment.

I would be even happier if this feature could be used with zero configuration.

Yeah, I also think so. I'm not sure how we can implement it. But for example, if we can write the following, it will be great:

import tailwind from '@hono/vite-tailwind-css'

export default defineConfig(({ mode }) => {
  return {
    plugins: [honox(), pages(), tailwind()]
  }
})

@yusukebe
Copy link
Member

yusukebe commented Jun 4, 2024

@mika-f

Looks good! I'll merge this and release the new version which includes this change later. Thank you for your contribution!

@yusukebe yusukebe merged commit d41cef5 into honojs:main Jun 4, 2024
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@yusukebe yusukebe yusukebe approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@mika-f @yusukebe @ryuapp