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:
225225const 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 : 1 px solid red , 1 px solid blue ;
237+ background : url ( image1.png ), url ( image2.png ) ;
238238}
239239```
240240
241241``` javascript
242242const 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 : 1 px solid red , 1 px 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.
You can’t perform that action at this time.
0 commit comments