differentiate pseudo classes written due to boolean vs selector

chromaui · Aug 7, 2023 · e98954d · e98954d
1 parent ae9cbf6
commit e98954d
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 17 deletions.
diff --git a/src/constants.ts b/src/constants.ts
@@ -17,6 +17,15 @@ export const PSEUDO_STATES = {
   visited: "visited",
   link: "link",
   target: "target",
+  "ancestor-hover": "ancestor-hover",
+  "ancestor-active": "ancestor-active",
+  "ancestor-focusVisible": "ancestor-focus-visible",
+  "ancestor-focusWithin": "ancestor-focus-within",
+  "ancestor-focus": "ancestor-focus", // must come after its alternatives
+  "ancestor-visited": "ancestor-visited",
+  "ancestor-link": "ancestor-link",
+  "ancestor-target": "ancestor-target",
+
 } as const
 
 export type PseudoState = keyof typeof PSEUDO_STATES
diff --git a/src/preview/rewriteStyleSheet.ts b/src/preview/rewriteStyleSheet.ts
@@ -43,8 +43,8 @@ const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: Shado
         }
 
         const ancestorSelector = shadowRoot
-          ? `:host(${states.map((s) => `.pseudo-${s}`).join("")}) ${plainSelector}`
-          : `${states.map((s) => `.pseudo-${s}`).join("")} ${plainSelector}`
+          ? `:host(${states.map((s) => `.pseudo-ancestor-${s}`).join("")}) ${plainSelector}`
+          : `${states.map((s) => `.pseudo-ancestor-${s}`).join("")} ${plainSelector}`
 
         return [selector, classSelector, ancestorSelector].filter(
           (selector) => selector && !selector.includes(":not()")

diff --git a/src/preview/withPseudoState.ts b/src/preview/withPseudoState.ts
@@ -37,7 +37,7 @@ const applyParameter = (rootElement: Element, parameter: PseudoStateConfig = {})
   ;(Object.entries(parameter || {}) as [PseudoState, any]).forEach(([state, value]) => {
     if (typeof value === "boolean") {
       // default API - applying pseudo class to root element.
-      if (value) add(rootElement, state)
+      if (value) add(rootElement, `ancestor-${state}` as PseudoState)
     } else if (typeof value === "string") {
       // explicit selectors API - applying pseudo class to a specific element
       rootElement.querySelectorAll(value).forEach((el) => add(el, state))

diff --git a/stories/Button.stories.js b/stories/Button.stories.js
@@ -15,25 +15,25 @@ export const All = () => (
     <div>
       <Button>Normal</Button>
     </div>
-    <div className="pseudo-hover">
+    <div className="pseudo-ancestor-hover">
       <Button>Hover</Button>
     </div>
-    <div className="pseudo-focus">
+    <div className="pseudo-ancestor-focus">
       <Button>Focus</Button>
     </div>
-    <div className="pseudo-active">
+    <div className="pseudo-ancestor-active">
       <Button>Active</Button>
     </div>
-    <div className="pseudo-hover pseudo-focus">
+    <div className="pseudo-ancestor-hover pseudo-ancestor-focus">
       <Button>Hover Focus</Button>
     </div>
-    <div className="pseudo-hover pseudo-active">
+    <div className="pseudo-ancestor-hover pseudo-ancestor-active">
       <Button>Hover Active</Button>
     </div>
-    <div className="pseudo-focus pseudo-active">
+    <div className="pseudo-ancestor-focus pseudo-ancestor-active">
       <Button>Focus Active</Button>
     </div>
-    <div className="pseudo-hover pseudo-focus pseudo-active">
+    <div className="pseudo-ancestor-hover pseudo-ancestor-focus pseudo-ancestor-active">
       <Button>Hover Focus Active</Button>
     </div>
   </div>

diff --git a/stories/grid.css b/stories/grid.css
@@ -12,37 +12,37 @@
   grid-area: normal;
   justify-self: center;
 }
-.story-grid > .pseudo-hover,
+.story-grid > .pseudo-ancestor-hover,
 .story-grid > [data-hover] {
   grid-area: hover;
   justify-self: right;
 }
-.story-grid > .pseudo-focus,
+.story-grid > .pseudo-ancestor-focus,
 .story-grid > [data-focus] {
   grid-area: focus;
   justify-self: center;
 }
-.story-grid > .pseudo-active,
+.story-grid > .pseudo-ancestor-active,
 .story-grid > [data-active] {
   grid-area: active;
   justify-self: left;
 }
-.story-grid > .pseudo-hover.pseudo-focus,
+.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-focus,
 .story-grid > [data-hover][data-focus] {
   grid-area: hover-focus;
   justify-self: right;
 }
-.story-grid > .pseudo-hover.pseudo-active,
+.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-active,
 .story-grid > [data-hover][data-active] {
   grid-area: hover-active;
   justify-self: center;
 }
-.story-grid > .pseudo-focus.pseudo-active,
+.story-grid > .pseudo-ancestor-focus.pseudo-ancestor-active,
 .story-grid > [data-focus][data-active] {
   grid-area: focus-active;
   justify-self: left;
 }
-.story-grid > .pseudo-hover.pseudo-focus.pseudo-active,
+.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-focus.pseudo-ancestor-active,
 .story-grid > [data-hover][data-focus][data-active] {
   grid-area: hover-focus-active;
   justify-self: center;