Using padding: ${'.3rem'} 0; not work

[zhangyu921]

Bug report;

What is the current behavior?

.inner {
            padding: ${'.3rem'} 0; // not work
            //padding: ${`${px2rem(30)} 0`};  //good
}

What is the expected behavior?

Environment (include versions)

• OS: mac os mojave
• Browser: chrome
• styled-jsx (version): 3.2

[AnatoleLucet]

To give a bit more context, when you use the template literals syntax (${...}) to inject a js value in your css which is somewhere after followed by a space and a character (; not included), the value you "injected" will not be included in the processed css.

Quick examples:

const aValueInPx = 5;

// ...

// working
any-css-property: ${aValueInPx};    // --> "any-css-property: 5;"
any-css-property: ${aValueInPx} ;   // --> "any-css-property: 5;"
any-css-property: ${aValueInPx}px;  // --> "any-css-property: 5px;"

// not working
any-css-property: ${aValueInPx}px 0;        // --> "any-css-property: px 0;"
any-css-property: ${aValueInPx}px anything; // --> "any-css-property: px anything;"