@typestyles/next 0.0.0-unstable.015bb9921923
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 +307 -0
- package/dist/build.cjs +89 -0
- package/dist/build.js +63 -0
- package/dist/client.cjs +72 -0
- package/dist/client.js +45 -0
- package/dist/index.cjs +100 -0
- package/dist/index.js +57 -0
- package/dist/server.cjs +52 -0
- package/dist/server.js +15 -0
- package/package.json +88 -0
- package/src/build.d.ts +27 -0
- package/src/build.test.ts +58 -0
- package/src/build.ts +112 -0
- package/src/client.d.ts +37 -0
- package/src/client.tsx +143 -0
- package/src/index.d.ts +15 -0
- package/src/index.tsx +27 -0
- package/src/react-augmentation.d.ts +13 -0
- package/src/server.d.ts +7 -0
- package/src/server.ts +55 -0
package/README.md
ADDED
|
@@ -0,0 +1,307 @@
|
|
|
1
|
+
# @typestyles/next
|
|
2
|
+
|
|
3
|
+
Next.js integration for typestyles with full support for App Router, Pages Router, and React Server Components.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install @typestyles/next typestyles
|
|
9
|
+
# or
|
|
10
|
+
pnpm add @typestyles/next typestyles
|
|
11
|
+
# or
|
|
12
|
+
yarn add @typestyles/next typestyles
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## Requirements
|
|
16
|
+
|
|
17
|
+
- Next.js >= 13.0.0
|
|
18
|
+
- React >= 18.0.0
|
|
19
|
+
- typestyles >= 0.1.0
|
|
20
|
+
|
|
21
|
+
## Quick Start
|
|
22
|
+
|
|
23
|
+
### App Router (Recommended)
|
|
24
|
+
|
|
25
|
+
Import `getRegisteredCss` in your root layout to inject styles during SSR:
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
// app/layout.tsx
|
|
29
|
+
import { getRegisteredCss } from '@typestyles/next';
|
|
30
|
+
|
|
31
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
32
|
+
const css = getRegisteredCss();
|
|
33
|
+
|
|
34
|
+
return (
|
|
35
|
+
<html lang="en">
|
|
36
|
+
<head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
|
|
37
|
+
<body>{children}</body>
|
|
38
|
+
</html>
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
```
|
|
42
|
+
|
|
43
|
+
### Pages Router
|
|
44
|
+
|
|
45
|
+
Wrap your pages with the stylesheet component:
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
// pages/_app.tsx
|
|
49
|
+
import { TypestylesStylesheet } from '@typestyles/next';
|
|
50
|
+
import type { AppProps } from 'next/app';
|
|
51
|
+
|
|
52
|
+
export default function App({ Component, pageProps }: AppProps) {
|
|
53
|
+
return (
|
|
54
|
+
<TypestylesStylesheet>
|
|
55
|
+
<Component {...pageProps} />
|
|
56
|
+
</TypestylesStylesheet>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
## React Server Components (RSC)
|
|
62
|
+
|
|
63
|
+
The package provides multiple approaches for RSC support:
|
|
64
|
+
|
|
65
|
+
### Option 1: Layout SSR (Simplest)
|
|
66
|
+
|
|
67
|
+
Import `getRegisteredCss` in your root layout - this works in both Server and Client Components:
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
// app/layout.tsx
|
|
71
|
+
import { getRegisteredCss } from '@typestyles/next';
|
|
72
|
+
|
|
73
|
+
export default function RootLayout({ children }) {
|
|
74
|
+
const css = getRegisteredCss();
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<html>
|
|
78
|
+
<head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
|
|
79
|
+
<body>{children}</body>
|
|
80
|
+
</html>
|
|
81
|
+
);
|
|
82
|
+
}
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Option 2: Client Component Provider
|
|
86
|
+
|
|
87
|
+
For complex cases with dynamic styles, create a client component wrapper:
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
// components/TypestylesProvider.tsx
|
|
91
|
+
'use client';
|
|
92
|
+
|
|
93
|
+
import { getRegisteredCss } from 'typestyles/server';
|
|
94
|
+
import { useEffect, useState } from 'react';
|
|
95
|
+
|
|
96
|
+
export function TypestylesProvider({ children }) {
|
|
97
|
+
const [css, setCss] = useState('');
|
|
98
|
+
const [mounted, setMounted] = useState(false);
|
|
99
|
+
|
|
100
|
+
useEffect(() => {
|
|
101
|
+
setMounted(true);
|
|
102
|
+
setCss(getRegisteredCss());
|
|
103
|
+
}, []);
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<>
|
|
107
|
+
{children}
|
|
108
|
+
{mounted && css && <style id="typestyles" dangerouslySetInnerHTML={{ __html: css }} />}
|
|
109
|
+
</>
|
|
110
|
+
);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Then use it in your layout:
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
// app/layout.tsx
|
|
118
|
+
import { TypestylesProvider } from '@/components/TypestylesProvider';
|
|
119
|
+
|
|
120
|
+
export default function RootLayout({ children }) {
|
|
121
|
+
return (
|
|
122
|
+
<html>
|
|
123
|
+
<body>
|
|
124
|
+
<TypestylesProvider>{children}</TypestylesProvider>
|
|
125
|
+
</body>
|
|
126
|
+
</html>
|
|
127
|
+
);
|
|
128
|
+
}
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
### Option 3: Collecting from a specific component tree
|
|
132
|
+
|
|
133
|
+
`getTypestylesMetadata` (alias of `collectStylesFromComponent`) renders a React element on the server and returns the CSS registered during that render. Use it when you need CSS scoped to a subtree rather than the whole app. For App Router pages, injecting the result still belongs in `layout.tsx` / `<head>` (Next.js `Metadata` does not provide a supported hook for arbitrary `<style>` payloads).
|
|
134
|
+
|
|
135
|
+
```tsx
|
|
136
|
+
import { getTypestylesMetadata } from '@typestyles/next/server';
|
|
137
|
+
import { Home } from './Home';
|
|
138
|
+
|
|
139
|
+
const css = await getTypestylesMetadata(<Home />);
|
|
140
|
+
// Pass `css` into your layout <style> or streaming head pipeline.
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
## Build-time CSS + Turbopack
|
|
144
|
+
|
|
145
|
+
To ship a static `typestyles.css` and avoid client-side `<style>` injection (uses `typestyles/build` under the hood):
|
|
146
|
+
|
|
147
|
+
1. Run `buildTypestylesForNext` before `next build` to emit CSS (and optional manifest).
|
|
148
|
+
2. Import that CSS from your root layout (e.g. `import './typestyles.css'`).
|
|
149
|
+
3. Wrap config with `withTypestylesExtract` from `@typestyles/next/build`.
|
|
150
|
+
|
|
151
|
+
`withTypestylesExtract` sets **`NEXT_PUBLIC_TYPESTYLES_RUNTIME_DISABLED`** via `next.config` `env` (works with **webpack and Turbopack**) and adds webpack **`DefinePlugin`** for `__TYPESTYLES_RUNTIME_DISABLED__` on client bundles when webpack runs. Example app: `examples/next-app`.
|
|
152
|
+
|
|
153
|
+
## API Reference
|
|
154
|
+
|
|
155
|
+
### getRegisteredCss
|
|
156
|
+
|
|
157
|
+
Returns all currently registered CSS as a string. This is the simplest way to get styles for SSR.
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
import { getRegisteredCss } from '@typestyles/next';
|
|
161
|
+
|
|
162
|
+
const css = getRegisteredCss();
|
|
163
|
+
```
|
|
164
|
+
|
|
165
|
+
### collectStylesFromComponent
|
|
166
|
+
|
|
167
|
+
Collect styles from a React component tree. Useful when you need explicit control over style collection.
|
|
168
|
+
|
|
169
|
+
```tsx
|
|
170
|
+
import { collectStylesFromComponent } from '@typestyles/next/server';
|
|
171
|
+
import { YourComponent } from './YourComponent';
|
|
172
|
+
|
|
173
|
+
const css = await collectStylesFromComponent(<YourComponent />);
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### getTypestylesMetadata
|
|
177
|
+
|
|
178
|
+
Same as `collectStylesFromComponent` — renders the given element on the server and returns registered CSS. Use when you want a dedicated name for “CSS for this subtree.”
|
|
179
|
+
|
|
180
|
+
```tsx
|
|
181
|
+
import { getTypestylesMetadata } from '@typestyles/next/server';
|
|
182
|
+
import { Home } from './Home';
|
|
183
|
+
|
|
184
|
+
const css = await getTypestylesMetadata(<Home />);
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
### TypestylesStylesheet (Pages Router)
|
|
188
|
+
|
|
189
|
+
A React component that renders typestyles CSS. Works with Pages Router.
|
|
190
|
+
|
|
191
|
+
```tsx
|
|
192
|
+
import { TypestylesStylesheet } from '@typestyles/next';
|
|
193
|
+
|
|
194
|
+
<TypestylesStylesheet>
|
|
195
|
+
<YourApp />
|
|
196
|
+
</TypestylesStylesheet>;
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
## Examples
|
|
200
|
+
|
|
201
|
+
### Basic Usage with App Router
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
// app/page.tsx
|
|
205
|
+
import { styles } from 'typestyles';
|
|
206
|
+
|
|
207
|
+
const button = styles.create('button', {
|
|
208
|
+
base: {
|
|
209
|
+
padding: '12px 24px',
|
|
210
|
+
backgroundColor: '#0066ff',
|
|
211
|
+
color: 'white',
|
|
212
|
+
border: 'none',
|
|
213
|
+
borderRadius: '6px',
|
|
214
|
+
cursor: 'pointer',
|
|
215
|
+
},
|
|
216
|
+
});
|
|
217
|
+
|
|
218
|
+
export default function Home() {
|
|
219
|
+
return (
|
|
220
|
+
<main>
|
|
221
|
+
<button className={button('base')}>Click me</button>
|
|
222
|
+
</main>
|
|
223
|
+
);
|
|
224
|
+
}
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
### With Design Tokens
|
|
228
|
+
|
|
229
|
+
```tsx
|
|
230
|
+
// app/tokens.ts
|
|
231
|
+
import { tokens } from 'typestyles';
|
|
232
|
+
|
|
233
|
+
export const colors = tokens.create('color', {
|
|
234
|
+
primary: '#0066ff',
|
|
235
|
+
secondary: '#64748b',
|
|
236
|
+
});
|
|
237
|
+
|
|
238
|
+
export const spacing = tokens.create('space', {
|
|
239
|
+
sm: '8px',
|
|
240
|
+
md: '16px',
|
|
241
|
+
lg: '24px',
|
|
242
|
+
});
|
|
243
|
+
|
|
244
|
+
// app/page.tsx
|
|
245
|
+
import { styles } from 'typestyles';
|
|
246
|
+
import { colors, spacing } from './tokens';
|
|
247
|
+
|
|
248
|
+
const card = styles.create('card', {
|
|
249
|
+
base: {
|
|
250
|
+
padding: spacing.md,
|
|
251
|
+
backgroundColor: colors.primary,
|
|
252
|
+
borderRadius: '8px',
|
|
253
|
+
},
|
|
254
|
+
});
|
|
255
|
+
|
|
256
|
+
export default function Page() {
|
|
257
|
+
return <div className={card('base')}>Hello World</div>;
|
|
258
|
+
}
|
|
259
|
+
```
|
|
260
|
+
|
|
261
|
+
### With Dark Mode
|
|
262
|
+
|
|
263
|
+
```tsx
|
|
264
|
+
// app/layout.tsx
|
|
265
|
+
import { tokens } from 'typestyles';
|
|
266
|
+
import { getRegisteredCss } from '@typestyles/next';
|
|
267
|
+
|
|
268
|
+
const darkTheme = tokens.createTheme('dark', {
|
|
269
|
+
color: {
|
|
270
|
+
background: '#1a1a1a',
|
|
271
|
+
text: '#ffffff',
|
|
272
|
+
},
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
export default function RootLayout({ children }) {
|
|
276
|
+
const css = getRegisteredCss();
|
|
277
|
+
|
|
278
|
+
return (
|
|
279
|
+
<html className={darkTheme}>
|
|
280
|
+
<head>{css && <style dangerouslySetInnerHTML={{ __html: css }} />}</head>
|
|
281
|
+
<body>{children}</body>
|
|
282
|
+
</html>
|
|
283
|
+
);
|
|
284
|
+
}
|
|
285
|
+
```
|
|
286
|
+
|
|
287
|
+
## Troubleshooting
|
|
288
|
+
|
|
289
|
+
### Flash of Unstyled Content (FOUC)
|
|
290
|
+
|
|
291
|
+
If you see a flash of unstyled content, ensure `getRegisteredCss()` is called in the layout and styles are injected before the body renders.
|
|
292
|
+
|
|
293
|
+
### Styles not appearing
|
|
294
|
+
|
|
295
|
+
Make sure `typestyles` is installed in your project:
|
|
296
|
+
|
|
297
|
+
```bash
|
|
298
|
+
npm install typestyles
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
### TypeScript errors
|
|
302
|
+
|
|
303
|
+
Ensure you have `"moduleResolution": "bundler"` or `"node"` in your `tsconfig.json`.
|
|
304
|
+
|
|
305
|
+
## License
|
|
306
|
+
|
|
307
|
+
MIT
|
package/dist/build.cjs
ADDED
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/build.ts
|
|
21
|
+
var build_exports = {};
|
|
22
|
+
__export(build_exports, {
|
|
23
|
+
buildTypestylesForNext: () => buildTypestylesForNext,
|
|
24
|
+
withTypestylesExtract: () => withTypestylesExtract
|
|
25
|
+
});
|
|
26
|
+
module.exports = __toCommonJS(build_exports);
|
|
27
|
+
var import_promises = require("fs/promises");
|
|
28
|
+
var import_node_module = require("module");
|
|
29
|
+
var import_node_path = require("path");
|
|
30
|
+
var import_node_url = require("url");
|
|
31
|
+
var import_build = require("typestyles/build");
|
|
32
|
+
async function buildTypestylesForNext(options) {
|
|
33
|
+
const { root, modules, cssOutFile, manifestOutFile, manifestCssPath } = options;
|
|
34
|
+
const loaders = modules.map((mod) => {
|
|
35
|
+
const abs = (0, import_node_path.resolve)(root, mod);
|
|
36
|
+
const href = (0, import_node_url.pathToFileURL)(abs).href;
|
|
37
|
+
return () => import(href);
|
|
38
|
+
});
|
|
39
|
+
const css = await (0, import_build.collectStylesFromModules)(loaders);
|
|
40
|
+
const outAbs = (0, import_node_path.resolve)(root, cssOutFile);
|
|
41
|
+
await (0, import_promises.mkdir)((0, import_node_path.dirname)(outAbs), { recursive: true });
|
|
42
|
+
await (0, import_promises.writeFile)(outAbs, css, "utf8");
|
|
43
|
+
if (manifestOutFile) {
|
|
44
|
+
const manifest = {
|
|
45
|
+
version: 1,
|
|
46
|
+
css: manifestCssPath ?? cssOutFile
|
|
47
|
+
};
|
|
48
|
+
const manAbs = (0, import_node_path.resolve)(root, manifestOutFile);
|
|
49
|
+
await (0, import_promises.mkdir)((0, import_node_path.dirname)(manAbs), { recursive: true });
|
|
50
|
+
await (0, import_promises.writeFile)(manAbs, `${JSON.stringify(manifest, null, 2)}
|
|
51
|
+
`, "utf8");
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
function withTypestylesExtract(nextConfig = {}, options = {}) {
|
|
55
|
+
const disableClientRuntime = options.disableClientRuntime !== false;
|
|
56
|
+
return {
|
|
57
|
+
...nextConfig,
|
|
58
|
+
...disableClientRuntime ? {
|
|
59
|
+
env: {
|
|
60
|
+
...typeof nextConfig.env === "object" && nextConfig.env !== null && !Array.isArray(nextConfig.env) ? nextConfig.env : {},
|
|
61
|
+
NEXT_PUBLIC_TYPESTYLES_RUNTIME_DISABLED: "true"
|
|
62
|
+
}
|
|
63
|
+
} : {},
|
|
64
|
+
webpack(config, context) {
|
|
65
|
+
const nextWebpack = typeof nextConfig.webpack === "function" ? nextConfig.webpack(config, context) : config;
|
|
66
|
+
if (disableClientRuntime && !context.isServer) {
|
|
67
|
+
try {
|
|
68
|
+
const require2 = (0, import_node_module.createRequire)((0, import_node_path.join)(process.cwd(), "package.json"));
|
|
69
|
+
const webpackLib = require2("webpack");
|
|
70
|
+
nextWebpack.plugins.push(
|
|
71
|
+
new webpackLib.DefinePlugin({
|
|
72
|
+
__TYPESTYLES_RUNTIME_DISABLED__: JSON.stringify("true")
|
|
73
|
+
})
|
|
74
|
+
);
|
|
75
|
+
} catch {
|
|
76
|
+
console.warn(
|
|
77
|
+
"[@typestyles/next/build] Could not load webpack; client bundles may still inject <style>."
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
return nextWebpack;
|
|
82
|
+
}
|
|
83
|
+
};
|
|
84
|
+
}
|
|
85
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
86
|
+
0 && (module.exports = {
|
|
87
|
+
buildTypestylesForNext,
|
|
88
|
+
withTypestylesExtract
|
|
89
|
+
});
|
package/dist/build.js
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
// src/build.ts
|
|
2
|
+
import { mkdir, writeFile } from "fs/promises";
|
|
3
|
+
import { createRequire } from "module";
|
|
4
|
+
import { dirname, join, resolve } from "path";
|
|
5
|
+
import { pathToFileURL } from "url";
|
|
6
|
+
import { collectStylesFromModules } from "typestyles/build";
|
|
7
|
+
async function buildTypestylesForNext(options) {
|
|
8
|
+
const { root, modules, cssOutFile, manifestOutFile, manifestCssPath } = options;
|
|
9
|
+
const loaders = modules.map((mod) => {
|
|
10
|
+
const abs = resolve(root, mod);
|
|
11
|
+
const href = pathToFileURL(abs).href;
|
|
12
|
+
return () => import(href);
|
|
13
|
+
});
|
|
14
|
+
const css = await collectStylesFromModules(loaders);
|
|
15
|
+
const outAbs = resolve(root, cssOutFile);
|
|
16
|
+
await mkdir(dirname(outAbs), { recursive: true });
|
|
17
|
+
await writeFile(outAbs, css, "utf8");
|
|
18
|
+
if (manifestOutFile) {
|
|
19
|
+
const manifest = {
|
|
20
|
+
version: 1,
|
|
21
|
+
css: manifestCssPath ?? cssOutFile
|
|
22
|
+
};
|
|
23
|
+
const manAbs = resolve(root, manifestOutFile);
|
|
24
|
+
await mkdir(dirname(manAbs), { recursive: true });
|
|
25
|
+
await writeFile(manAbs, `${JSON.stringify(manifest, null, 2)}
|
|
26
|
+
`, "utf8");
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
function withTypestylesExtract(nextConfig = {}, options = {}) {
|
|
30
|
+
const disableClientRuntime = options.disableClientRuntime !== false;
|
|
31
|
+
return {
|
|
32
|
+
...nextConfig,
|
|
33
|
+
...disableClientRuntime ? {
|
|
34
|
+
env: {
|
|
35
|
+
...typeof nextConfig.env === "object" && nextConfig.env !== null && !Array.isArray(nextConfig.env) ? nextConfig.env : {},
|
|
36
|
+
NEXT_PUBLIC_TYPESTYLES_RUNTIME_DISABLED: "true"
|
|
37
|
+
}
|
|
38
|
+
} : {},
|
|
39
|
+
webpack(config, context) {
|
|
40
|
+
const nextWebpack = typeof nextConfig.webpack === "function" ? nextConfig.webpack(config, context) : config;
|
|
41
|
+
if (disableClientRuntime && !context.isServer) {
|
|
42
|
+
try {
|
|
43
|
+
const require2 = createRequire(join(process.cwd(), "package.json"));
|
|
44
|
+
const webpackLib = require2("webpack");
|
|
45
|
+
nextWebpack.plugins.push(
|
|
46
|
+
new webpackLib.DefinePlugin({
|
|
47
|
+
__TYPESTYLES_RUNTIME_DISABLED__: JSON.stringify("true")
|
|
48
|
+
})
|
|
49
|
+
);
|
|
50
|
+
} catch {
|
|
51
|
+
console.warn(
|
|
52
|
+
"[@typestyles/next/build] Could not load webpack; client bundles may still inject <style>."
|
|
53
|
+
);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return nextWebpack;
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
}
|
|
60
|
+
export {
|
|
61
|
+
buildTypestylesForNext,
|
|
62
|
+
withTypestylesExtract
|
|
63
|
+
};
|
package/dist/client.cjs
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
20
|
+
|
|
21
|
+
// src/client.tsx
|
|
22
|
+
var client_exports = {};
|
|
23
|
+
__export(client_exports, {
|
|
24
|
+
TypestylesStylesheet: () => TypestylesStylesheet,
|
|
25
|
+
createTypestylesLayout: () => createTypestylesLayout,
|
|
26
|
+
useServerInsertedHTML: () => import_react.useServerInsertedHTML,
|
|
27
|
+
useTypestyles: () => useTypestyles
|
|
28
|
+
});
|
|
29
|
+
module.exports = __toCommonJS(client_exports);
|
|
30
|
+
var import_react = require("react");
|
|
31
|
+
var import_server = require("typestyles/server");
|
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
+
function useTypestyles() {
|
|
34
|
+
return (0, import_react.useSyncExternalStore)(
|
|
35
|
+
() => () => {
|
|
36
|
+
},
|
|
37
|
+
() => (0, import_server.getRegisteredCss)(),
|
|
38
|
+
() => ""
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
function TypestylesStylesheet({ children }) {
|
|
42
|
+
const [css, setCss] = (0, import_react.useState)("");
|
|
43
|
+
(0, import_react.useServerInsertedHTML)(() => {
|
|
44
|
+
const registeredCss = (0, import_server.getRegisteredCss)();
|
|
45
|
+
if (registeredCss) {
|
|
46
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
|
|
47
|
+
}
|
|
48
|
+
return null;
|
|
49
|
+
});
|
|
50
|
+
(0, import_react.useEffect)(() => {
|
|
51
|
+
setCss((0, import_server.getRegisteredCss)());
|
|
52
|
+
}, []);
|
|
53
|
+
if (children) {
|
|
54
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
55
|
+
children,
|
|
56
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
|
|
57
|
+
] });
|
|
58
|
+
}
|
|
59
|
+
return null;
|
|
60
|
+
}
|
|
61
|
+
function createTypestylesLayout(layout) {
|
|
62
|
+
return function TypestylesLayout(props) {
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypestylesStylesheet, { children: layout(props) });
|
|
64
|
+
};
|
|
65
|
+
}
|
|
66
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
67
|
+
0 && (module.exports = {
|
|
68
|
+
TypestylesStylesheet,
|
|
69
|
+
createTypestylesLayout,
|
|
70
|
+
useServerInsertedHTML,
|
|
71
|
+
useTypestyles
|
|
72
|
+
});
|
package/dist/client.js
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/client.tsx
|
|
4
|
+
import { useState, useEffect, useServerInsertedHTML, useSyncExternalStore } from "react";
|
|
5
|
+
import { getRegisteredCss } from "typestyles/server";
|
|
6
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
+
function useTypestyles() {
|
|
8
|
+
return useSyncExternalStore(
|
|
9
|
+
() => () => {
|
|
10
|
+
},
|
|
11
|
+
() => getRegisteredCss(),
|
|
12
|
+
() => ""
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
function TypestylesStylesheet({ children }) {
|
|
16
|
+
const [css, setCss] = useState("");
|
|
17
|
+
useServerInsertedHTML(() => {
|
|
18
|
+
const registeredCss = getRegisteredCss();
|
|
19
|
+
if (registeredCss) {
|
|
20
|
+
return /* @__PURE__ */ jsx("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
|
|
21
|
+
}
|
|
22
|
+
return null;
|
|
23
|
+
});
|
|
24
|
+
useEffect(() => {
|
|
25
|
+
setCss(getRegisteredCss());
|
|
26
|
+
}, []);
|
|
27
|
+
if (children) {
|
|
28
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
29
|
+
children,
|
|
30
|
+
/* @__PURE__ */ jsx("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
|
|
31
|
+
] });
|
|
32
|
+
}
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
function createTypestylesLayout(layout) {
|
|
36
|
+
return function TypestylesLayout(props) {
|
|
37
|
+
return /* @__PURE__ */ jsx(TypestylesStylesheet, { children: layout(props) });
|
|
38
|
+
};
|
|
39
|
+
}
|
|
40
|
+
export {
|
|
41
|
+
TypestylesStylesheet,
|
|
42
|
+
createTypestylesLayout,
|
|
43
|
+
useServerInsertedHTML,
|
|
44
|
+
useTypestyles
|
|
45
|
+
};
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// src/index.tsx
|
|
31
|
+
var index_exports = {};
|
|
32
|
+
__export(index_exports, {
|
|
33
|
+
TypestylesStylesheet: () => TypestylesStylesheet,
|
|
34
|
+
collectStylesFromComponent: () => collectStylesFromComponent,
|
|
35
|
+
createTypestylesLayout: () => createTypestylesLayout,
|
|
36
|
+
getRegisteredCss: () => import_server.getRegisteredCss,
|
|
37
|
+
getTypestylesMetadata: () => getTypestylesMetadata,
|
|
38
|
+
useServerInsertedHTML: () => import_react.useServerInsertedHTML,
|
|
39
|
+
useTypestyles: () => useTypestyles
|
|
40
|
+
});
|
|
41
|
+
module.exports = __toCommonJS(index_exports);
|
|
42
|
+
|
|
43
|
+
// src/server.ts
|
|
44
|
+
var import_server = require("typestyles/server");
|
|
45
|
+
async function collectStylesFromComponent(component) {
|
|
46
|
+
const { renderToString } = await import("react-dom/server");
|
|
47
|
+
const { css } = (0, import_server.collectStyles)(() => renderToString(component));
|
|
48
|
+
return css;
|
|
49
|
+
}
|
|
50
|
+
async function getTypestylesMetadata(component) {
|
|
51
|
+
return collectStylesFromComponent(component);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// src/client.tsx
|
|
55
|
+
var import_react = require("react");
|
|
56
|
+
var import_server2 = require("typestyles/server");
|
|
57
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
58
|
+
function useTypestyles() {
|
|
59
|
+
return (0, import_react.useSyncExternalStore)(
|
|
60
|
+
() => () => {
|
|
61
|
+
},
|
|
62
|
+
() => (0, import_server2.getRegisteredCss)(),
|
|
63
|
+
() => ""
|
|
64
|
+
);
|
|
65
|
+
}
|
|
66
|
+
function TypestylesStylesheet({ children }) {
|
|
67
|
+
const [css, setCss] = (0, import_react.useState)("");
|
|
68
|
+
(0, import_react.useServerInsertedHTML)(() => {
|
|
69
|
+
const registeredCss = (0, import_server2.getRegisteredCss)();
|
|
70
|
+
if (registeredCss) {
|
|
71
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles", dangerouslySetInnerHTML: { __html: registeredCss } });
|
|
72
|
+
}
|
|
73
|
+
return null;
|
|
74
|
+
});
|
|
75
|
+
(0, import_react.useEffect)(() => {
|
|
76
|
+
setCss((0, import_server2.getRegisteredCss)());
|
|
77
|
+
}, []);
|
|
78
|
+
if (children) {
|
|
79
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
80
|
+
children,
|
|
81
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { id: "typestyles-client", dangerouslySetInnerHTML: { __html: css } })
|
|
82
|
+
] });
|
|
83
|
+
}
|
|
84
|
+
return null;
|
|
85
|
+
}
|
|
86
|
+
function createTypestylesLayout(layout) {
|
|
87
|
+
return function TypestylesLayout(props) {
|
|
88
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TypestylesStylesheet, { children: layout(props) });
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
92
|
+
0 && (module.exports = {
|
|
93
|
+
TypestylesStylesheet,
|
|
94
|
+
collectStylesFromComponent,
|
|
95
|
+
createTypestylesLayout,
|
|
96
|
+
getRegisteredCss,
|
|
97
|
+
getTypestylesMetadata,
|
|
98
|
+
useServerInsertedHTML,
|
|
99
|
+
useTypestyles
|
|
100
|
+
});
|