search

kristerkari / react-native-sass-transformer

Use Sass to style your React Native apps.
MIT License
219 stars 19 forks source link

Failed parse rgba #26

Closed eyu0415 closed 4 years ago

eyu0415 commented 4 years ago

rgba(#fff, 0.1) or rgba(255, 255, 255, 0.1) Failed parse declaration ex { borderColor }

But hex color with alpha channel works fine. (#ffffff19)

eyu0415 commented 4 years ago

If I pass sassOptions

sassOptions: { functions: { 'rgba($r, $g, $b, $a)': (r, g, b, a) => { const hexR = r.getValue().toString(16); const hexG = g.getValue().toString(16); const hexB = b.getValue().toString(16); const hexA = Math.round(255 * a.getValue()).toString(16); const hexColor = new sass.types.String(#${hexR}${hexG}${hexB}${hexA}); return hexColor; }, }, }

It works because pre convert to hex string,

But converted by sass.types.Color with opacity throw parse error.

even pre convert sass.types.String(rgba(r, g, b, a));

kristerkari commented 4 years ago

Thanks @eyu0415. This is a bug in the CSS parser. I will work on a fix.

kristerkari commented 4 years ago

This is fixed in css-to-react-native version 2.3.2

To get the fix, you can uninstall and reinstall react-native-sass-transformer to update the depenencies from your npm or yarn lock file.