File tree Expand file tree Collapse file tree 1 file changed +8
-6
lines changed Expand file tree Collapse file tree 1 file changed +8
-6
lines changed Original file line number Diff line number Diff line change @@ -225,7 +225,7 @@ There are some advantages to using this syntax:
225
225
const styles = {
226
226
button: {
227
227
// Comma separated value with regular CSS strings inside.
228
- border : [' 1px solid red ' , ' 1px solid blue ' ]
228
+ background : [' url(image1.png) ' , ' url(image2.png) ' ]
229
229
}
230
230
}
231
231
```
@@ -234,18 +234,18 @@ Compiles to:
234
234
235
235
``` css
236
236
.button-0 {
237
- border : 1 px solid red , 1 px solid blue ;
237
+ background : url ( image1.png ), url ( image2.png ) ;
238
238
}
239
239
```
240
240
241
241
``` javascript
242
242
const styles = {
243
243
button: {
244
244
// Comma separated value with space separated values inside.
245
- border : [
245
+ background : [
246
246
// 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 ' ]
249
249
]
250
250
}
251
251
}
@@ -255,7 +255,7 @@ Compiles to:
255
255
256
256
``` css
257
257
.button-0 {
258
- border : 1 px solid red , 1 px solid blue ;
258
+ background : url ( image1.png ) no-repeat top , url ( image1.png ) no-repeat right ;
259
259
}
260
260
```
261
261
@@ -355,3 +355,5 @@ const styles = {
355
355
}
356
356
}
357
357
```
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.
You can’t perform that action at this time.
0 commit comments