[Bug] Possible wrong regEx validation in var identRe inside index.js file

[pedpess]

Hi 👋🏻 ,

I have an issue with regEx validation that's done with var identRe = (^-?[_a-z][_a-z0-9-]*$) inside of the index.js file that cause my app to crash during start-up. This peculiar case only happens with my fontFamily that's named as OctoberH+L-Black with the + plus sign being the main issue here as this regEx within the lib code doesn't take that into consideration.

I patched a fix locally that handles that regEx validation with the plus sign as (^-?[_a-zA-Z][A-Z_a-z0-9+-]*$), which doesn't crash the app anymore and the font family works as expected.

You can try that yourself using regEx101 and see that my patch validates the font family correctly.

If this is the real fix, please let me know and I would be happy to open a small PR 🙂

Cheers,

[jacobp100]

You need quotes for that family name.

font-family: "OctoberH+L-Black";

I just tested in a browser and it marks it invalid too - so I don't think this is a bug.

Please reply if you disagree though!

[jacobp100]

See https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#valid_family_names

[pedpess]

You need quotes for that family name.

That's what I'm doing and if you use plain styled components <Text /> in React Native that would work, so you are correct. 👌🏻

However, the problem lies when I want to pass a Theme definition object through ThemeProvider that styled components offer me, so in the React Native app, I can render either a Dark or Light theme with the styling definitions, f.ex typography.

Somehow (that I don't understand quite well), during the parsing/validation of this object that happens in fontFamily() function the logic ends in the else block of fontFamily = tokenStream.expect(IDENT) and that IDENT param is the regEx that doesn't understand OctoberH+L-Black. Thus, causing the crash, which throws the exception Failed to parse declaration "fontFamily: OctoberH+L-Black"

If you checked the RegEx101 you will see there's no match for this regEx that we have in the lib's code: (^-?[_a-z][_a-z0-9-]*$)

With my small change in the regEx to also understand + sign, it matches, thus not causing the application crash anymore.

[jacobp100]

What about if you add extra quotes in your theme provider?

const theme = {
  fontFamily: `"OctoberH+L-Black"`
}

(Or however you're meant to do that in SC)

If that doesn't work, it might be better to go back to SC for advice.

As far as I can tell, we're following the CSS spec here - and we make a lot of effort to do this. Your proposed change would mean we no longer followed the CSS spec.

[pedpess]

Oho! Scaping the strings like you recommended defacto works! 🤩

const theme = {
  fontFamily: `"OctoberH+L-Black"`
}

I wonder now why I would need to scape it here and if SC wouldn't understand the parsing already like this fontFamily: "OctoberH+L-Black"

Do you want me to write some docs explaining that somewhere? I would be happy to help and thanks in advance for the patience here sharing with me :)