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

react & preact support

Browse Source
This commit is contained in:
Chris Wanstrath 2026-02-01 23:10:22 -08:00
parent 67180bb4f3
commit 82ed03d521
5 changed files with 92 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
README.md
View File

@ -11,6 +11,8 @@
Forge is a typed, local, variant-driven way to organize CSS and create Forge is a typed, local, variant-driven way to organize CSS and create
self-contained TSX components out of discrete parts. self-contained TSX components out of discrete parts.
Works with **React**, **Preact**, and **Hono JSX**.
## css problems ## css problems
- Styles are global and open - anything can override anything anywhere. - Styles are global and open - anything can override anything anywhere.
@ -28,6 +30,42 @@ self-contained TSX components out of discrete parts.
- Themes are easy. - Themes are easy.
- Errors and feedback are provided. - Errors and feedback are provided.
## setup
Install forge and configure your JSX runtime:
```bash
npm install @because/forge
```
Then set `jsxImportSource` in your `tsconfig.json`:
```json
// React
{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "react" } }
// Preact
{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" } }
// Hono
{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "hono/jsx" } }
```
Include the generated CSS in your app:
```tsx
// SSR - render <Styles /> in your <head>
import { Styles } from "@because/forge"
<head>
<Styles />
</head>
// Or get raw CSS string
import { stylesToCSS } from "@because/forge"
const css = stylesToCSS()
```
## examples ## examples
### styles ### styles

38
examples/landing.tsx
View File

@ -319,6 +319,44 @@ const MARKDOWN_CONTENT = `
Forge is a typed, local, variant-driven way to organize CSS and create Forge is a typed, local, variant-driven way to organize CSS and create
self-contained TSX components out of discrete parts. self-contained TSX components out of discrete parts.
Works with **React**, **Preact**, and **Hono JSX**.
## setup
Install forge and configure your JSX runtime:
\`\`\`bash
npm install @because/forge
\`\`\`
Then set \`jsxImportSource\` in your \`tsconfig.json\`:
\`\`\`tsx
// React
{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "react" } }
// Preact
{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "preact" } }
// Hono
{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "hono/jsx" } }
\`\`\`
Include the generated CSS in your app:
\`\`\`tsx
// SSR - render <Styles /> in your <head>
import { Styles } from "@because/forge"
<head>
<Styles />
</head>
// Or get raw CSS string
import { stylesToCSS } from "@because/forge"
const css = stylesToCSS()
\`\`\`
## css problems ## css problems
- Styles are global and open - anything can override anything anywhere. - Styles are global and open - anything can override anything anywhere.

11
package.json
View File

@ -30,5 +30,16 @@
}, },
"peerDependencies": { "peerDependencies": {
"typescript": "^5" "typescript": "^5"
},
"peerDependenciesMeta": {
"react": {
"optional": true
},
"preact": {
"optional": true
},
"hono": {
"optional": true
}
} }
} }

8
src/tests/test_helpers.ts
View File

@ -1,13 +1,13 @@
import { define } from '../index' import { stylesToCSS } from '../index'
// Uses Hono JSX's toString() for tests - framework-specific
export function renderToString(jsx: any): string { export function renderToString(jsx: any): string {
return jsx.toString() return jsx.toString()
} }
// Get generated CSS directly from styles registry
export function getStylesCSS(): string { export function getStylesCSS(): string {
const StylesComponent = define.Styles return stylesToCSS()
const result = StylesComponent() as any
return result.props.dangerouslySetInnerHTML.__html as string
} }
export function parseCSS(css: string): Record<string, Record<string, string>> { export function parseCSS(css: string): Record<string, Record<string, string>> {

1
tsconfig.json
View File

@ -6,6 +6,7 @@
"module": "Preserve", "module": "Preserve",
"moduleDetection": "force", "moduleDetection": "force",
"jsx": "react-jsx", "jsx": "react-jsx",
// Hono for development - consumers override with their JSX runtime (react, preact, etc.)
"jsxImportSource": "hono/jsx", "jsxImportSource": "hono/jsx",
"allowJs": true, "allowJs": true,