defunkt/forge
1
0
Fork 0
Code Issues Pull Requests Activity

tweak css

Browse Source
This commit is contained in:
Chris Wanstrath 2025-12-29 12:21:44 -08:00
parent 3dba9e6ba6
commit 19771c93be
5 changed files with 14 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
examples/spa/index.html
View File

@ -3,15 +3,12 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/main.css"/>
<title>Forge SPA Examples</title> <title>Forge SPA Examples</title>
<style> <style>
html, body { html, body {
height: 100%;
margin: 0; margin: 0;
} }
#root {
min-height: 100%;
}
</style> </style>
</head> </head>
<body> <body>

2
examples/spa/index.tsx
View File

@ -1,5 +1,5 @@
import { render } from 'hono/jsx/dom' import { render } from 'hono/jsx/dom'
import { App, route } from './app' import { App } from './app'
const root = document.getElementById('root') const root = document.getElementById('root')

2
examples/ssr/helpers.tsx
View File

@ -87,7 +87,7 @@ export const Layout = define({
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{props.title}</title> <title>{props.title}</title>
<Styles /> <link rel="stylesheet" href="/main.css" />
</head> </head>
<Body> <Body>
<Container> <Container>

8
server.tsx
View File

@ -1,12 +1,16 @@
import { Hono } from 'hono' import { Hono } from 'hono'
import { IndexPage, ProfileExamplesPage, ButtonExamplesPage, NavigationExamplesPage, FormExamplesPage } from './examples/ssr/pages' import { IndexPage, ProfileExamplesPage, ButtonExamplesPage, NavigationExamplesPage, FormExamplesPage } from './examples/ssr/pages'
import { LandingPage } from './examples/ssr/landing' import { LandingPage } from './examples/ssr/landing'
import { styles, stylesToCSS } from './src' import { stylesToCSS } from './src'
const app = new Hono() const app = new Hono()
app.get('/', c => c.html(<LandingPage />)) app.get('/', c => c.html(<LandingPage />))
app.get('/main.css', c => c.text(stylesToCSS(), 200, {
'Content-Type': 'text/css; charset=utf-8',
}))
app.get('/ssr', c => c.html(<IndexPage path="/ssr" />)) app.get('/ssr', c => c.html(<IndexPage path="/ssr" />))
app.get('/ssr/profile', c => c.html(<ProfileExamplesPage path="/ssr/profile" />)) app.get('/ssr/profile', c => c.html(<ProfileExamplesPage path="/ssr/profile" />))
@ -17,7 +21,7 @@ app.get('/ssr/navigation', c => c.html(<NavigationExamplesPage path="/ssr/naviga
app.get('/ssr/form', c => c.html(<FormExamplesPage path="/ssr/form" />)) app.get('/ssr/form', c => c.html(<FormExamplesPage path="/ssr/form" />))
app.get('/styles', c => c.text(stylesToCSS(styles))) app.get('/styles', c => c.text(stylesToCSS()))
app.get('/spa/*', async c => c.html(await Bun.file('./examples/spa/index.html').text())) app.get('/spa/*', async c => c.html(await Bun.file('./examples/spa/index.html').text()))

8
src/index.tsx
View File

@ -3,8 +3,9 @@ import { type TagDef, UnitlessProps, NonStyleKeys } from './types'
export const styles: Record<string, Record<string, string>> = {} export const styles: Record<string, Record<string, string>> = {}
// All CSS styles inside <style></style.
// Use w/ SSR: <Styles/> // Use w/ SSR: <Styles/>
export const Styles = () => <style dangerouslySetInnerHTML={{ __html: stylesToCSS(styles) }} /> export const Styles = () => <style dangerouslySetInnerHTML={{ __html: stylesToCSS() }} />
const isBrowser = typeof document !== 'undefined' const isBrowser = typeof document !== 'undefined'
let styleElement: HTMLStyleElement | null = null let styleElement: HTMLStyleElement | null = null
@ -21,10 +22,11 @@ function injectStylesInBrowser() {
document.head.appendChild(styleElement) document.head.appendChild(styleElement)
} }
styleElement.textContent = stylesToCSS(styles) styleElement.textContent = stylesToCSS()
} }
// turns style object into string CSS definition // turns style object into string CSS definition
export function stylesToCSS(styles: Record<string, Record<string, string>>): string { export function stylesToCSS(): string {
let out: string[] = [] let out: string[] = []
for (const [selector, style] of Object.entries(styles)) { for (const [selector, style] of Object.entries(styles)) {