From 83bd302eec09b6c3ebd752de80791d2c882c20d7 Mon Sep 17 00:00:00 2001 From: Jono Kolnik <1164060+JonathanKolnik@users.noreply.github.com> Date: Wed, 9 Aug 2023 09:19:37 -0400 Subject: [PATCH] rename to all and don't add "-all" to dropdown --- src/constants.ts | 9 --------- src/preview/rewriteStyleSheet.test.ts | 14 +++++++------- src/preview/rewriteStyleSheet.ts | 4 ++-- src/preview/withPseudoState.ts | 16 +++++++++++++--- stories/Button.stories.js | 14 +++++++------- stories/grid.css | 14 +++++++------- 6 files changed, 36 insertions(+), 35 deletions(-) diff --git a/src/constants.ts b/src/constants.ts index b534859..00a71a1 100644 --- a/src/constants.ts +++ b/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 diff --git a/src/preview/rewriteStyleSheet.test.ts b/src/preview/rewriteStyleSheet.test.ts index 5e653a2..1788ad5 100644 --- a/src/preview/rewriteStyleSheet.test.ts +++ b/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- 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,7 +71,7 @@ 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", () => { @@ -79,7 +79,7 @@ describe("rewriteStyleSheet", () => { 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") }) }) diff --git a/src/preview/rewriteStyleSheet.ts b/src/preview/rewriteStyleSheet.ts index 720b264..30d9af5 100644 --- 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-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()") diff --git a/src/preview/withPseudoState.ts b/src/preview/withPseudoState.ts index e08507a..f04c796 100644 --- a/src/preview/withPseudoState.ts +++ b/src/preview/withPseudoState.ts @@ -25,7 +25,10 @@ const shadowHosts = new Set() // 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) => { - 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() - 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) }) } diff --git a/stories/Button.stories.js b/stories/Button.stories.js index 645bcc3..27daba5 100644 --- a/stories/Button.stories.js +++ b/stories/Button.stories.js @@ -15,25 +15,25 @@ export const All = () => (
-
+
-
+
-
+
-
+
-
+
-
+
-
+
diff --git a/stories/grid.css b/stories/grid.css index 5c517bd..a36c7bf 100644 --- a/stories/grid.css +++ b/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;