Unable to use interpolation in CSS

[anzorb]

[email protected]
[email protected]
Android 7.1.1

code:

    const runningColor = 'green';

    const lss = RNC`
     bla {
        background-color: ${runningColor};
      }
    `

    return <View style={lss.bla}></View>

Error:

[thabti]

Thank you, I will investigate.

[thabti]

@anzorb

Does this only happen when using ${runningColor};?

[anzorb]

Any variable would cause this issue because it didn't appear to get interpolated when it was consumed by toJSS(). A console.log(css) in there show this.

If the string is encapsulated in brackets, it all works great.

 const runningColor = 'green';

    const lss = RNC(`
     bla {
        background-color: ${runningColor};
      }
    `);

    return <View style={lss.bla}></View>

Tagged template literals behave different with or without parentesis:
Chrome:

const test = 'literals';

console.log`hello template ${test}`
>["hello template ", "", raw: Array(2)] 
"literals"

console.log(`hello template ${test}`)
>hello template literals

I don't have enough time to keep digging (and I can live with brackets), but maybe above info will make it obvious for you ^

[thabti]

@anzorb thank you so much for doing all the digging. Please test [email protected].

Add the following test:https://github.com/sabeurthabti/react-native-css/blob/a7ad812fbb346daae052b337467d71e1e3d46fee/test/rnc.test.js#L240

should be working as expected.

[yuritoledo]

Hi,

Just for information, in the "react-native-css": "^2.1.2" works normally!