feat: add new css parser - postcss #1458
Merged
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
|
daibhin
commented
Apr 24, 2024
| } | ||
| getSelectors(ast.stylesheet); | ||
| const mediaFeatures = css | ||
| .findAll(newAst, (node) => node.type === 'MediaFeature') |
There was a problem hiding this comment.
Possibly some further optimizations we could even make here by using the css.walk method to only traverse the AST once (rather than twice like I assume findAll is doing)
pauldambra
reviewed
Apr 25, 2024
4 tasks
marandaneto
reviewed
Apr 26, 2024
packages/rrweb-snapshot/package.json
Outdated
| @@ -1,6 +1,6 @@ | |||
| { | |||
| "name": "rrweb-snapshot", | |||
| "version": "2.0.0-alpha.13", | |||
| "version": "2.0.0-alpha.12", | |||
There was a problem hiding this comment.
Should probably be 13?
|
This is great and something I thought we might get to 'some day' after the recent fixes to css.ts. Would you be able to post a before/after of the built file sizes from this change; i.e.
One of the reasons css.ts was ported over was so that we could tree shake it a bit. |
|
Something isn't right here because I'm getting the same values when running
Before After |
|
In a significant update here I moved to using This massively simplifies the I've moved around some test files to better separate concerns. Some of the tests were "testing the framework" given they had been copied over from https://github.com/reworkcss/css/blob/master/test/parse.js. I removed any that were no longer relevant but left any of the cases added in https://github.com/rrweb-io/rrweb/pull/1440/files#diff-ca07555d1c1965f9c7ef3b5df3772a19953138b8eac62deb7786e549b25b455d as we know they've specifically broken in the past and we would like to avoid breaking them in the future |
|
Super! What sort of filesize numbers are there with the |
|
Sorry @eoghanmurray, probably wasn't clear but I updated my earlier comment with latest build numbers having run
|
eoghanmurray
changed the title
eoghanmurray
requested changes
May 7, 2024
| @@ -9,6 +9,9 @@ import { | |||
| } from './types'; | |||
| import { isElement, Mirror, isNodeMetaEqual } from './utils'; | |||
|
|
|||
| // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-var-requires | |||
| const postcss = require('postcss'); | |||
There was a problem hiding this comment.
I'm not familiar with the various import methods, but feel this needs a bit of an explanation as to why you are doing it this way
There was a problem hiding this comment.
This is causing tests to fail with require is not defined
There was a problem hiding this comment.
Is it that we need a typescript version of https://github.com/giuseppeg/postcss-pseudo-classes
?
There was a problem hiding this comment.
This require business might be fixed with this PR: #1033
There was a problem hiding this comment.
Thanks for the heads up @Juice10. I've been meaning to get back to this PR but have had some vacation recently. The good news is that this seems to have resolved all known CSS issues for us. I can hold off until the Vite changes are merged if that is imminent
There was a problem hiding this comment.
@daibhin, PR has been merged, although what you have done (replacing require by import) seems perfectly good
|
Hopefully the following doesn't derail the conversation, and even if we go ahead with the following, that doesn't detract from the worth of the current PR... So okay I just had a thought; all this CSS processing is on the replay side, right? === edit: I've drafted this up in #1480 |
|
@Juice10 thanks for fixing up the imports. Do you know if the failing test is related to my changes somehow? |
Example: FAIL test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll TypeError: e[api] is not a function ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37 ❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24
|
@daibhin failing test was for 2872d0e was due to an upgraded package, thats fixed now (by locking the package version). The failure for c7153b7 seems to be due to jest being extended where we switched over to vitest. I just fixed that issue, but it looks like a chunk of the :hover tests are failing (you'll see that soon for 9df9946 ) |
Juice10
approved these changes
Jun 26, 2024
jeffdnguyen
pushed a commit
to pendo-io/rrweb
that referenced
this pull request
Jul 29, 2024
* feat: add new css parser * make selectors change * selectors and tests * media changes * remove old css references * better variable name * use postcss and port tests * fix media test * inline plugins * fix failing multiline selector * correct test result * move tests to correct file * cleanup all tests * remove unused css-tree * update bundle * cleanup dependencies * revert config files to master * remove d.ts files * update snapshot * reset rebuilt test * apply fuzzy css matching * remove extra test * Fix imports * Newer versions of nswapi break rrdom-nodejs tests. Example: FAIL test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll TypeError: e[api] is not a function ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37 ❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24 * Migrate from jest to vitest * Order of selectors has changed with postcss * Remove unused eslint --------- Co-authored-by: Justin Halsall <[email protected]>
jeffdnguyen
pushed a commit
to pendo-io/rrweb
that referenced
this pull request
Jul 29, 2024
* feat: add new css parser * make selectors change * selectors and tests * media changes * remove old css references * better variable name * use postcss and port tests * fix media test * inline plugins * fix failing multiline selector * correct test result * move tests to correct file * cleanup all tests * remove unused css-tree * update bundle * cleanup dependencies * revert config files to master * remove d.ts files * update snapshot * reset rebuilt test * apply fuzzy css matching * remove extra test * Fix imports * Newer versions of nswapi break rrdom-nodejs tests. Example: FAIL test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll TypeError: e[api] is not a function ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37 ❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24 * Migrate from jest to vitest * Order of selectors has changed with postcss * Remove unused eslint --------- Co-authored-by: Justin Halsall <[email protected]>
Vadman97
added a commit
to highlight/highlight
that referenced
this pull request
Aug 20, 2024
## Summary rrweb-io/rrweb#1458 introduced issues with certain customers' applications such as: ```js Uncaught CssSyntaxError: <css input>:1778:83: Unknown word Uncaught CssSyntaxError: <css input>:1:65502: Unknown word Uncaught CssSyntaxError: <css input>:1:2: Unclosed block ``` example of such a session: https://app.highlight.io/92422/sessions/qGaSpGVNh4Ewqj8k23lNC5zNtcB1 affected highlight.run clients are >=9.1.5 with certain bundled CSS this may also affect the replayer so the new frontend usage of rrweb is affected ## How did you test this change? fixes playback of [session that used to not play](https://app.highlight.io/92422/sessions/qGaSpGVNh4Ewqj8k23lNC5zNtcB1) <img width="1487" alt="Screenshot 2024-08-19 at 15 54 49" src="https://github.com/user-attachments/assets/305779eb-6ee4-489f-999c-3c608f04d86b"> new client build working <img width="1403" alt="Screenshot 2024-08-19 at 16 07 24" src="https://github.com/user-attachments/assets/f6a46f8f-827f-42b0-acc2-cd01fc2ae249"> ## Are there any deployment considerations? new changeset ## Does this work require review from our design team? no
Vadman97
added a commit
to highlight/highlight
that referenced
this pull request
Aug 20, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## [email protected] ### Patch Changes - 262a073: revert postcss changes to css parsing in rrweb <rrweb-io/rrweb#1458> introduced a new CSS parser which causes issues with certain large CSS files ## @highlight-run/[email protected] ### Patch Changes - Updated dependencies [262a073] - [email protected] - @highlight-run/[email protected] - @highlight-run/[email protected] ## @highlight-run/[email protected] ### Patch Changes - Updated dependencies [262a073] - [email protected] ## @highlight-run/[email protected] ### Patch Changes - Updated dependencies [262a073] - [email protected] - @highlight-run/[email protected] - @highlight-run/[email protected] --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Vadim Korolik <[email protected]>
jxiwang
pushed a commit
to amplitude/rrweb
that referenced
this pull request
Oct 22, 2024
* feat: add new css parser * make selectors change * selectors and tests * media changes * remove old css references * better variable name * use postcss and port tests * fix media test * inline plugins * fix failing multiline selector * correct test result * move tests to correct file * cleanup all tests * remove unused css-tree * update bundle * cleanup dependencies * revert config files to master * remove d.ts files * update snapshot * reset rebuilt test * apply fuzzy css matching * remove extra test * Fix imports * Newer versions of nswapi break rrdom-nodejs tests. Example: FAIL test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll TypeError: e[api] is not a function ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37 ❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24 * Migrate from jest to vitest * Order of selectors has changed with postcss * Remove unused eslint --------- Co-authored-by: Justin Halsall <[email protected]>
ShayMalchi
added a commit
to SaolaAI/rrweb
that referenced
this pull request
Nov 6, 2024
* Skip mask check on leaf elements (rrweb-io#1512) * Minor fixup for rrweb-io#1349; the 'we can avoid the check on leaf elements' optimisation wasn't being applied as `n.childNodes` was always truthy even when there were no childNodes. Changing it to `n.childNodes.length` directly there (see rrweb-io#1402) actually caused a bug as during a mutation, we serialize the text node directly, and need to jump to the parentElement to do the check. This is why I've reimplemented this optimisation inside `needMaskingText` where we are already had an `isElement` test Thanks to @Paulhejia (https://github.com/Paulhejia/rrweb/) for spotting that `Boolean(n.childNodes)` is aways true. * Assuming all jest should have been removed in rrweb-io#1033 (rrweb-io#1511) * all references to jest should have been removed in rrweb-io#1033 * clarify that `cross-env` is used to ensure that environmental variables get applied on Windows (previous usage of cross-env was removed in rrweb-io#1033) * Fix async assertions in test files (rrweb-io#1510) * fix: await assertSnapshot in test files for async assertions * Fix maskInputFn is ignored during the creation of the full snapshot (rrweb-io#1386) Fix that the optional `maskInputFn` was being accidentally ignored during the creation of the full snapshot * Improve development tooling (rrweb-io#1516) - Running `yarn build` in a `packages/*/` directory will trigger build of all dependencies too, and cache them if possible. - Fix for `yarn dev` breaking for `rrweb` package whenever changing files in `rrweb` package - Update typescript, turbo, vite and vite-plugin-dts - Require `workspaces-to-typescript-project-references` from `prepublish` * Version Packages (alpha) (rrweb-io#1513) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Keep all packages in sync * feat: add new css parser - postcss (rrweb-io#1458) * feat: add new css parser * make selectors change * selectors and tests * media changes * remove old css references * better variable name * use postcss and port tests * fix media test * inline plugins * fix failing multiline selector * correct test result * move tests to correct file * cleanup all tests * remove unused css-tree * update bundle * cleanup dependencies * revert config files to master * remove d.ts files * update snapshot * reset rebuilt test * apply fuzzy css matching * remove extra test * Fix imports * Newer versions of nswapi break rrdom-nodejs tests. Example: FAIL test/document-nodejs.test.ts > RRDocument for nodejs environment > RRDocument API > querySelectorAll TypeError: e[api] is not a function ❯ byTag ../../node_modules/nwsapi/src/nwsapi.js:390:37 ❯ Array.<anonymous> ../../node_modules/nwsapi/src/nwsapi.js:327:113 ❯ collect ../../node_modules/nwsapi/src/nwsapi.js:1578:32 ❯ Object._querySelectorAll [as select] ../../node_modules/nwsapi/src/nwsapi.js:1533:36 ❯ RRDocument.querySelectorAll src/document-nodejs.ts:96:24 * Migrate from jest to vitest * Order of selectors has changed with postcss * Remove unused eslint --------- Co-authored-by: Justin Halsall <[email protected]> * fix: console assert only logs when arg 0 is falsy (rrweb-io#1530) * fix: console assert only logs when arg 0 is falsy * [Feature] Include takeFullSnapshot function in rrweb (rrweb-io#1527) * export takeFullSnapshot function in rrweb * chore: reduce flakey test due to '[vite] connected' message (rrweb-io#1525) * fix: duplicate textContent for style element cause incremental style mutation invalid (rrweb-io#1417) fix style element corner case - historically we have recorded duplicated css content in certain cases (demonstrated by the attached replayer test). This fix ensures that the replayer doesn't doubly add the content, which can cause problems when further mutations occur --------- Review and further tests contributed by: Eoghan Murray <[email protected]> * Added support for deprecated addRule & removeRule methods (rrweb-io#1515) * Added support for deprecated addRule & removeRule methods * Respect addRule default value * fix: nested stylesheets should have absolute URLs (rrweb-io#1533) * Replace relative URLs with absolute URLs when stringifying stylesheets * Add test to show desired behavior for imported stylesheets from seperate directory * Rename `absoluteToStylesheet` to `absolutifyURLs` and call it once after stringifying imported stylesheet * Don't create the intermediary array of the spread operator * Formalize that `stringifyRule` should expect a sheet href * Ensure a <style> element can also import and gets it's url absolutized * Handle case where non imported stylesheet has relative urls that need to be absolutified * Clarify in test files where jpegs are expected to appear in absolutified urls * Move absolutifyURLs call for import rules out of trycatch * Add a benchmarking test for stringifyStylesheet * Avoid the duplication on how to fall back --------- Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: eoghanmurray <[email protected]> * Support top-layer <dialog> recording & replay (rrweb-io#1503) * chore: its important to run `yarn build:all` before running `yarn dev` * feat: trigger showModal from rrdom and rrweb * feat: Add support for replaying modal and non modal dialog elements * chore: Update dev script to remove CLEAR_DIST_DIR flag * Get modal recording and replay working * DRY up dialog test and dedupe snapshot images * feat: Refactor dialog test to use updated attribute name * feat: Update dialog test to include rr_open attribute * chore: Add npm dependency [email protected] * Add more test cases for dialog * Clean up naming * Refactor dialog open code * Revert changed code that doesn't do anything * Add documentation for unimplemented type * chore: Remove unnecessary comments in dialog.test.ts * rename rr_open to rr_openMode * Replace todo with a skipped test * Add better logging for CI * Rename rr_openMode to rr_open_mode rrdom downcases all attribute names which made `rr_openMode` tricky to deal with * Remove unused images * Move after iframe append based on @YunFeng0817's comment rrweb-io#1503 (comment) * Remove redundant dialog handling from rrdom. rrdom already handles dialog element creation it's self * Rename variables for dialog handling in rrweb replay module * Update packages/rrdom/src/document.ts --------- Co-authored-by: Eoghan Murray <[email protected]> * Added session downloader for chrome extension (rrweb-io#1522) * Added session downloader for chrome extension - The session list now has a button to download sessions as .json files for use with rrweb-player - Improved styling for the delete and download buttons * Reverse monkey patch built in methods to support LWC (rrweb-io#1509) * Get around monkey patched Nodes * inlineImages: Setting of `image.crossOrigin` is not always necessary (rrweb-io#1468) Setting of the `crossorigin` attribute is not necessary for same-origin images, and causes an immediate image reload (albeit from cache) necessitating the use of a load event listener which subsequently mutates the snapshot. This change allows us to avoid the mutation of the snapshot for the same-origin case. * Modify inlineImages test to remove delay and show that we can inline images without mutation * Add an explicit test for when the `image.crossOrigin = 'anonymous';` method is necessary. Uses a combination of about:blank and our test server to simulate a cross-origin context * Other test changes: there were some spurious rrweb mutations being generated by the addition of the crossorigin attribute that are now elimnated from the rrweb/__snapshots__/integration.test.ts.snap after this PR - this is good * Move `childNodes` to @rrweb/utils * Use non-monkey patched versions of the `childNodes`, `parentNode` `parentElement` `textContent` accessors * Add getRootNode and contains, and add comprehensive todo list * chore: Update turbo.json tasks for better build process * Update caniuse-lite * chore: Update eslint-plugin-compat to version 5.0.0 * chore: Bump @rrweb/utils version to 2.0.0-alpha.15 * delete unused yarn.lock files * Set correct @rrweb/utils version in package.json * Migrate over some accessors to reverse-monkey-patched version * Add missing functions * Fix illegal invocation error * Revert closer to what it was. This feels incorrect to me (Justin Halsall), but some of the tests break without it so I'm restoring this to be closer to its original here: https://github.com/rrweb-io/rrweb/blame/cfd686d488a9b88dba6b6f8880b5e4375dd8062c/packages/rrweb-snapshot/src/snapshot.ts#L1011 * Reverse monkey patch all methods LWC hijacks * Make tests more stable * Safely handle rrdom nodes in hasShadowRoot * Remove duplicated test * Use variable `serverURL` in test * Use monorepo default browserlist * Fix typing issue for new typescript * Remove unused package * Remove unused code * Add prefix to reverse-monkey-patched methods to make them more explicit * Add default exports to @rrweb/utils --------- Co-authored-by: Eoghan Murray <[email protected]> * Version Packages (alpha) (rrweb-io#1526) Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * Single style capture (rrweb-io#1437) Support a contrived/rare case where a <style> element has multiple text node children (this is usually only possible to recreate via javascript append) ... this PR fixes cases where there are subsequent text mutations to these nodes; previously these would have been lost * In this scenario, a new CSS comment may now be inserted into the captured `_cssText` for a <style> element to show where it should be broken up into text elements upon replay: `/* rr_split */` * The new 'can record and replay style mutations' test is the principal way to the problematic scenarios, and is a detailed 'catch-all' test with many checks to cover most of the ways things can fail * There are new tests for splitting/rebuilding the css using the rr_split marker * The prior 'dynamic stylesheet' route is now the main route for serializing a stylesheet; dynamic stylesheet were missed out in rrweb-io#1533 but that case is now covered with this PR This PR was originally extracted from rrweb-io#1475 so the initial motivation was to change the approach on stringifying <style> elements to do so in a single place. This is also the motivating factor for always serializing <style> elements via the `_cssText` attribute rather than in it's childNodes; in rrweb-io#1475 we will be delaying populating `_cssText` for performance and instead recorrding them as assets. Thanks for the detailed review to Justin Halsall <[email protected]> & Yun Feng <https://github.com/YunFeng0817> * Simplify the hover replacement function (rrweb-io#1535) Simplify the hover replacement function, which has been borrowed from postcss-pseudo-classes Note: 'parses nested commas in selectors correctly' was failing after this PR, however I don't think that the previous behaviour was desirable, so have added a new test to formalize this expectation * fix some typos in optimize-storage.md (rrweb-io#1565) * fix some typos in optimize-storage.md * Update docs/recipes/optimize-storage.md * Create metal-mugs-mate.md --------- Co-authored-by: Justin Halsall <[email protected]> * fix(rrdom): Ignore invalid DOM attributes when diffing (rrweb-io#1561) * fix(rrdom): Ignore invalid DOM attributes when diffing (rrweb-io#213) We encountered an issue where replays with invalid attributes (e.g. `@click`) would break rendering the replay after seeking. The exception bubbles up to [here](https://github.com/rrweb-io/rrweb/blob/62093d4385a09eb0980c2ac02d97eea5ce2882be/packages/rrweb/src/replay/index.ts#L270-L279), which means the replay will continue to play, but the replay mirror will be incomplete. Closes https://github.com/getsentry/team-replay/issues/458 * add changeset * fix(snapshot): dimensions for blocked element not being applied (rrweb-io#1331) fix for replay of a blocked element when using 'fast forward' (rrdom) - Dimensions were not being properly applied when you seek to a position in the replay. Need to use `setProperty` rather than trying to set the width/height directly * ref: isParentRemoved to cache subtree (rrweb-io#1543) * ref: isParentRemoved to cache subtree * ref: cache at insertion too * ref: remove wrapper function --------- Co-authored-by: Justin Halsall <[email protected]> * changeset to 2.0.13 * fix snapshot build --------- Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: Justin Halsall <[email protected]> Co-authored-by: Alexey Babik <[email protected]> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: David Newell <[email protected]> Co-authored-by: Paul D'Ambra <[email protected]> Co-authored-by: Christopher Arredondo <[email protected]> Co-authored-by: Yun Feng <[email protected]> Co-authored-by: minja malešević <[email protected]> Co-authored-by: Jeff Nguyen <[email protected]> Co-authored-by: eoghanmurray <[email protected]> Co-authored-by: Arun Kunigiri <[email protected]> Co-authored-by: Riadh Mouamnia <[email protected]> Co-authored-by: Billy Vong <[email protected]> Co-authored-by: Jonas <[email protected]> Co-authored-by: Shay Malchi <[email protected]>
giraffekey
pushed a commit
to giraffekey/highlight
that referenced
this pull request
Nov 21, 2024
…t#9186) ## Summary rrweb-io/rrweb#1458 introduced issues with certain customers' applications such as: ```js Uncaught CssSyntaxError: <css input>:1778:83: Unknown word Uncaught CssSyntaxError: <css input>:1:65502: Unknown word Uncaught CssSyntaxError: <css input>:1:2: Unclosed block ``` example of such a session: https://app.highlight.io/92422/sessions/qGaSpGVNh4Ewqj8k23lNC5zNtcB1 affected highlight.run clients are >=9.1.5 with certain bundled CSS this may also affect the replayer so the new frontend usage of rrweb is affected ## How did you test this change? fixes playback of [session that used to not play](https://app.highlight.io/92422/sessions/qGaSpGVNh4Ewqj8k23lNC5zNtcB1) <img width="1487" alt="Screenshot 2024-08-19 at 15 54 49" src="https://github.com/user-attachments/assets/305779eb-6ee4-489f-999c-3c608f04d86b"> new client build working <img width="1403" alt="Screenshot 2024-08-19 at 16 07 24" src="https://github.com/user-attachments/assets/f6a46f8f-827f-42b0-acc2-cd01fc2ae249"> ## Are there any deployment considerations? new changeset ## Does this work require review from our design team? no
giraffekey
pushed a commit
to giraffekey/highlight
that referenced
this pull request
Nov 21, 2024
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and publish to npm yourself or [setup this action to publish automatically](https://github.com/changesets/action#with-publishing). If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## [email protected] ### Patch Changes - 262a073: revert postcss changes to css parsing in rrweb <rrweb-io/rrweb#1458> introduced a new CSS parser which causes issues with certain large CSS files ## @highlight-run/[email protected] ### Patch Changes - Updated dependencies [262a073] - [email protected] - @highlight-run/[email protected] - @highlight-run/[email protected] ## @highlight-run/[email protected] ### Patch Changes - Updated dependencies [262a073] - [email protected] ## @highlight-run/[email protected] ### Patch Changes - Updated dependencies [262a073] - [email protected] - @highlight-run/[email protected] - @highlight-run/[email protected] --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: Vadim Korolik <[email protected]>
eoghanmurray
pushed a commit
that referenced
this pull request
Feb 6, 2025
* postcss was introduced in #1458 for use within adaptCssForReplay * #1600 fixes the main case where invalid css could be introduced when if valid css from the output of `sheet.cssRules` was split according to how it was split across text nodes of the <style> * the guard introduced here is still useful as we likely in future will switch to capturing the raw stylesheet contents (both <style> and <link>), at which point we will be much less confident of getting valid css
gnpaone
added a commit
to Midpath-Software/rrweb
that referenced
this pull request
Feb 7, 2025
* Fix up the 'should replace the existing DOM nodes on iframe navigation with `isAttachIframe`' test (rrweb-io#1636) - it was working for me when the test was run in isolation (`-t` option), but when the entire cross-origin-iframes test was run, the change of iframe contents didn't seem to happen in time * [chore]: Update actions/upload-artifact to v4 (rrweb-io#1643) * update actions/upload-artifact to v4 --------- Co-authored-by: Eoghan Murray <[email protected]> * Fix a code path where masking could be skipped on textareas (rrweb-io#1599) * Fixes rrweb-io#1596 * [chore] Cache yarn packages for CI (rrweb-io#1646) * [chore] Cache yarn packages for CI * Cache yarn in release.yml * [chore] Update deprecated download artifact on CI (rrweb-io#1647) * I'm merging even though ESLint is stlll failing in Github Actions as I believe it's running actions _without_ this PR applied yet * Fix env puppeteer error in cross-origin-iframes.test.ts (rrweb-io#1629) * chore(ci): track bundle size (rrweb-io#1630) * chore(ci): track bundle size --------- Co-authored-by: pauldambra <[email protected]> * Fix adapt css with split (rrweb-io#1600) Fix for rrweb-io#1575 where postcss was raising an exception * adapt the entire CSS as a whole in one pass with postcss, rather than adapting each split part separately * break up the postcss output again and assign to individual text nodes (kind of inverse of splitCssText at record side) * impose an upper bound of 30 iterations on the substring searches to preempt possible pathological behavior * add tests to demonstrate the scenario and prevent regression More technical details: * Fix algorithm; checks against `ix_end` within loop were incorrect when `ix_start` was bigger than zero. * Fix that length check against wrong array was causing 'should record style mutations with multiple child nodes and replay them correctly' test to fail. Note on last point: I haven't looked into things more deeply than that the test was complaining about missing .length after `replayer.pause(1000);` * Warn instead of fail on exceptions thrown from postcss (rrweb-io#1580) * postcss was introduced in rrweb-io#1458 for use within adaptCssForReplay * rrweb-io#1600 fixes the main case where invalid css could be introduced when if valid css from the output of `sheet.cssRules` was split according to how it was split across text nodes of the <style> * the guard introduced here is still useful as we likely in future will switch to capturing the raw stylesheet contents (both <style> and <link>), at which point we will be much less confident of getting valid css * Fix splitCssText again (rrweb-io#1640) Fixes a browser 'lock up' at record time due to a presence of large amounts of css in <style> elements, which are split over multiple text nodes, which triggers the new code added in rrweb-io#1437 (see that PR for full explanation of why this all exists). rrweb-io#1437 was not written with performance in mind as it was believed to be an edge case, but things like Grammarly browser extension (rrweb-io#1603) among other scenarios were triggering pathological behavior, some of which was solved in rrweb-io#1615. See also rrweb-io#1640 (comment) for further discussion. * Fix the case when there are multiple matches and we end up not finding a unique one - just go with the best guess when there are many splits by looking at the previous chunk's size * Also add '0px' -> '0' stylesheet normalization, which also fixes the sample problem in a different way * Add new test and modify it so that it can trigger a failure in the absence of the '0px' normalization; there may be other unknown ways of triggering a similar bug, so ensure that the primary 'best guess' method doesn't suffer a regression * Leverage the 'best guess' method so that we can quit after 100 iterations trying to find a unique substring; hopefully this bit along with the `iterLimit` already added will prevent any future pathological cases. Failing example extracted from large files identified by Paul D'Ambra (Posthog) ... see comment from MartinWorkfully: PostHog/posthog-js#1668 * fix: move patch function into utils to improve bundling (rrweb-io#1631) * fix: move patch function into utils to improve bundling --------- Co-authored-by: pauldambra <[email protected]> Co-authored-by: Justin Halsall <[email protected]> --------- Co-authored-by: Eoghan Murray <[email protected]> Co-authored-by: Kevin Townsend <[email protected]> Co-authored-by: Justin Halsall <[email protected]> Co-authored-by: Paul D'Ambra <[email protected]> Co-authored-by: pauldambra <[email protected]> Co-authored-by: John Henry Gunther <[email protected]>
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.
rrweb-snapshotparses stylesheets to adapt the CSS for playbackIn certain cases the parsing wasn't always correct:
PostHog/posthog#21427
#1379
Which led to improved CSS selector efforts first included in
[email protected](#1401)Sadly this caused playback issues that consumed 100% CPU and froze playback
PostHog/posthog#21791
CSS parsing is performed in the https://github.com/rrweb-io/rrweb/blob/master/packages/rrweb-snapshot/src/css.ts which was pulled from https://github.com/reworkcss/css (which hasn't been updated in over 3 years)
I propose moving to https://github.com/csstree/csstree which creates an actual AST which can be used to effectively debug via https://astexplorer.net
I couldn't figure out some import issues in the
test/integration.test.tsAll
test/css.test.tstests still pass which confirms this is as good as the trickiest cases previously handled without any of the slowness introduced in #1401