Skip to content

Commit 9f7599a

Browse files
committed
Update docs/jss-syntax.md
1 parent f894548 commit 9f7599a

File tree

1 file changed

+8
-6
lines changed

1 file changed

+8
-6
lines changed

docs/jss-syntax.md

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -225,7 +225,7 @@ There are some advantages to using this syntax:
225225
const styles = {
226226
button: {
227227
// Comma separated value with regular CSS strings inside.
228-
border: ['1px solid red', '1px solid blue']
228+
background: ['url(image1.png)', 'url(image2.png)']
229229
}
230230
}
231231
```
@@ -234,18 +234,18 @@ Compiles to:
234234

235235
```css
236236
.button-0 {
237-
border: 1px solid red, 1px solid blue;
237+
background: url(image1.png), url(image2.png);
238238
}
239239
```
240240

241241
```javascript
242242
const styles = {
243243
button: {
244244
// Comma separated value with space separated values inside.
245-
border: [
245+
background: [
246246
// Numbers can become default unit automatically.
247-
[1, 'solid', 'red'],
248-
[1, 'solid', 'blue']
247+
['url(image1.png)', 'no-repeat', 'top'],
248+
['url(image1.png)', 'no-repeat', 'right']
249249
]
250250
}
251251
}
@@ -255,7 +255,7 @@ Compiles to:
255255

256256
```css
257257
.button-0 {
258-
border: 1px solid red, 1px solid blue;
258+
background: url(image1.png) no-repeat top, url(image1.png) no-repeat right;
259259
}
260260
```
261261

@@ -355,3 +355,5 @@ const styles = {
355355
}
356356
}
357357
```
358+
359+
[Here is an example](https://codesandbox.io/s/houdini-typed-value-jmec9) that makes use of typed values API to update a value and avoid CSS parsing.

0 commit comments

Comments
 (0)