Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(rrweb): Fix some css issues with :hover and rewrite max-device-width #17

Merged
merged 12 commits into from
Jun 24, 2024
Merged

fix(rrweb): Fix some css issues with :hover and rewrite max-device-width #17

merged 12 commits into from
Jun 24, 2024

Commits on Jun 21, 2024

  1. We weren't recursing into media queries (or @supports etc.) to rewrit… 

    …e hover pseudoclasses
    @eoghanmurray @jxiwang
    eoghanmurray authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    8e0d43a View commit details
    Browse the repository at this point in the history

  2. The early return meant that the stylesWithHoverClass cache wasn't bei… 

    …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);
    @eoghanmurray @jxiwang
    eoghanmurray authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    3c3cd01 View commit details
    Browse the repository at this point in the history

  3. 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
    @eoghanmurray @jxiwang
    eoghanmurray authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    22378f5 View commit details
    Browse the repository at this point in the history

  4. Add some tests to show how the hover replacement works against select… 

    …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
    @eoghanmurray @jxiwang
    eoghanmurray authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    3af0ac9 View commit details
    Browse the repository at this point in the history

  5. Update name of function to reflect that 'addHoverClass' does more tha… 

    …n just :hover. I believe this function is only exported for the purposes of use in the tests
    @eoghanmurray @jxiwang
    eoghanmurray authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    89b3c17 View commit details
    Browse the repository at this point in the history

  6. Apply formatting changes

    @eoghanmurray @jxiwang
    eoghanmurray authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    bdb47dd View commit details
    Browse the repository at this point in the history

  7. Create rotten-spies-enjoy.md

    @eoghanmurray @jxiwang
    eoghanmurray authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    c7dfd53 View commit details
    Browse the repository at this point in the history

  8. Apply formatting changes

    @eoghanmurray @jxiwang
    eoghanmurray authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    8143ee1 View commit details
    Browse the repository at this point in the history

  9. Add correct typing on getSelectors

    @Juice10 @jxiwang
    Juice10 authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    d677cec View commit details
    Browse the repository at this point in the history

  10. Refactor CSS interfaces to include optional rules

    @Juice10 @jxiwang
    Juice10 authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    a5343b5 View commit details
    Browse the repository at this point in the history

  11. Change rules to be non optional

    @Juice10 @jxiwang
    Juice10 authored and jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    60c8a1e View commit details
    Browse the repository at this point in the history

  12. Modify changeset: rotten-spies-enjoy.md

    @jxiwang
    jxiwang committed Jun 21, 2024
    Configuration menu
    Copy the full SHA
    937a552 View commit details
    Browse the repository at this point in the history