Remove or replace double `$` syntax for pseudo-elements
Closed this issue · 2 comments
Is your feature request related to a problem? Please describe.
Currently, pseudo-elements are applied using a double $$ syntax. Ex. $$after. However, that's not super intuitive since every other prop starts with only one $. The only reason it's necessary at the moment is to differentiate pseudo classes from elements within the final if statement of createStylesFromProps for the purpose of appending a second colon to conform with css standard. It will technically work on most browsers without that, but I think we should be consistent about keeping with the double colon standard.
Describe the solution you'd like
Ideally we find another way to distinguish pseudo-classes from pseudo-elements. Initially I considered having the colons be in the prop names themselves ex. $::after but colons in prop names are how React recognizes namespaces, so that doesn't work.
Describe alternatives you've considered
Although we could technically check if a passed prop matches a set of pseudo-classes/elements from an array, having to manage a set of all possible pseudos ourselves is a terrible idea because it 1) adds more things to maintain, 2) allows for the possibility of being out of date, and 3) will unnecessarily increase the package size.
@dslovinsky we can use the pseudo-elements list (since there are fewer of them) and create a hashtable with elements as keys (in camelCase) and test them with hasOwnProperty() which runs at an average of O(1).
This doesn't solve the issue of having to maintain the list, however CSS is 27 years old and only has like 16 pseudo-elements.. So it shouldn't be too hard to manage 😜
🎉 This issue has been resolved in version 1.0.0 🎉
The release is available on:
Your semantic-release bot 📦🚀