typewritingclass-next 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +88 -0
- package/package.json +11 -6
- package/src/plugin.ts +2 -2
package/README.md
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
# typewritingclass-next
|
|
2
|
+
|
|
3
|
+
Next.js integration for Typewriting Class. Provides SSR style injection, a `useStyle` hook re-export, and an optional build-time CSS extraction plugin via Babel.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
bun add typewritingclass typewritingclass-react typewritingclass-next
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
Requires `next` (13-15), `react` (18 or 19), `typewritingclass`, and `typewritingclass-react` as peer dependencies.
|
|
12
|
+
|
|
13
|
+
## Root layout
|
|
14
|
+
|
|
15
|
+
Add `<TWCStyles />` in `<head>` for SSR styles:
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
// app/layout.tsx
|
|
19
|
+
import { TWCStyles } from 'typewritingclass-next'
|
|
20
|
+
|
|
21
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
22
|
+
return (
|
|
23
|
+
<html lang="en">
|
|
24
|
+
<head>
|
|
25
|
+
<TWCStyles />
|
|
26
|
+
</head>
|
|
27
|
+
<body>{children}</body>
|
|
28
|
+
</html>
|
|
29
|
+
)
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
`TWCStyles` is a Server Component that renders a `<style data-twc>` tag with all registered CSS.
|
|
34
|
+
|
|
35
|
+
## Server Components
|
|
36
|
+
|
|
37
|
+
Use `tw` directly -- no hooks, no client boundary:
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { tw } from 'typewritingclass'
|
|
41
|
+
|
|
42
|
+
export default function Home() {
|
|
43
|
+
return <h1 className={tw.text('2xl').font('700').textColor('slate-900')}>Hello</h1>
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Client Components
|
|
48
|
+
|
|
49
|
+
For dynamic values, use `useStyle()`:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
'use client'
|
|
53
|
+
|
|
54
|
+
import { useStyle } from 'typewritingclass-next'
|
|
55
|
+
import { p, bg, rounded, dynamic } from 'typewritingclass'
|
|
56
|
+
|
|
57
|
+
export function Banner({ color }: { color: string }) {
|
|
58
|
+
const props = useStyle(p(6), bg(dynamic(color)), rounded('lg'))
|
|
59
|
+
return <div {...props}>Welcome!</div>
|
|
60
|
+
}
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
## Build-time extraction (optional)
|
|
64
|
+
|
|
65
|
+
Wrap your Next config with `withTwc` to extract CSS at build time:
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
// next.config.mjs
|
|
69
|
+
import { withTwc } from 'typewritingclass-next/plugin'
|
|
70
|
+
|
|
71
|
+
export default withTwc({
|
|
72
|
+
// your Next.js config
|
|
73
|
+
})
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Options
|
|
77
|
+
|
|
78
|
+
| Option | Type | Default | Description |
|
|
79
|
+
|---|---|---|---|
|
|
80
|
+
| `outputFile` | `string` | `".next/twc.css"` | Path for extracted CSS |
|
|
81
|
+
| `strict` | `boolean` | `false` | Error on non-static `cx()` args |
|
|
82
|
+
|
|
83
|
+
## Exports
|
|
84
|
+
|
|
85
|
+
| Path | Contents |
|
|
86
|
+
|---|---|
|
|
87
|
+
| `typewritingclass-next` | `TWCStyles`, `useStyle`, `getStyleSheet`, `getStyleTag` |
|
|
88
|
+
| `typewritingclass-next/plugin` | `withTwc()` Next.js config wrapper |
|
package/package.json
CHANGED
|
@@ -1,7 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "typewritingclass-next",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"type": "module",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/corysimmons/typewritingclass",
|
|
8
|
+
"directory": "packages/typewritingclass-next"
|
|
9
|
+
},
|
|
5
10
|
"exports": {
|
|
6
11
|
".": {
|
|
7
12
|
"types": "./src/index.ts",
|
|
@@ -18,18 +23,18 @@
|
|
|
18
23
|
"peerDependencies": {
|
|
19
24
|
"next": "^13 || ^14 || ^15",
|
|
20
25
|
"react": "^18 || ^19",
|
|
21
|
-
"typewritingclass": "0.2.0",
|
|
22
|
-
"typewritingclass
|
|
26
|
+
"typewritingclass-react": "0.2.0",
|
|
27
|
+
"typewritingclass": "0.2.2"
|
|
23
28
|
},
|
|
24
29
|
"dependencies": {
|
|
25
|
-
"typewritingclass-babel": "0.1.
|
|
30
|
+
"typewritingclass-babel": "0.1.2"
|
|
26
31
|
},
|
|
27
32
|
"devDependencies": {
|
|
28
33
|
"next": "^15.0.0",
|
|
29
34
|
"react": "^19.0.0",
|
|
30
35
|
"@types/react": "^19.0.0",
|
|
31
36
|
"typescript": "^5.7.3",
|
|
32
|
-
"typewritingclass": "0.2.0",
|
|
33
|
-
"typewritingclass
|
|
37
|
+
"typewritingclass-react": "0.2.0",
|
|
38
|
+
"typewritingclass": "0.2.2"
|
|
34
39
|
}
|
|
35
40
|
}
|
package/src/plugin.ts
CHANGED
|
@@ -8,7 +8,7 @@ interface NextConfig {
|
|
|
8
8
|
export interface TwcNextPluginOptions {
|
|
9
9
|
/** Path to write the combined CSS output file. Default: ".next/twc.css" */
|
|
10
10
|
outputFile?: string
|
|
11
|
-
/** Enable strict mode for the compiler. Default:
|
|
11
|
+
/** Enable strict mode for the compiler. Default: true */
|
|
12
12
|
strict?: boolean
|
|
13
13
|
}
|
|
14
14
|
|
|
@@ -39,7 +39,7 @@ export interface TwcNextPluginOptions {
|
|
|
39
39
|
export function withTwc(nextConfig: NextConfig = {}, options: TwcNextPluginOptions = {}): NextConfig {
|
|
40
40
|
const babelOptions: TwcBabelPluginOptions = {
|
|
41
41
|
outputFile: options.outputFile ?? '.next/twc.css',
|
|
42
|
-
strict: options.strict ??
|
|
42
|
+
strict: options.strict ?? true,
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
return {
|