storybook-addon-pseudo-states 1.15.2--canary.45.85eb83a.0 → 1.15.2--canary.f030ea1.0

package/dist/cjs/constants.js

@@ -3,19 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOOL_ID = exports.PSEUDO_STATES = exports.EXCLUDED_PSEUDO_ELEMENTS = exports.ADDON_ID = void 0;
+exports.TOOL_ID = exports.PSEUDO_STATES = exports.ADDON_ID = void 0;
 const ADDON_ID = "storybook/pseudo-states";
 exports.ADDON_ID = ADDON_ID;
 const TOOL_ID = `${ADDON_ID}/tool`;
 
-// Pseudo-elements which are not allowed to have classes applied on them
-// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector
-exports.TOOL_ID = TOOL_ID;
-const EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
-
 // Dynamic pseudo-classes
 // @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos
-exports.EXCLUDED_PSEUDO_ELEMENTS = EXCLUDED_PSEUDO_ELEMENTS;
+exports.TOOL_ID = TOOL_ID;
 const PSEUDO_STATES = {
   hover: "hover",
   active: "active",

package/dist/cjs/rewriteStyleSheet.js

@@ -16,7 +16,6 @@ const warnOnce = message => {
   console.warn(message);
   warnings.add(message);
 };
-const isExcludedPseudoElement = (selector, pseudoState) => _constants.EXCLUDED_PSEUDO_ELEMENTS.some(element => selector.endsWith(`${element}:${pseudoState}`));
 const rewriteRule = (cssText, selectorText, shadowRoot) => {
   return cssText.replace(selectorText, (0, _splitSelectors.splitSelectors)(selectorText).flatMap(selector => {
     if (selector.includes(".pseudo-")) {
@@ -30,12 +29,12 @@ const rewriteRule = (cssText, selectorText, shadowRoot) => {
       states.push(state);
       return "";
     });
-    const classSelector = states.reduce((acc, state) => !isExcludedPseudoElement(selector, state) && acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`), selector);
+    const classSelector = states.reduce((acc, state) => acc.replace(new RegExp(`:${state}`, "g"), `.pseudo-${state}`), selector);
     if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
-      return [selector, classSelector].filter(Boolean);
+      return [selector, classSelector];
     }
     const ancestorSelector = shadowRoot ? `:host(${states.map(s => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map(s => `.pseudo-${s}`).join("")} ${plainSelector}`;
-    return [selector, classSelector, ancestorSelector].filter(selector => selector && !selector.includes(":not()"));
+    return [selector, classSelector, ancestorSelector].filter(selector => !selector.includes(":not()"));
   }).join(", "));
 };
 

package/dist/cjs/rewriteStyleSheet.test.js

@@ -30,12 +30,6 @@ describe("rewriteStyleSheet", () => {
     (0, _rewriteStyleSheet.rewriteStyleSheet)(sheet);
     expect(sheet.cssRules[0]).toContain(".pseudo-hover a");
   });
-  it("does not add .pseudo-<class> to pseudo-class, which does not support classes", () => {
-    const sheet = new Sheet("::-webkit-scrollbar-thumb:hover { border-color: transparent; }");
-    (0, _rewriteStyleSheet.rewriteStyleSheet)(sheet);
-    console.log(sheet.cssRules[0]);
-    expect(sheet.cssRules[0]).not.toContain("::-webkit-scrollbar-thumb.pseudo-hover");
-  });
   it("adds alternative selector for each pseudo selector", () => {
     const sheet = new Sheet("a:hover, a:focus { color: red }");
     (0, _rewriteStyleSheet.rewriteStyleSheet)(sheet);

package/dist/cjs/withPseudoState.js

@@ -14,9 +14,10 @@ const channel = _addons.addons.getChannel();
 const shadowHosts = new Set();
 
 // Drops any existing pseudo state classnames that carried over from a previously viewed story
-// before adding the new classnames. We do this the old-fashioned way, for IE compatibility.
+// before adding the new classnames. We use forEach for IE compatibility.
 const applyClasses = (element, classnames) => {
-  element.className = element.className.split(" ").filter(classname => classname && classname.indexOf("pseudo-") !== 0).concat(...classnames).join(" ");
+  Object.values(_constants.PSEUDO_STATES).forEach(state => element.classList.remove(`pseudo-${state}`));
+  classnames.forEach(classname => element.classList.add(classname));
 };
 const applyParameter = (rootElement, parameter) => {
   const map = new Map([[rootElement, new Set()]]);
@@ -66,6 +67,9 @@ const withPseudoState = (StoryFn, _ref2) => {
   const {
     pseudo: globals
   } = globalsArgs;
+  const canvasElement = viewMode === "docs" ? document.getElementById(`story--${id}`) : document.getElementById("storybook-root") ||
+  // Storybook 7.0+
+  document.getElementById("root");
 
   // Sync parameter to globals, used by the toolbar (only in canvas as this
   // doesn't make sense for docs because many stories are displayed at once)
@@ -83,12 +87,11 @@ const withPseudoState = (StoryFn, _ref2) => {
   // Then update each shadow host to redetermine its own pseudo classnames.
   (0, _addons.useEffect)(() => {
     const timeout = setTimeout(() => {
-      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : `root`);
-      applyParameter(element, globals || parameter);
+      applyParameter(canvasElement, globals || parameter);
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
-  }, [globals, parameter, viewMode]);
+  }, [canvasElement, globals, parameter]);
   return StoryFn();
 };
 

package/dist/esm/constants.js

@@ -1,10 +1,6 @@
 export const ADDON_ID = "storybook/pseudo-states";
 export const TOOL_ID = `${ADDON_ID}/tool`;
 
-// Pseudo-elements which are not allowed to have classes applied on them
-// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector
-export const EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
-
 // Dynamic pseudo-classes
 // @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos
 export const PSEUDO_STATES = {

package/dist/esm/rewriteStyleSheet.js

@@ -1,4 +1,4 @@
-import { PSEUDO_STATES, EXCLUDED_PSEUDO_ELEMENTS } from "./constants";
+import { PSEUDO_STATES } from "./constants";
 import { splitSelectors } from "./splitSelectors";
 const pseudoStates = Object.values(PSEUDO_STATES);
 const matchOne = new RegExp(`:(${pseudoStates.join("|")})`);
@@ -10,7 +10,6 @@ const warnOnce = message => {
   console.warn(message);
   warnings.add(message);
 };
-const isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some(element => selector.endsWith(`${element}:${pseudoState}`));
 const rewriteRule = (cssText, selectorText, shadowRoot) => {
   return cssText.replace(selectorText, splitSelectors(selectorText).flatMap(selector => {
     if (selector.includes(".pseudo-")) {
@@ -24,12 +23,12 @@ const rewriteRule = (cssText, selectorText, shadowRoot) => {
       states.push(state);
       return "";
     });
-    const classSelector = states.reduce((acc, state) => !isExcludedPseudoElement(selector, state) && acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`), selector);
+    const classSelector = states.reduce((acc, state) => acc.replace(new RegExp(`:${state}`, "g"), `.pseudo-${state}`), selector);
     if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
-      return [selector, classSelector].filter(Boolean);
+      return [selector, classSelector];
     }
     const ancestorSelector = shadowRoot ? `:host(${states.map(s => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map(s => `.pseudo-${s}`).join("")} ${plainSelector}`;
-    return [selector, classSelector, ancestorSelector].filter(selector => selector && !selector.includes(":not()"));
+    return [selector, classSelector, ancestorSelector].filter(selector => !selector.includes(":not()"));
   }).join(", "));
 };
 

package/dist/esm/rewriteStyleSheet.test.js

@@ -28,12 +28,6 @@ describe("rewriteStyleSheet", () => {
     rewriteStyleSheet(sheet);
     expect(sheet.cssRules[0]).toContain(".pseudo-hover a");
   });
-  it("does not add .pseudo-<class> to pseudo-class, which does not support classes", () => {
-    const sheet = new Sheet("::-webkit-scrollbar-thumb:hover { border-color: transparent; }");
-    rewriteStyleSheet(sheet);
-    console.log(sheet.cssRules[0]);
-    expect(sheet.cssRules[0]).not.toContain("::-webkit-scrollbar-thumb.pseudo-hover");
-  });
   it("adds alternative selector for each pseudo selector", () => {
     const sheet = new Sheet("a:hover, a:focus { color: red }");
     rewriteStyleSheet(sheet);

package/dist/esm/withPseudoState.js

@@ -7,9 +7,10 @@ const channel = addons.getChannel();
 const shadowHosts = new Set();
 
 // Drops any existing pseudo state classnames that carried over from a previously viewed story
-// before adding the new classnames. We do this the old-fashioned way, for IE compatibility.
+// before adding the new classnames. We use forEach for IE compatibility.
 const applyClasses = (element, classnames) => {
-  element.className = element.className.split(" ").filter(classname => classname && classname.indexOf("pseudo-") !== 0).concat(...classnames).join(" ");
+  Object.values(PSEUDO_STATES).forEach(state => element.classList.remove(`pseudo-${state}`));
+  classnames.forEach(classname => element.classList.add(classname));
 };
 const applyParameter = (rootElement, parameter) => {
   const map = new Map([[rootElement, new Set()]]);
@@ -59,6 +60,9 @@ export const withPseudoState = (StoryFn, _ref2) => {
   const {
     pseudo: globals
   } = globalsArgs;
+  const canvasElement = viewMode === "docs" ? document.getElementById(`story--${id}`) : document.getElementById("storybook-root") ||
+  // Storybook 7.0+
+  document.getElementById("root");
 
   // Sync parameter to globals, used by the toolbar (only in canvas as this
   // doesn't make sense for docs because many stories are displayed at once)
@@ -76,12 +80,11 @@ export const withPseudoState = (StoryFn, _ref2) => {
   // Then update each shadow host to redetermine its own pseudo classnames.
   useEffect(() => {
     const timeout = setTimeout(() => {
-      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : `root`);
-      applyParameter(element, globals || parameter);
+      applyParameter(canvasElement, globals || parameter);
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
-  }, [globals, parameter, viewMode]);
+  }, [canvasElement, globals, parameter]);
   return StoryFn();
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "1.15.2--canary.45.85eb83a.0",
+  "version": "1.15.2--canary.f030ea1.0",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",