typewritingclass-next 0.1.0
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/package.json +35 -0
- package/src/TWCStyles.tsx +33 -0
- package/src/index.ts +3 -0
- package/src/plugin.ts +70 -0
package/package.json
ADDED
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "typewritingclass-next",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"type": "module",
|
|
5
|
+
"exports": {
|
|
6
|
+
".": {
|
|
7
|
+
"types": "./src/index.ts",
|
|
8
|
+
"default": "./src/index.ts"
|
|
9
|
+
},
|
|
10
|
+
"./plugin": {
|
|
11
|
+
"types": "./src/plugin.ts",
|
|
12
|
+
"default": "./src/plugin.ts"
|
|
13
|
+
}
|
|
14
|
+
},
|
|
15
|
+
"files": [
|
|
16
|
+
"src"
|
|
17
|
+
],
|
|
18
|
+
"peerDependencies": {
|
|
19
|
+
"next": "^13 || ^14 || ^15",
|
|
20
|
+
"react": "^18 || ^19",
|
|
21
|
+
"typewritingclass": "0.2.0",
|
|
22
|
+
"typewritingclass-react": "0.2.0"
|
|
23
|
+
},
|
|
24
|
+
"dependencies": {
|
|
25
|
+
"typewritingclass-babel": "0.1.0"
|
|
26
|
+
},
|
|
27
|
+
"devDependencies": {
|
|
28
|
+
"next": "^15.0.0",
|
|
29
|
+
"react": "^19.0.0",
|
|
30
|
+
"@types/react": "^19.0.0",
|
|
31
|
+
"typescript": "^5.7.3",
|
|
32
|
+
"typewritingclass": "0.2.0",
|
|
33
|
+
"typewritingclass-react": "0.2.0"
|
|
34
|
+
}
|
|
35
|
+
}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { getStyleSheet } from 'typewritingclass-react/server'
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Server component that injects typewritingclass CSS into the document head.
|
|
6
|
+
*
|
|
7
|
+
* Place this in your root layout to ensure all styles are included during SSR.
|
|
8
|
+
* This component is safe to use in React Server Components — it has no client-side
|
|
9
|
+
* dependencies.
|
|
10
|
+
*
|
|
11
|
+
* @example app/layout.tsx
|
|
12
|
+
* ```tsx
|
|
13
|
+
* import { TWCStyles } from 'typewritingclass-next'
|
|
14
|
+
*
|
|
15
|
+
* export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
16
|
+
* return (
|
|
17
|
+
* <html>
|
|
18
|
+
* <head>
|
|
19
|
+
* <TWCStyles />
|
|
20
|
+
* </head>
|
|
21
|
+
* <body>{children}</body>
|
|
22
|
+
* </html>
|
|
23
|
+
* )
|
|
24
|
+
* }
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
export function TWCStyles(): React.JSX.Element {
|
|
28
|
+
const css = getStyleSheet()
|
|
29
|
+
return React.createElement('style', {
|
|
30
|
+
'data-twc': '',
|
|
31
|
+
dangerouslySetInnerHTML: { __html: css },
|
|
32
|
+
})
|
|
33
|
+
}
|
package/src/index.ts
ADDED
package/src/plugin.ts
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import type { TwcBabelPluginOptions } from 'typewritingclass-babel'
|
|
2
|
+
|
|
3
|
+
interface NextConfig {
|
|
4
|
+
webpack?: (config: any, context: any) => any
|
|
5
|
+
[key: string]: any
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export interface TwcNextPluginOptions {
|
|
9
|
+
/** Path to write the combined CSS output file. Default: ".next/twc.css" */
|
|
10
|
+
outputFile?: string
|
|
11
|
+
/** Enable strict mode for the compiler. Default: false */
|
|
12
|
+
strict?: boolean
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Next.js plugin that integrates typewritingclass build-time CSS extraction.
|
|
17
|
+
*
|
|
18
|
+
* Configures webpack to run the typewritingclass Babel transform on your source
|
|
19
|
+
* files, extracting static CSS at build time.
|
|
20
|
+
*
|
|
21
|
+
* @example next.config.mjs
|
|
22
|
+
* ```js
|
|
23
|
+
* import { withTwc } from 'typewritingclass-next/plugin'
|
|
24
|
+
*
|
|
25
|
+
* export default withTwc({
|
|
26
|
+
* // your next config
|
|
27
|
+
* })
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @example With options
|
|
31
|
+
* ```js
|
|
32
|
+
* import { withTwc } from 'typewritingclass-next/plugin'
|
|
33
|
+
*
|
|
34
|
+
* export default withTwc({
|
|
35
|
+
* // your next config
|
|
36
|
+
* }, { strict: true })
|
|
37
|
+
* ```
|
|
38
|
+
*/
|
|
39
|
+
export function withTwc(nextConfig: NextConfig = {}, options: TwcNextPluginOptions = {}): NextConfig {
|
|
40
|
+
const babelOptions: TwcBabelPluginOptions = {
|
|
41
|
+
outputFile: options.outputFile ?? '.next/twc.css',
|
|
42
|
+
strict: options.strict ?? false,
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
return {
|
|
46
|
+
...nextConfig,
|
|
47
|
+
webpack(config: any, context: any) {
|
|
48
|
+
// Add the typewritingclass babel plugin to the webpack babel-loader
|
|
49
|
+
config.module.rules.push({
|
|
50
|
+
test: /\.[jt]sx?$/,
|
|
51
|
+
exclude: /node_modules/,
|
|
52
|
+
use: {
|
|
53
|
+
loader: 'babel-loader',
|
|
54
|
+
options: {
|
|
55
|
+
plugins: [
|
|
56
|
+
['typewritingclass-babel', babelOptions],
|
|
57
|
+
],
|
|
58
|
+
},
|
|
59
|
+
},
|
|
60
|
+
})
|
|
61
|
+
|
|
62
|
+
// Call the user's webpack config if they provided one
|
|
63
|
+
if (typeof nextConfig.webpack === 'function') {
|
|
64
|
+
return nextConfig.webpack(config, context)
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return config
|
|
68
|
+
},
|
|
69
|
+
}
|
|
70
|
+
}
|