Added CSS.escape to font-family.ts #4545
Conversation
✅ Deploy Preview for tiptap-embed ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Added CSS.escape to renderHTML. Prevents invalid css when using fonts with numbers in their names, like https://fonts.google.com/specimen/Exo+2
|
@SanderLeenders I think this will also escape
|
|
@janthurau you are right! I've added a fix for this. |
|
Hi |
|
I'm not sure that this was the right move, I think I'm going to make a PR to revert this |
This SO answer provides an alternate solution: https://stackoverflow.com/questions/7638775/do-i-need-to-wrap-quotes-around-font-family-names-in-css |
Sorry there are a few recommendations here are you saying that we should wrap with Or maybe we can do what we did before and just wrap in |
Using `CSS.escape` is the wrong tool for the job here: - it is meant for CSS selectors and does not handle CSS variables properly. - you can't use `var(--title)` as a font-family because it was getting escaped to `var\(--title\)` Instead this introduces using a regex to see if we should quote the font-family. Quoting when: - font-family includes at least one number or whitespace character
Using `CSS.escape` is the wrong tool for the job here: - it is meant for CSS selectors and does not handle CSS variables properly. - you can't use `var(--title)` as a font-family because it was getting escaped to `var\(--title\)`
Please describe your changes
Added CSS.escape to renderHTML. Prevents invalid css when using fonts with numbers in their names, like https://fonts.google.com/specimen/Exo+2
How did you accomplish your changes
Added CSS.escape() to renderHTML
How have you tested your changes
Tested local
How can we verify your changes
Before
After
Remarks
Checklist
Related issues