simplestyle-js 4.3.1 → 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 +152 -6
- 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)
|
|
@@ -133,14 +135,158 @@ Rules support nested selectors via `&`, media queries, and `$className` back-ref
|
|
|
133
135
|
|
|
134
136
|
### Next.js
|
|
135
137
|
|
|
136
|
-
|
|
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).
|
|
138
187
|
|
|
139
188
|
|
|
140
189
|
### Astro
|
|
141
190
|
|
|
142
|
-
|
|
143
|
-
|
|
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).
|
|
144
290
|
|
|
145
291
|
**General SSR Concepts**
|
|
146
292
|
|
package/package.json
CHANGED