Fixed an issue in the styles minifier that caused interpolations to be sometimes included more than once in the output #2858
Conversation
…e sometimes included more than once in the output
🦋 Changeset detectedLatest commit: 9abf2b9 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 9abf2b9:
|
Codecov Report
|
| let parent = element | ||
| do { | ||
| parent = parent.parent | ||
| } while (parent && parent.type !== 'rule') |
There was a problem hiding this comment.
No idea why I've included this loop in the past - all tests pass without it. We now directly compare locations of element and element.parent.
The issue was that we temporarily replace interpolations with strings that shouldn't appear in real styles (can be seen here). Such output string is being processed by Stylis (that's why we replace them in the first place, so we can compile styles with Stylis).So Stylis never knows about our little hack and it could, accidentally, treat our string as part of the selector for a rule.
This was happening for input like this:
${fullWidth}
button {Since it was transformed by us to:
xxx0:xxx
button {
And if we had an at-rule within such block then for a rule in it we didn't recognize a rule to be auto-inserted. This information is being utilized by toInputTree which tries to convert the AST back to a shape representing the input string to make it possible to print it back to as a minified string.
fixes #2745