fix: shopify sites re-add stripped css (#22942)

PostHog · Jun 13, 2024 · a8ca0a7 · a8ca0a7
1 parent 23147c0
commit a8ca0a7
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png b/frontend/__snapshots__/scenes-app-insights--trends-line-edit--light.png
diff --git a/frontend/src/scenes/session-recordings/player/rrweb/index.ts b/frontend/src/scenes/session-recordings/player/rrweb/index.ts
@@ -66,7 +66,13 @@ export const CorsPlugin: ReplayPlugin & {
     },
 }
 
+const defaultStyleRules = `.ph-no-capture { background-image: ${PLACEHOLDER_SVG_DATA_IMAGE_URL} }`
+// replaces a common rule in Shopify templates removed during capture
+// fix tracked in https://github.com/rrweb-io/rrweb/pull/1322
+const shopifyShorthandCSSFix =
+    '@media (prefers-reduced-motion: no-preference) { .scroll-trigger:not(.scroll-trigger--offscreen).animate--slide-in { animation: var(--animation-slide-in) } }'
+
 export const COMMON_REPLAYER_CONFIG: Partial<playerConfig> = {
     triggerFocus: false,
-    insertStyleRules: [`.ph-no-capture {   background-image: ${PLACEHOLDER_SVG_DATA_IMAGE_URL} }`],
+    insertStyleRules: [defaultStyleRules, shopifyShorthandCSSFix],
 }