Port keyframe name fix from ShadyCSS #5038
Conversation
| // Animation names are of the form [\w-], so ensure that the name regex does not partially apply | ||
| // to similarly named keyframe names by checking for a word boundary at the beginning and | ||
| // a non-word boundary or `-` at the end. | ||
| rule.keyframesNameRx = new RegExp('\\b' + rule.keyframesName + '(?!\\B|-)', 'g'); |
There was a problem hiding this comment.
It looks like foo will match in a-foo
There was a problem hiding this comment.
For the prefix issue, looks like we'll need something more complicated like (?:animation-name\s*:|@(?:-moz|-webkit|-ms)?-?keyframes)\s*a-foo(?!\B|-)
There was a problem hiding this comment.
After reviewing this, it turns out not to matter if foo matches a-foo. We're only looking to add a suffix scoping name to the keyframe, and the regex fix makes sure that that suffix scoping is only added to animations already without a suffix.
The bug here was specifically if the match was found as a prefix for an animation, such that a would match a-foo and incorrectly add the scoping suffix as an infix modification, breaking the naming scheme.
Therefore, if a-foo is matched for foo, it will no longer match for a-foo, and all animations will have the scoping suffix added correctly.
Fixes #3475