From 7274efd2c54828023d87f6bb6332e9fb4d33553e Mon Sep 17 00:00:00 2001
From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com>
Date: Thu, 3 Aug 2023 12:47:06 -0400
Subject: [PATCH] wip

---
 src/preview/rewriteStyleSheet.ts | 26 +++++++++++++++++---------
 src/preview/withPseudoState.ts   |  3 ++-
 stories/Button.stories.js        | 17 +++++++++++++++++
 3 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/src/preview/rewriteStyleSheet.ts b/src/preview/rewriteStyleSheet.ts
index bd9feeb..1218080 100644
--- a/src/preview/rewriteStyleSheet.ts
+++ b/src/preview/rewriteStyleSheet.ts
@@ -16,7 +16,12 @@ const warnOnce = (message: string) => {
 const isExcludedPseudoElement = (selector: string, pseudoState: string) =>
   EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`))
 
-const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: ShadowRoot) => {
+const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, { shadowRoot, pseudo }: {
+  shadowRoot?: ShadowRoot,
+  pseudo?: any
+}) => {
+
+
   return cssText.replace(
     selectorText,
     splitSelectors(selectorText)
@@ -46,7 +51,14 @@ const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: Shado
           ? `:host(${states.map((s) => `.pseudo-${s}`).join("")}) ${plainSelector}`
           : `${states.map((s) => `.pseudo-${s}`).join("")} ${plainSelector}`
 
-        return [selector, classSelector, ancestorSelector].filter(
+        const includeAncestor = !pseudo || states.some((state) => pseudo[state] === true)
+        const selectors = [
+          selector,
+          classSelector,
+          ...(includeAncestor ? [ancestorSelector] : [])
+        ]
+
+        return selectors.filter(
           (selector) => selector && !selector.includes(":not()")
         )
       })
@@ -59,13 +71,9 @@ const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: Shado
 export const rewriteStyleSheet = (
   sheet: CSSStyleSheet,
   shadowRoot?: ShadowRoot,
-  shadowHosts?: Set<Element>
+  shadowHosts?: Set<Element>,
+  pseudo: any
 ) => {
-  // @ts-expect-error
-  if(sheet.__pseudoStatesRewritten) return
-  // @ts-expect-error
-  sheet.__pseudoStatesRewritten = true
-
   try {
     let index = -1
     for(const cssRule of sheet.cssRules) {
@@ -73,7 +81,7 @@ export const rewriteStyleSheet = (
       if(!("selectorText" in cssRule)) continue
       const styleRule = cssRule as CSSStyleRule
       if(matchOne.test(styleRule.selectorText)) {
-        const newRule = rewriteRule(styleRule, shadowRoot)
+        const newRule = rewriteRule(styleRule, { shadowRoot, pseudo })
         sheet.deleteRule(index)
         sheet.insertRule(newRule, index)
         if(shadowRoot && shadowHosts) shadowHosts.add(shadowRoot.host)
diff --git a/src/preview/withPseudoState.ts b/src/preview/withPseudoState.ts
index 6bceb94..814894d 100644
--- a/src/preview/withPseudoState.ts
+++ b/src/preview/withPseudoState.ts
@@ -133,9 +133,10 @@ export const withPseudoState: DecoratorFunction = (
 
 // Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
 const rewriteStyleSheets = (shadowRoot?: ShadowRoot) => {
+  const pseudo = channel.data.storyPrepared[0].parameters.pseudo
   let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets)
   if(shadowRoot?.adoptedStyleSheets?.length) styleSheets = shadowRoot.adoptedStyleSheets
-  styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts))
+  styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts, pseudo))
 }
 
 // Only track shadow hosts for the current story
diff --git a/stories/Button.stories.js b/stories/Button.stories.js
index 2444775..eb5c935 100644
--- a/stories/Button.stories.js
+++ b/stories/Button.stories.js
@@ -86,3 +86,20 @@ DirectSelector.parameters = {
     active: ["[data-active]"],
   },
 }
+
+export const DirectSelectorParentDoesNotAffectDescendants = () => (
+  <>
+    <Button data-hover>Hovered 1</Button>
+
+    <div data-hover>
+      <Button>Not Hovered 1 </Button>
+      <Button>Not Hovered 2</Button>
+    </div>
+  </>
+)
+
+DirectSelectorParentDoesNotAffectDescendants.parameters = {
+  pseudo: {
+    hover: ["[data-hover]"],
+  },
+}