Fix some css issues with :hover and rewrite max-device-width #1431
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…e hover pseudoclasses
…ng populated if there were no hover selectors on the stylesheet
- not committing the test, but modifying the existing 'add a hover class to a previously processed css string' as follows shows the problem:
--- a/packages/rrweb-snapshot/test/rebuild.test.ts
+++ b/packages/rrweb-snapshot/test/rebuild.test.ts
@@ -151,6 +185,7 @@ describe('rebuild', function () {
path.resolve(__dirname, './css/benchmark.css'),
'utf8',
);
+ cssText = cssText.replace(/:hover/g, '');
const start = process.hrtime();
addHoverClass(cssText, cache);
… looks out at the browser viewport whereas we need it to look at the replayer iframe viewport
…or lists. I believe these were failing in a previous version of rrweb as I had some local patches that no longer seem to be needed to handle these cases
…n just :hover. I believe this function is only exported for the purposes of use in the tests
🦋 Changeset detectedLatest commit: 681342f The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
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 |
Juice10
requested changes
Mar 21, 2024
There was a problem hiding this comment.
Good catch @eoghanmurray! Found a little typing improvement for you, but apart from that this is looking ready for release!
Comment on lines
+107
to
+122
| ul li.multiline | ||
| b:hover | ||
| img, | ||
| ul li.specified c:hover img { | ||
| color: white | ||
| }`; | ||
| expect(adaptCssForReplay(cssText, cache)).toEqual( | ||
| `ul li.specified a:hover img, ul li.specified a.\\:hover img, | ||
| ul li.multiline | ||
| b:hover | ||
| img, ul li.multiline | ||
| b.\\:hover | ||
| img, | ||
| ul li.specified c:hover img, ul li.specified c.\\:hover img { | ||
| color: white | ||
| }`, |
There was a problem hiding this comment.
I think you can add whitespace here to make the tests a little less messy, unless I'm missing something it should be fine.
Suggested change
| ul li.multiline | |
| b:hover | |
| img, | |
| ul li.specified c:hover img { | |
| color: white | |
| }`; | |
| expect(adaptCssForReplay(cssText, cache)).toEqual( | |
| `ul li.specified a:hover img, ul li.specified a.\\:hover img, | |
| ul li.multiline | |
| b:hover | |
| img, ul li.multiline | |
| b.\\:hover | |
| img, | |
| ul li.specified c:hover img, ul li.specified c.\\:hover img { | |
| color: white | |
| }`, | |
| ul li.multiline | |
| b:hover | |
| img, | |
| ul li.specified c:hover img { | |
| color: white | |
| }`; | |
| expect(adaptCssForReplay(cssText, cache)).toEqual( | |
| `ul li.specified a:hover img, ul li.specified a.\\:hover img, | |
| ul li.multiline | |
| b:hover | |
| img, ul li.multiline | |
| b.\\:hover | |
| img, | |
| ul li.specified c:hover img, ul li.specified c.\\:hover img { | |
| color: white | |
| }`, |
Juice10
approved these changes
Mar 25, 2024
jaj1014
pushed a commit
to pendo-io/rrweb
that referenced
this pull request
Apr 30, 2024
…o#1431) * We weren't recursing into media queries (or @supports etc.) to rewrite hover pseudoclasses * The early return meant that the stylesWithHoverClass cache wasn't being populated if there were no hover selectors on the stylesheet - not committing the test, but modifying the existing 'add a hover class to a previously processed css string' as follows shows the problem: --- a/packages/rrweb-snapshot/test/rebuild.test.ts +++ b/packages/rrweb-snapshot/test/rebuild.test.ts @@ -151,6 +185,7 @@ describe('rebuild', function () { path.resolve(__dirname, './css/benchmark.css'), 'utf8', ); + cssText = cssText.replace(/:hover/g, ''); const start = process.hrtime(); addHoverClass(cssText, cache); * Replace `min-device-width` and similar with `min-width` as the former looks out at the browser viewport whereas we need it to look at the replayer iframe viewport * Add some tests to show how the hover replacement works against selector lists. I believe these were failing in a previous version of rrweb as I had some local patches that no longer seem to be needed to handle these cases * Update name of function to reflect that 'addHoverClass' does more than just :hover. I believe this function is only exported for the purposes of use in the tests * Apply formatting changes * Create rotten-spies-enjoy.md * Apply formatting changes * Add correct typing on `getSelectors` * Refactor CSS interfaces to include optional rules * Change `rules` to be non optional --------- Co-authored-by: eoghanmurray <[email protected]> Co-authored-by: Justin Halsall <[email protected]>
This was referenced May 16, 2024
dkindel
added a commit
to pendo-io/rrweb
that referenced
this pull request
May 17, 2024
…rweb-io#1431)" This reverts commit a7c33f2.
billyvg
added a commit
to getsentry/rrweb
that referenced
this pull request
Jun 5, 2024
…rweb-io#1431)" This reverts commit a7c33f2.
billyvg
added a commit
to getsentry/rrweb
that referenced
this pull request
Jun 5, 2024
…rweb-io#1431)" This reverts commit a7c33f2.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
:hoverpseudoclassesmin-device-widthand similar withmin-widthas the former looks out at the browser viewport whereas we need it to look at the replayer iframe viewport