storybook-addon-pseudo-states 1.15.1 → 1.15.2--canary.45.07abc1b.0

package/dist/cjs/PseudoStateTool.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.PseudoStateTool = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _api = require("@storybook/api");
-
 var _components = require("@storybook/components");
-
 var _theming = require("@storybook/theming");
-
 var _constants = require("./constants");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 const LinkTitle = _theming.styled.span(_ref => {
   let {
     active
@@ -27,7 +19,6 @@ const LinkTitle = _theming.styled.span(_ref => {
     color: active ? _theming.color.secondary : "inherit"
   };
 });
-
 const LinkIcon = (0, _theming.styled)(_components.Icons)(_ref2 => {
   let {
     active
@@ -40,14 +31,14 @@ const LinkIcon = (0, _theming.styled)(_components.Icons)(_ref2 => {
   };
 });
 const options = Object.keys(_constants.PSEUDO_STATES).sort();
-
 const PseudoStateTool = () => {
   const [{
     pseudo
   }, updateGlobals] = (0, _api.useGlobals)();
-  const isActive = (0, _react.useCallback)(option => (pseudo === null || pseudo === void 0 ? void 0 : pseudo[option]) === true, [pseudo]);
+  const isActive = (0, _react.useCallback)(option => pseudo?.[option] === true, [pseudo]);
   const toggleOption = (0, _react.useCallback)(option => () => updateGlobals({
-    pseudo: { ...pseudo,
+    pseudo: {
+      ...pseudo,
       [option]: !isActive(option)
     }
   }), [pseudo]);
@@ -78,5 +69,4 @@ const PseudoStateTool = () => {
     icon: "button"
   })));
 };
-
 exports.PseudoStateTool = PseudoStateTool;

package/dist/cjs/constants.js

@@ -3,13 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOOL_ID = exports.PSEUDO_STATES = exports.ADDON_ID = void 0;
+exports.TOOL_ID = exports.PSEUDO_STATES = exports.EXCLUDED_PSEUDO_ELEMENTS = exports.ADDON_ID = void 0;
 const ADDON_ID = "storybook/pseudo-states";
 exports.ADDON_ID = ADDON_ID;
-const TOOL_ID = "".concat(ADDON_ID, "/tool"); // Dynamic pseudo-classes
-// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos
+const TOOL_ID = `${ADDON_ID}/tool`;
 
+// Pseudo-classes, which are not allowed to have classes applied on
+// 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;
 const PSEUDO_STATES = {
   hover: "hover",
   active: "active",

package/dist/cjs/preset/manager.js

@@ -1,11 +1,8 @@
 "use strict";
 
 var _addons = require("@storybook/addons");
-
 var _constants = require("../constants");
-
 var _PseudoStateTool = require("../PseudoStateTool");
-
 _addons.addons.register(_constants.ADDON_ID, () => {
   _addons.addons.add(_constants.TOOL_ID, {
     type: _addons.types.TOOL,

package/dist/cjs/preset/preview.js

@@ -4,8 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.decorators = void 0;
-
 var _withPseudoState = require("../withPseudoState");
-
 const decorators = [_withPseudoState.withPseudoState];
 exports.decorators = decorators;

package/dist/cjs/rewriteStyleSheet.js

@@ -4,58 +4,55 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rewriteStyleSheet = void 0;
-
 var _constants = require("./constants");
-
 var _splitSelectors = require("./splitSelectors");
-
 const pseudoStates = Object.values(_constants.PSEUDO_STATES);
-const matchOne = new RegExp(":(".concat(pseudoStates.join("|"), ")"));
-const matchAll = new RegExp(":(".concat(pseudoStates.join("|"), ")"), "g");
+const matchOne = new RegExp(`:(${pseudoStates.join("|")})`);
+const matchAll = new RegExp(`:(${pseudoStates.join("|")})`, "g");
 const warnings = new Set();
-
 const warnOnce = message => {
-  if (warnings.has(message)) return; // eslint-disable-next-line no-console
-
+  if (warnings.has(message)) return;
+  // eslint-disable-next-line no-console
   console.warn(message);
   warnings.add(message);
 };
-
 const rewriteRule = (cssText, selectorText, shadowRoot) => {
   return cssText.replace(selectorText, (0, _splitSelectors.splitSelectors)(selectorText).flatMap(selector => {
     if (selector.includes(".pseudo-")) {
       return [];
     }
-
     if (!matchOne.test(selector)) {
       return [selector];
     }
-
     const states = [];
     const plainSelector = selector.replace(matchAll, (_, state) => {
       states.push(state);
       return "";
     });
-    const classSelector = states.reduce((acc, state) => acc.replace(new RegExp(":".concat(state), "g"), ".pseudo-".concat(state)), selector);
-
+    const getDoesSelectorEndsWithExcludedPseudoElement = pseudo => _constants.EXCLUDED_PSEUDO_ELEMENTS.some(element => {
+      return selector.endsWith(`${element}:${pseudo}`);
+    });
+    const classSelector = states.reduce((acc, state) => {
+      if (getDoesSelectorEndsWithExcludedPseudoElement(state)) {
+        return undefined;
+      }
+      return acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`);
+    }, selector);
     if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
       return [selector, classSelector];
     }
-
-    const ancestorSelector = shadowRoot ? ":host(".concat(states.map(s => ".pseudo-".concat(s)).join(""), ") ").concat(plainSelector) : "".concat(states.map(s => ".pseudo-".concat(s)).join(""), " ").concat(plainSelector);
-    return [selector, classSelector, ancestorSelector].filter(selector => !selector.includes(":not()"));
+    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?.includes(":not()")).filter(Boolean);
   }).join(", "));
-}; // Rewrites the style sheet to add alternative selectors for any rule that targets a pseudo state.
-// A sheet can only be rewritten once, and may carry over between stories.
-
+};
 
+// Rewrites the style sheet to add alternative selectors for any rule that targets a pseudo state.
+// A sheet can only be rewritten once, and may carry over between stories.
 const rewriteStyleSheet = (sheet, shadowRoot, shadowHosts) => {
   if (sheet.__pseudoStatesRewritten) return;
   sheet.__pseudoStatesRewritten = true;
-
   try {
     let index = 0;
-
     for (const {
       cssText,
       selectorText
@@ -66,9 +63,7 @@ const rewriteStyleSheet = (sheet, shadowRoot, shadowHosts) => {
         sheet.insertRule(newRule, index);
         if (shadowRoot) shadowHosts.add(shadowRoot.host);
       }
-
       index++;
-
       if (index > 1000) {
         warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");
         break;
@@ -76,12 +71,11 @@ const rewriteStyleSheet = (sheet, shadowRoot, shadowHosts) => {
     }
   } catch (e) {
     if (e.toString().includes("cssRules")) {
-      warnOnce("Can't access cssRules, likely due to CORS restrictions: ".concat(sheet.href));
+      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`);
     } else {
       // eslint-disable-next-line no-console
       console.error(e, sheet.href);
     }
   }
 };
-
 exports.rewriteStyleSheet = rewriteStyleSheet;

package/dist/cjs/rewriteStyleSheet.test.js

@@ -1,31 +1,24 @@
 "use strict";
 
 var _rewriteStyleSheet = require("./rewriteStyleSheet");
-
 class Sheet {
   constructor() {
     this.__pseudoStatesRewritten = false;
-
     for (var _len = arguments.length, rules = new Array(_len), _key = 0; _key < _len; _key++) {
       rules[_key] = arguments[_key];
     }
-
     this.cssRules = rules.map(cssText => ({
       cssText,
       selectorText: cssText.slice(0, cssText.indexOf(" {"))
     }));
   }
-
   deleteRule(index) {
     this.cssRules.splice(index, 1);
   }
-
   insertRule(cssText, index) {
     this.cssRules.splice(index, 0, cssText);
   }
-
 }
-
 describe("rewriteStyleSheet", () => {
   it("adds alternative selector targeting the element directly", () => {
     const sheet = new Sheet("a:hover { color: red }");
@@ -37,6 +30,12 @@ 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/splitSelectors.js

@@ -4,19 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.splitSelectors = void 0;
-
 const isAtRule = selector => selector.indexOf("@") === 0;
-
 const splitSelectors = selectors => {
   if (isAtRule(selectors)) return [selectors];
   let result = [];
   let parentheses = 0;
   let brackets = 0;
   let selector = "";
-
   for (let i = 0, len = selectors.length; i < len; i++) {
     const char = selectors[i];
-
     if (char === "(") {
       parentheses += 1;
     } else if (char === ")") {
@@ -32,12 +28,9 @@ const splitSelectors = selectors => {
         continue;
       }
     }
-
     selector += char;
   }
-
   result.push(selector.trim());
   return result;
 };
-
 exports.splitSelectors = splitSelectors;

package/dist/cjs/splitSelectors.test.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _splitSelectors = require("./splitSelectors");
-
 describe("splitSelectors", () => {
   test("handles basic selectors", () => {
     expect((0, _splitSelectors.splitSelectors)(".a")).toEqual([".a"]);

package/dist/cjs/withPseudoState.js

@@ -4,33 +4,25 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.withPseudoState = void 0;
-
 var _addons = require("@storybook/addons");
-
 var _coreEvents = require("@storybook/core-events");
-
 var _constants = require("./constants");
-
 var _rewriteStyleSheet = require("./rewriteStyleSheet");
-
 /* eslint-env browser */
+
 const channel = _addons.addons.getChannel();
+const shadowHosts = new Set();
 
-const shadowHosts = new Set(); // Drops any existing pseudo state classnames that carried over from a previously viewed story
+// 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.
-
 const applyClasses = (element, classnames) => {
   element.className = element.className.split(" ").filter(classname => classname && classname.indexOf("pseudo-") !== 0).concat(...classnames).join(" ");
 };
-
 const applyParameter = (rootElement, parameter) => {
   const map = new Map([[rootElement, new Set()]]);
-
   const add = (target, state) => map.set(target, new Set([...(map.get(target) || []), state]));
-
   Object.entries(parameter || {}).forEach(_ref => {
     let [state, value] = _ref;
-
     if (typeof value === "boolean") {
       // default API - applying pseudo class to root element.
       add(rootElement, value && state);
@@ -44,25 +36,23 @@ const applyParameter = (rootElement, parameter) => {
   });
   map.forEach((states, target) => {
     const classnames = [];
-    states.forEach(key => _constants.PSEUDO_STATES[key] && classnames.push("pseudo-".concat(_constants.PSEUDO_STATES[key])));
+    states.forEach(key => _constants.PSEUDO_STATES[key] && classnames.push(`pseudo-${_constants.PSEUDO_STATES[key]}`));
     applyClasses(target, classnames);
   });
-}; // Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.
-// Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.
-
+};
 
+// Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.
+// Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.
 const updateShadowHost = shadowHost => {
   const classnames = new Set();
-
   for (let element = shadowHost.parentElement; element; element = element.parentElement) {
     if (!element.className) continue;
     element.className.split(" ").filter(classname => classname.indexOf("pseudo-") === 0).forEach(classname => classnames.add(classname));
   }
-
   applyClasses(shadowHost, classnames);
-}; // Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
-
+};
 
+// Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
 const withPseudoState = (StoryFn, _ref2) => {
   let {
     viewMode,
@@ -75,9 +65,10 @@ const withPseudoState = (StoryFn, _ref2) => {
   } = parameters;
   const {
     pseudo: globals
-  } = globalsArgs; // 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)
+  } = globalsArgs;
 
+  // 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)
   (0, _addons.useEffect)(() => {
     if (parameter !== globals && viewMode === "story") {
       channel.emit(_coreEvents.UPDATE_GLOBALS, {
@@ -86,49 +77,49 @@ const withPseudoState = (StoryFn, _ref2) => {
         }
       });
     }
-  }, [parameter, viewMode]); // Convert selected states to classnames and apply them to the story root element.
-  // Then update each shadow host to redetermine its own pseudo classnames.
+  }, [parameter, viewMode]);
 
+  // Convert selected states to classnames and apply them to the story root element.
+  // Then update each shadow host to redetermine its own pseudo classnames.
   (0, _addons.useEffect)(() => {
     const timeout = setTimeout(() => {
-      const element = document.getElementById(viewMode === "docs" ? "story--".concat(id) : "root");
+      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : `root`);
       applyParameter(element, globals || parameter);
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
   }, [globals, parameter, viewMode]);
   return StoryFn();
-}; // Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
-
+};
 
+// Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
 exports.withPseudoState = withPseudoState;
-
 const rewriteStyleSheets = shadowRoot => {
-  var _shadowRoot$adoptedSt;
-
   let styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
-  if (shadowRoot !== null && shadowRoot !== void 0 && (_shadowRoot$adoptedSt = shadowRoot.adoptedStyleSheets) !== null && _shadowRoot$adoptedSt !== void 0 && _shadowRoot$adoptedSt.length) styleSheets = shadowRoot.adoptedStyleSheets;
+  if (shadowRoot?.adoptedStyleSheets?.length) styleSheets = shadowRoot.adoptedStyleSheets;
   Array.from(styleSheets).forEach(sheet => (0, _rewriteStyleSheet.rewriteStyleSheet)(sheet, shadowRoot, shadowHosts));
-}; // Only track shadow hosts for the current story
-
+};
 
-channel.on(_coreEvents.STORY_CHANGED, () => shadowHosts.clear()); // Reinitialize CSS enhancements every time the story changes
+// Only track shadow hosts for the current story
+channel.on(_coreEvents.STORY_CHANGED, () => shadowHosts.clear());
 
-channel.on(_coreEvents.STORY_RENDERED, () => rewriteStyleSheets()); // Reinitialize CSS enhancements every time a docs page is rendered
+// Reinitialize CSS enhancements every time the story changes
+channel.on(_coreEvents.STORY_RENDERED, () => rewriteStyleSheets());
 
-channel.on(_coreEvents.DOCS_RENDERED, () => rewriteStyleSheets()); // IE doesn't support shadow DOM
+// Reinitialize CSS enhancements every time a docs page is rendered
+channel.on(_coreEvents.DOCS_RENDERED, () => rewriteStyleSheets());
 
+// IE doesn't support shadow DOM
 if (Element.prototype.attachShadow) {
   // Monkeypatch the attachShadow method so we can handle pseudo styles inside shadow DOM
   Element.prototype._attachShadow = Element.prototype.attachShadow;
-
   Element.prototype.attachShadow = function attachShadow(init) {
     // Force "open" mode, so we can access the shadowRoot
-    const shadowRoot = this._attachShadow({ ...init,
+    const shadowRoot = this._attachShadow({
+      ...init,
       mode: "open"
-    }); // Wait for it to render and apply its styles before rewriting them
-
-
+    });
+    // Wait for it to render and apply its styles before rewriting them
     requestAnimationFrame(() => {
       rewriteStyleSheets(shadowRoot);
       updateShadowHost(shadowRoot.host);

package/dist/esm/PseudoStateTool.js

@@ -27,9 +27,10 @@ export const PseudoStateTool = () => {
   const [{
     pseudo
   }, updateGlobals] = useGlobals();
-  const isActive = useCallback(option => (pseudo === null || pseudo === void 0 ? void 0 : pseudo[option]) === true, [pseudo]);
+  const isActive = useCallback(option => pseudo?.[option] === true, [pseudo]);
   const toggleOption = useCallback(option => () => updateGlobals({
-    pseudo: { ...pseudo,
+    pseudo: {
+      ...pseudo,
       [option]: !isActive(option)
     }
   }), [pseudo]);

package/dist/esm/constants.js

@@ -1,7 +1,12 @@
 export const ADDON_ID = "storybook/pseudo-states";
-export const TOOL_ID = "".concat(ADDON_ID, "/tool"); // Dynamic pseudo-classes
-// @see https://www.w3.org/TR/2018/REC-selectors-3-20181106/#dynamic-pseudos
+export const TOOL_ID = `${ADDON_ID}/tool`;
+
+// Pseudo-classes, which are not allowed to have classes applied on
+// 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 = {
   hover: "hover",
   active: "active",

package/dist/esm/rewriteStyleSheet.js

@@ -1,52 +1,52 @@
-import { PSEUDO_STATES } from "./constants";
+import { PSEUDO_STATES, EXCLUDED_PSEUDO_ELEMENTS } from "./constants";
 import { splitSelectors } from "./splitSelectors";
 const pseudoStates = Object.values(PSEUDO_STATES);
-const matchOne = new RegExp(":(".concat(pseudoStates.join("|"), ")"));
-const matchAll = new RegExp(":(".concat(pseudoStates.join("|"), ")"), "g");
+const matchOne = new RegExp(`:(${pseudoStates.join("|")})`);
+const matchAll = new RegExp(`:(${pseudoStates.join("|")})`, "g");
 const warnings = new Set();
-
 const warnOnce = message => {
-  if (warnings.has(message)) return; // eslint-disable-next-line no-console
-
+  if (warnings.has(message)) return;
+  // eslint-disable-next-line no-console
   console.warn(message);
   warnings.add(message);
 };
-
 const rewriteRule = (cssText, selectorText, shadowRoot) => {
   return cssText.replace(selectorText, splitSelectors(selectorText).flatMap(selector => {
     if (selector.includes(".pseudo-")) {
       return [];
     }
-
     if (!matchOne.test(selector)) {
       return [selector];
     }
-
     const states = [];
     const plainSelector = selector.replace(matchAll, (_, state) => {
       states.push(state);
       return "";
     });
-    const classSelector = states.reduce((acc, state) => acc.replace(new RegExp(":".concat(state), "g"), ".pseudo-".concat(state)), selector);
-
+    const getDoesSelectorEndsWithExcludedPseudoElement = pseudo => EXCLUDED_PSEUDO_ELEMENTS.some(element => {
+      return selector.endsWith(`${element}:${pseudo}`);
+    });
+    const classSelector = states.reduce((acc, state) => {
+      if (getDoesSelectorEndsWithExcludedPseudoElement(state)) {
+        return undefined;
+      }
+      return acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`);
+    }, selector);
     if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
       return [selector, classSelector];
     }
-
-    const ancestorSelector = shadowRoot ? ":host(".concat(states.map(s => ".pseudo-".concat(s)).join(""), ") ").concat(plainSelector) : "".concat(states.map(s => ".pseudo-".concat(s)).join(""), " ").concat(plainSelector);
-    return [selector, classSelector, ancestorSelector].filter(selector => !selector.includes(":not()"));
+    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?.includes(":not()")).filter(Boolean);
   }).join(", "));
-}; // Rewrites the style sheet to add alternative selectors for any rule that targets a pseudo state.
-// A sheet can only be rewritten once, and may carry over between stories.
-
+};
 
+// Rewrites the style sheet to add alternative selectors for any rule that targets a pseudo state.
+// A sheet can only be rewritten once, and may carry over between stories.
 export const rewriteStyleSheet = (sheet, shadowRoot, shadowHosts) => {
   if (sheet.__pseudoStatesRewritten) return;
   sheet.__pseudoStatesRewritten = true;
-
   try {
     let index = 0;
-
     for (const {
       cssText,
       selectorText
@@ -57,9 +57,7 @@ export const rewriteStyleSheet = (sheet, shadowRoot, shadowHosts) => {
         sheet.insertRule(newRule, index);
         if (shadowRoot) shadowHosts.add(shadowRoot.host);
       }
-
       index++;
-
       if (index > 1000) {
         warnOnce("Reached maximum of 1000 pseudo selectors per sheet, skipping the rest.");
         break;
@@ -67,7 +65,7 @@ export const rewriteStyleSheet = (sheet, shadowRoot, shadowHosts) => {
     }
   } catch (e) {
     if (e.toString().includes("cssRules")) {
-      warnOnce("Can't access cssRules, likely due to CORS restrictions: ".concat(sheet.href));
+      warnOnce(`Can't access cssRules, likely due to CORS restrictions: ${sheet.href}`);
     } else {
       // eslint-disable-next-line no-console
       console.error(e, sheet.href);

package/dist/esm/rewriteStyleSheet.test.js

@@ -1,29 +1,22 @@
 import { rewriteStyleSheet } from "./rewriteStyleSheet";
-
 class Sheet {
   constructor() {
     this.__pseudoStatesRewritten = false;
-
     for (var _len = arguments.length, rules = new Array(_len), _key = 0; _key < _len; _key++) {
       rules[_key] = arguments[_key];
     }
-
     this.cssRules = rules.map(cssText => ({
       cssText,
       selectorText: cssText.slice(0, cssText.indexOf(" {"))
     }));
   }
-
   deleteRule(index) {
     this.cssRules.splice(index, 1);
   }
-
   insertRule(cssText, index) {
     this.cssRules.splice(index, 0, cssText);
   }
-
 }
-
 describe("rewriteStyleSheet", () => {
   it("adds alternative selector targeting the element directly", () => {
     const sheet = new Sheet("a:hover { color: red }");
@@ -35,6 +28,12 @@ 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/splitSelectors.js

@@ -1,15 +1,12 @@
 const isAtRule = selector => selector.indexOf("@") === 0;
-
 export const splitSelectors = selectors => {
   if (isAtRule(selectors)) return [selectors];
   let result = [];
   let parentheses = 0;
   let brackets = 0;
   let selector = "";
-
   for (let i = 0, len = selectors.length; i < len; i++) {
     const char = selectors[i];
-
     if (char === "(") {
       parentheses += 1;
     } else if (char === ")") {
@@ -25,10 +22,8 @@ export const splitSelectors = selectors => {
         continue;
       }
     }
-
     selector += char;
   }
-
   result.push(selector.trim());
   return result;
 };

package/dist/esm/withPseudoState.js

@@ -4,21 +4,18 @@ import { DOCS_RENDERED, STORY_CHANGED, STORY_RENDERED, UPDATE_GLOBALS } from "@s
 import { PSEUDO_STATES } from "./constants";
 import { rewriteStyleSheet } from "./rewriteStyleSheet";
 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.
+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.
 const applyClasses = (element, classnames) => {
   element.className = element.className.split(" ").filter(classname => classname && classname.indexOf("pseudo-") !== 0).concat(...classnames).join(" ");
 };
-
 const applyParameter = (rootElement, parameter) => {
   const map = new Map([[rootElement, new Set()]]);
-
   const add = (target, state) => map.set(target, new Set([...(map.get(target) || []), state]));
-
   Object.entries(parameter || {}).forEach(_ref => {
     let [state, value] = _ref;
-
     if (typeof value === "boolean") {
       // default API - applying pseudo class to root element.
       add(rootElement, value && state);
@@ -32,25 +29,23 @@ const applyParameter = (rootElement, parameter) => {
   });
   map.forEach((states, target) => {
     const classnames = [];
-    states.forEach(key => PSEUDO_STATES[key] && classnames.push("pseudo-".concat(PSEUDO_STATES[key])));
+    states.forEach(key => PSEUDO_STATES[key] && classnames.push(`pseudo-${PSEUDO_STATES[key]}`));
     applyClasses(target, classnames);
   });
-}; // Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.
-// Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.
-
+};
 
+// Traverses ancestry to collect relevant pseudo classnames, and applies them to the shadow host.
+// Shadow DOM can only access classes on its host. Traversing is needed to mimic the CSS cascade.
 const updateShadowHost = shadowHost => {
   const classnames = new Set();
-
   for (let element = shadowHost.parentElement; element; element = element.parentElement) {
     if (!element.className) continue;
     element.className.split(" ").filter(classname => classname.indexOf("pseudo-") === 0).forEach(classname => classnames.add(classname));
   }
-
   applyClasses(shadowHost, classnames);
-}; // Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
-
+};
 
+// Global decorator that rewrites stylesheets and applies classnames to render pseudo styles
 export const withPseudoState = (StoryFn, _ref2) => {
   let {
     viewMode,
@@ -63,9 +58,10 @@ export const withPseudoState = (StoryFn, _ref2) => {
   } = parameters;
   const {
     pseudo: globals
-  } = globalsArgs; // 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)
+  } = globalsArgs;
 
+  // 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)
   useEffect(() => {
     if (parameter !== globals && viewMode === "story") {
       channel.emit(UPDATE_GLOBALS, {
@@ -74,46 +70,48 @@ export const withPseudoState = (StoryFn, _ref2) => {
         }
       });
     }
-  }, [parameter, viewMode]); // Convert selected states to classnames and apply them to the story root element.
-  // Then update each shadow host to redetermine its own pseudo classnames.
+  }, [parameter, viewMode]);
 
+  // Convert selected states to classnames and apply them to the story root element.
+  // Then update each shadow host to redetermine its own pseudo classnames.
   useEffect(() => {
     const timeout = setTimeout(() => {
-      const element = document.getElementById(viewMode === "docs" ? "story--".concat(id) : "root");
+      const element = document.getElementById(viewMode === "docs" ? `story--${id}` : `root`);
       applyParameter(element, globals || parameter);
       shadowHosts.forEach(updateShadowHost);
     }, 0);
     return () => clearTimeout(timeout);
   }, [globals, parameter, viewMode]);
   return StoryFn();
-}; // Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
+};
 
+// Rewrite CSS rules for pseudo-states on all stylesheets to add an alternative selector
 const rewriteStyleSheets = shadowRoot => {
-  var _shadowRoot$adoptedSt;
-
   let styleSheets = shadowRoot ? shadowRoot.styleSheets : document.styleSheets;
-  if (shadowRoot !== null && shadowRoot !== void 0 && (_shadowRoot$adoptedSt = shadowRoot.adoptedStyleSheets) !== null && _shadowRoot$adoptedSt !== void 0 && _shadowRoot$adoptedSt.length) styleSheets = shadowRoot.adoptedStyleSheets;
+  if (shadowRoot?.adoptedStyleSheets?.length) styleSheets = shadowRoot.adoptedStyleSheets;
   Array.from(styleSheets).forEach(sheet => rewriteStyleSheet(sheet, shadowRoot, shadowHosts));
-}; // Only track shadow hosts for the current story
-
+};
 
-channel.on(STORY_CHANGED, () => shadowHosts.clear()); // Reinitialize CSS enhancements every time the story changes
+// Only track shadow hosts for the current story
+channel.on(STORY_CHANGED, () => shadowHosts.clear());
 
-channel.on(STORY_RENDERED, () => rewriteStyleSheets()); // Reinitialize CSS enhancements every time a docs page is rendered
+// Reinitialize CSS enhancements every time the story changes
+channel.on(STORY_RENDERED, () => rewriteStyleSheets());
 
-channel.on(DOCS_RENDERED, () => rewriteStyleSheets()); // IE doesn't support shadow DOM
+// Reinitialize CSS enhancements every time a docs page is rendered
+channel.on(DOCS_RENDERED, () => rewriteStyleSheets());
 
+// IE doesn't support shadow DOM
 if (Element.prototype.attachShadow) {
   // Monkeypatch the attachShadow method so we can handle pseudo styles inside shadow DOM
   Element.prototype._attachShadow = Element.prototype.attachShadow;
-
   Element.prototype.attachShadow = function attachShadow(init) {
     // Force "open" mode, so we can access the shadowRoot
-    const shadowRoot = this._attachShadow({ ...init,
+    const shadowRoot = this._attachShadow({
+      ...init,
       mode: "open"
-    }); // Wait for it to render and apply its styles before rewriting them
-
-
+    });
+    // Wait for it to render and apply its styles before rewriting them
     requestAnimationFrame(() => {
       rewriteStyleSheets(shadowRoot);
       updateShadowHost(shadowRoot.host);

package/package.json

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