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

2
examples/spa/index.tsx
View File

@ -1,5 +1,5 @@
import { render } from 'hono/jsx/dom'
import { App, route } from './app'
import { App } from './app'
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 name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{props.title}</title>
<Styles />
<link rel="stylesheet" href="/main.css" />
</head>
<Body>
<Container>

8
server.tsx
View File

@ -1,12 +1,16 @@
import { Hono } from 'hono'
import { IndexPage, ProfileExamplesPage, ButtonExamplesPage, NavigationExamplesPage, FormExamplesPage } from './examples/ssr/pages'
import { LandingPage } from './examples/ssr/landing'
import { styles, stylesToCSS } from './src'
import { stylesToCSS } from './src'
const app = new Hono()
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/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('/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()))

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