rename to all and don't add "-all" to dropdown

src/constants.ts

@@ -17,15 +17,6 @@ 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

src/preview/rewriteStyleSheet.test.ts

@@ -42,7 +42,7 @@ describe("rewriteStyleSheet", () => {
   it("adds alternative selector targeting an ancestor", () => {
     const sheet = new Sheet("a:hover { color: red }")
     rewriteStyleSheet(sheet as any)
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover-all a")
   })
 
   it("does not add .pseudo-<class> to pseudo-class, which does not support classes", () => {
@@ -56,8 +56,8 @@ describe("rewriteStyleSheet", () => {
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-hover")
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-focus")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover a")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-focus a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover-all a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-focus-all a")
   })
 
   it("keeps non-pseudo selectors as-is", () => {
@@ -71,15 +71,15 @@ describe("rewriteStyleSheet", () => {
     const sheet = new Sheet("a:hover:focus { color: red }")
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain("a.pseudo-hover.pseudo-focus")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover.pseudo-ancestor-focus a")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hove-allr.pseudo-focus-all a")
   })
 
   it("supports combined pseudo selectors with classes", () => {
     const sheet = new Sheet(".hiOZqY:hover { color: red }")
     rewriteStyleSheet(sheet as any)
     expect(sheet.cssRules[0].selectorText).toContain(".hiOZqY:hover")
     expect(sheet.cssRules[0].selectorText).toContain(".hiOZqY.pseudo-hover")
-    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-ancestor-hover .hiOZqY")
+    expect(sheet.cssRules[0].selectorText).toContain(".pseudo-hover-all .hiOZqY")
   })
 
   it('supports ":host"', () => {
@@ -115,10 +115,10 @@ describe("rewriteStyleSheet", () => {
     expect(sheet.cssRules[1].selectorText).toContain(".test")
     expect(sheet.cssRules[2].selectorText).toContain(".test:hover")
     expect(sheet.cssRules[2].selectorText).toContain(".test.pseudo-hover")
-    expect(sheet.cssRules[2].selectorText).toContain(".pseudo-ancestor-hover .test")
+    expect(sheet.cssRules[2].selectorText).toContain(".pseudo-hover-all .test")
     expect(sheet.cssRules[3].selectorText).toContain(".test2:hover")
     expect(sheet.cssRules[3].selectorText).toContain(".test2.pseudo-hover")
-    expect(sheet.cssRules[3].selectorText).toContain(".pseudo-ancestor-hover .test2")
+    expect(sheet.cssRules[3].selectorText).toContain(".pseudo-hover-all .test2")
 
   })
 })

src/preview/rewriteStyleSheet.ts

@@ -43,8 +43,8 @@ const rewriteRule = ({ cssText, selectorText }: CSSStyleRule, shadowRoot?: Shado
         }
 
         const ancestorSelector = shadowRoot
-          ? `:host(${states.map((s) => `.pseudo-ancestor-${s}`).join("")}) ${plainSelector}`
-          : `${states.map((s) => `.pseudo-ancestor-${s}`).join("")} ${plainSelector}`
+          ? `:host(${states.map((s) => `.pseudo-${s}-all`).join("")}) ${plainSelector}`
+          : `${states.map((s) => `.pseudo-${s}-all`).join("")} ${plainSelector}`
 
         return [selector, classSelector, ancestorSelector].filter(
           (selector) => selector && !selector.includes(":not()")

src/preview/withPseudoState.ts

@@ -25,7 +25,10 @@ const shadowHosts = new Set<Element>()
 // Drops any existing pseudo state classnames that carried over from a previously viewed story
 // before adding the new classnames. We use forEach for IE compatibility.
 const applyClasses = (element: Element, classnames: Set<string>) => {
-  Object.values(PSEUDO_STATES).forEach((state) => element.classList.remove(`pseudo-${state}`))
+  Object.values(PSEUDO_STATES).forEach((state) => {
+    element.classList.remove(`pseudo-${state}`)
+    element.classList.remove(`pseudo-${state}-all`)
+  })
   classnames.forEach((classname) => element.classList.add(classname))
 }
 
@@ -37,7 +40,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, `ancestor-${state}` as PseudoState)
+      if (value) add(rootElement, `${state}-all` 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))
@@ -49,7 +52,14 @@ const applyParameter = (rootElement: Element, parameter: PseudoStateConfig = {})
 
   map.forEach((states, target) => {
     const classnames = new Set<string>()
-    states.forEach((key) => PSEUDO_STATES[key] && classnames.add(`pseudo-${PSEUDO_STATES[key]}`))
+    states.forEach((key) => {
+      const keyWithoutAll = key.replace('-all', '') as PseudoState
+      if (PSEUDO_STATES[key]) {
+        classnames.add(`pseudo-${PSEUDO_STATES[key]}`)
+      } else if (PSEUDO_STATES[keyWithoutAll]) {
+        classnames.add(`pseudo-${PSEUDO_STATES[keyWithoutAll]}-all`)
+      }
+    })
     applyClasses(target, classnames)
   })
 }

stories/Button.stories.js

@@ -15,25 +15,25 @@ export const All = () => (
     <div>
       <Button>Normal</Button>
     </div>
-    <div className="pseudo-ancestor-hover">
+    <div className="pseudo-hover-all">
       <Button>Hover</Button>
     </div>
-    <div className="pseudo-ancestor-focus">
+    <div className="pseudo-focus-all">
       <Button>Focus</Button>
     </div>
-    <div className="pseudo-ancestor-active">
+    <div className="pseudo-active-all">
       <Button>Active</Button>
     </div>
-    <div className="pseudo-ancestor-hover pseudo-ancestor-focus">
+    <div className="pseudo-hover-all pseudo-focus-all">
       <Button>Hover Focus</Button>
     </div>
-    <div className="pseudo-ancestor-hover pseudo-ancestor-active">
+    <div className="pseudo-hover-all pseudo-active-all">
       <Button>Hover Active</Button>
     </div>
-    <div className="pseudo-ancestor-focus pseudo-ancestor-active">
+    <div className="pseudo-focus-all pseudo-active-all">
       <Button>Focus Active</Button>
     </div>
-    <div className="pseudo-ancestor-hover pseudo-ancestor-focus pseudo-ancestor-active">
+    <div className="pseudo-hover-all pseudo-focus-all pseudo-ancestor-active">
       <Button>Hover Focus Active</Button>
     </div>
   </div>

stories/grid.css

@@ -12,37 +12,37 @@
   grid-area: normal;
   justify-self: center;
 }
-.story-grid > .pseudo-ancestor-hover,
+.story-grid > .pseudo-hover-all,
 .story-grid > [data-hover] {
   grid-area: hover;
   justify-self: right;
 }
-.story-grid > .pseudo-ancestor-focus,
+.story-grid > .pseudo-focus-all,
 .story-grid > [data-focus] {
   grid-area: focus;
   justify-self: center;
 }
-.story-grid > .pseudo-ancestor-active,
+.story-grid > .pseudo-active-all,
 .story-grid > [data-active] {
   grid-area: active;
   justify-self: left;
 }
-.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-focus,
+.story-grid > .pseudo-hover-all.pseudo-focus-all,
 .story-grid > [data-hover][data-focus] {
   grid-area: hover-focus;
   justify-self: right;
 }
-.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-active,
+.story-grid > .pseudo-hover-all.pseudo-active-all,
 .story-grid > [data-hover][data-active] {
   grid-area: hover-active;
   justify-self: center;
 }
-.story-grid > .pseudo-ancestor-focus.pseudo-ancestor-active,
+.story-grid > .pseudo-focus-all.pseudo-active-all,
 .story-grid > [data-focus][data-active] {
   grid-area: focus-active;
   justify-self: left;
 }
-.story-grid > .pseudo-ancestor-hover.pseudo-ancestor-focus.pseudo-ancestor-active,
+.story-grid > .pseudo-hover-all.pseudo-focus-all.pseudo-active-all,
 .story-grid > [data-hover][data-focus][data-active] {
   grid-area: hover-focus-active;
   justify-self: center;