simplestyle-js 4.3.0 → 4.3.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 +162 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,10 +12,12 @@ A concise guide to the core `simplestyle-js` APIs, how they fit together, and ho
|
|
|
12
12
|
## Table of Contents
|
|
13
13
|
- [Install](#install)
|
|
14
14
|
- [Quick Start](#quick-start)
|
|
15
|
-
- [API Reference](#api-reference
|
|
15
|
+
- [API Reference](#api-reference)
|
|
16
16
|
- [Patterns and Tips](#patterns-and-tips)
|
|
17
17
|
- [SSR](#ssr)
|
|
18
|
-
- [
|
|
18
|
+
- [Next.js](#nextjs)
|
|
19
|
+
- [Astro](#astro)
|
|
20
|
+
- [SSR steps for most SSR / SSG frameworks](#ssr-steps-for-most-ssr--ssg-frameworks)
|
|
19
21
|
- [1. Set your seed, create a SimpleStyleRegistry and your style functions](#1-set-your-seed-create-a-simplestyleregistry-and-your-style-functions)
|
|
20
22
|
- [2. Render the generated styles in your HTML](#2-render-the-generated-styles-in-your-html)
|
|
21
23
|
- [3. Create your styles and have fun!](#3-create-your-styles-and-have-fun)
|
|
@@ -131,6 +133,163 @@ Rules support nested selectors via `&`, media queries, and `$className` back-ref
|
|
|
131
133
|
|
|
132
134
|
## SSR
|
|
133
135
|
|
|
136
|
+
### Next.js
|
|
137
|
+
|
|
138
|
+
Create your style registry and scoped CSS functions, then use the official Next.js integration here and wrap the `SimpleStyleProvider` around your `layout` file.
|
|
139
|
+
|
|
140
|
+
```typescript
|
|
141
|
+
// src/styleRegistry.ts
|
|
142
|
+
|
|
143
|
+
import { makeCreateStyles, makeKeyframes, setSeed } from "simplestyle-js";
|
|
144
|
+
import { SimpleStyleRegistry } from "simplestyle-js/simpleStyleRegistry";
|
|
145
|
+
|
|
146
|
+
// ensures deterministic creation of CSS classnames
|
|
147
|
+
setSeed(11223344);
|
|
148
|
+
|
|
149
|
+
export const StyleRegistry = new SimpleStyleRegistry();
|
|
150
|
+
|
|
151
|
+
export const createStyles = makeCreateStyles(StyleRegistry);
|
|
152
|
+
export const keyframes = makeKeyframes(StyleRegistry);
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
```tsx
|
|
156
|
+
// src/app/layout.tsx
|
|
157
|
+
import type { Metadata } from "next";
|
|
158
|
+
import { SimpleStyleProvider } from "simplestyle-js/next";
|
|
159
|
+
import { createStyles, StyleRegistry } from "./styleRegistry";
|
|
160
|
+
|
|
161
|
+
// start writing CSS!
|
|
162
|
+
const { classes } = createStyles('RootLayoutStyles', {
|
|
163
|
+
rootLayout: {
|
|
164
|
+
backgroundColor: 'pink',
|
|
165
|
+
padding: '1rem',
|
|
166
|
+
},
|
|
167
|
+
});
|
|
168
|
+
|
|
169
|
+
export default function RootLayout({
|
|
170
|
+
children,
|
|
171
|
+
}: Readonly<{
|
|
172
|
+
children: React.ReactNode;
|
|
173
|
+
}>) {
|
|
174
|
+
return (
|
|
175
|
+
<html lang="en">
|
|
176
|
+
<body className={classes.rootLayout}>
|
|
177
|
+
<SimpleStyleProvider registry={StyleRegistry}>
|
|
178
|
+
{children}
|
|
179
|
+
</SimpleStyleProvider>
|
|
180
|
+
</body>
|
|
181
|
+
</html>
|
|
182
|
+
);
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
Check out this [Code Sandbox w/Next.js integration to see how it works](https://codesandbox.io/p/devbox/t3smf4).
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
### Astro
|
|
190
|
+
|
|
191
|
+
Create your style registry and scoped CSS functions, then use the official Astro integration here and wrap the `SimpleStyleProvider` around your page's `<head />` contents.
|
|
192
|
+
|
|
193
|
+
```typescript
|
|
194
|
+
// src/styleRegistry.ts
|
|
195
|
+
|
|
196
|
+
import { makeCreateStyles, makeKeyframes, setSeed } from "simplestyle-js";
|
|
197
|
+
import { SimpleStyleRegistry } from "simplestyle-js/simpleStyleRegistry";
|
|
198
|
+
|
|
199
|
+
// ensures deterministic creation of CSS classnames
|
|
200
|
+
setSeed(11223344);
|
|
201
|
+
|
|
202
|
+
export const StyleRegistry = new SimpleStyleRegistry();
|
|
203
|
+
|
|
204
|
+
export const createStyles = makeCreateStyles(StyleRegistry);
|
|
205
|
+
export const keyframes = makeKeyframes(StyleRegistry);
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
```astro
|
|
209
|
+
---
|
|
210
|
+
import SimpleStyleProvider from "simplestyle-js/astro/SimpleStyleProvider";
|
|
211
|
+
|
|
212
|
+
import {
|
|
213
|
+
StyleRegistry,
|
|
214
|
+
createStyles,
|
|
215
|
+
keyframes,
|
|
216
|
+
rawStyles,
|
|
217
|
+
} from "../styleRegistry";
|
|
218
|
+
|
|
219
|
+
rawStyles("basic-css-reset", {
|
|
220
|
+
"*": {
|
|
221
|
+
boxSizing: "border-box",
|
|
222
|
+
},
|
|
223
|
+
"body, html": {
|
|
224
|
+
fontFamily: "sans-serif",
|
|
225
|
+
fontSize: "16px",
|
|
226
|
+
padding: 0,
|
|
227
|
+
},
|
|
228
|
+
});
|
|
229
|
+
|
|
230
|
+
// make changes to me and I will hot reload!
|
|
231
|
+
const { keyframe } = keyframes("HomePage", {
|
|
232
|
+
"0%": {
|
|
233
|
+
backgroundColor: "#cc2222cc",
|
|
234
|
+
},
|
|
235
|
+
"33%": {
|
|
236
|
+
backgroundColor: "#22cc22cc",
|
|
237
|
+
},
|
|
238
|
+
"66%": {
|
|
239
|
+
backgroundColor: "#2222cccc",
|
|
240
|
+
},
|
|
241
|
+
"100%": {
|
|
242
|
+
backgroundColor: "#cc2222cc",
|
|
243
|
+
},
|
|
244
|
+
});
|
|
245
|
+
|
|
246
|
+
const { classes } = createStyles("HomePage", {
|
|
247
|
+
background: {
|
|
248
|
+
alignItems: "center",
|
|
249
|
+
animation: `${keyframe} 5s linear infinite`,
|
|
250
|
+
display: "flex",
|
|
251
|
+
flexFlow: "column",
|
|
252
|
+
height: "90vh",
|
|
253
|
+
justifyContent: "center",
|
|
254
|
+
margin: "0 auto",
|
|
255
|
+
width: "90vw",
|
|
256
|
+
},
|
|
257
|
+
content: {
|
|
258
|
+
backgroundColor: "#00000033",
|
|
259
|
+
borderRadius: "4px",
|
|
260
|
+
color: "white",
|
|
261
|
+
padding: "1rem",
|
|
262
|
+
},
|
|
263
|
+
});
|
|
264
|
+
---
|
|
265
|
+
|
|
266
|
+
<html lang="en">
|
|
267
|
+
<head>
|
|
268
|
+
<SimpleStyleProvider registry={StyleRegistry}>
|
|
269
|
+
<meta charset="utf-8" />
|
|
270
|
+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
271
|
+
<meta name="viewport" content="width=device-width" />
|
|
272
|
+
<meta name="generator" content={Astro.generator} />
|
|
273
|
+
<title>Astro</title>
|
|
274
|
+
</SimpleStyleProvider>
|
|
275
|
+
</head>
|
|
276
|
+
<body class={classes.background}>
|
|
277
|
+
<div class={classes.content}>
|
|
278
|
+
<h1>Astro</h1>
|
|
279
|
+
<p>
|
|
280
|
+
Checkout the CSS class and animation applied to the body, which is
|
|
281
|
+
making my colors changes.
|
|
282
|
+
</p>
|
|
283
|
+
<p>Feel free to edit me and I'll hot reload!</p>
|
|
284
|
+
</div>
|
|
285
|
+
</body>
|
|
286
|
+
</html>
|
|
287
|
+
```
|
|
288
|
+
|
|
289
|
+
Check out this [Code Sandbox w/Astro integration to see how it works](https://codesandbox.io/p/devbox/mq9twt).
|
|
290
|
+
|
|
291
|
+
**General SSR Concepts**
|
|
292
|
+
|
|
134
293
|
`simplestyle-js` is intentionally unopinionated, especially when it comes to deep integrations with various frameworks. This also applies to SSR / Server-side rendering.
|
|
135
294
|
The core APIs needed to make this work are:
|
|
136
295
|
|
|
@@ -139,7 +298,7 @@ The core APIs needed to make this work are:
|
|
|
139
298
|
- `makeCreateStyle(registry)` - returns a `createStyles()` function that is locked to your StyleSheet registry
|
|
140
299
|
- `makeKeyframes(registry)` - returns a `keyframes()` function that is locaked to your StyleSheet registry
|
|
141
300
|
|
|
142
|
-
### SSR steps for most SSR / SSG frameworks
|
|
301
|
+
### SSR steps for most SSR / SSG frameworks
|
|
143
302
|
|
|
144
303
|
#### 1. Set your seed, create a SimpleStyleRegistry and your style functions
|
|
145
304
|
|
package/package.json
CHANGED