storybook-addon-pseudo-states 1.8.0 → 1.11.0

package/CHANGELOG.md

@@ -1,4 +1,4 @@
-# v1.0.0 (Wed Apr 06 2022)
+# v1.0.0 (Mon May 23 2022)
 
 #### 🚀 Enhancement
 
@@ -7,11 +7,14 @@
 
 #### 🐛 Bug Fix
 
+- fix: Resolve crash for stories that use internal State [#28](https://github.com/chromaui/storybook-addon-pseudo-states/pull/28) (david.maulick@coinbase.com)
+- Fix CSS selector splitting [#24](https://github.com/chromaui/storybook-addon-pseudo-states/pull/24) ([@ilanus](https://github.com/ilanus) [@ghengeveld](https://github.com/ghengeveld))
 - Add support for slotted lit elements [#23](https://github.com/chromaui/storybook-addon-pseudo-states/pull/23) ([@ilanus](https://github.com/ilanus))
 - Setup auto [#7](https://github.com/chromaui/storybook-addon-pseudo-states/pull/7) ([@ghengeveld](https://github.com/ghengeveld))
 
 #### ⚠️ Pushed to `main`
 
+- Use chromatic@next ([@ghengeveld](https://github.com/ghengeveld))
 - [skip release] Revert back to disabling CustomElement stories ([@ghengeveld](https://github.com/ghengeveld))
 - Another attempt at dealing with IE ([@ghengeveld](https://github.com/ghengeveld))
 - Don't disable stories, just ignore IE ([@ghengeveld](https://github.com/ghengeveld))
@@ -23,8 +26,9 @@
 - Upgrade Storybook ([@ghengeveld](https://github.com/ghengeveld))
 - Ignore .env file ([@ghengeveld](https://github.com/ghengeveld))
 
-#### Authors: 3
+#### Authors: 4
 
+- David Maulick ([@dmaulick](https://github.com/dmaulick))
 - Gert Hengeveld ([@ghengeveld](https://github.com/ghengeveld))
 - Ilan ([@ilanus](https://github.com/ilanus))
 - Jeroen Zwartepoorte ([@jpzwarte](https://github.com/jpzwarte))

package/dist/cjs/splitSelectors.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.splitSelectors = void 0;
+
+var isAtRule = function isAtRule(selector) {
+  return selector.indexOf("@") === 0;
+};
+
+var splitSelectors = function splitSelectors(selectors) {
+  if (isAtRule(selectors)) return [selectors];
+  var result = [];
+  var parentheses = 0;
+  var brackets = 0;
+  var selector = "";
+
+  for (var i = 0, len = selectors.length; i < len; i++) {
+    var char = selectors[i];
+
+    if (char === "(") {
+      parentheses += 1;
+    } else if (char === ")") {
+      parentheses -= 1;
+    } else if (char === "[") {
+      brackets += 1;
+    } else if (char === "]") {
+      brackets -= 1;
+    } else if (char === ",") {
+      if (!parentheses && !brackets) {
+        result.push(selector.trim());
+        selector = "";
+        continue;
+      }
+    }
+
+    selector += char;
+  }
+
+  result.push(selector.trim());
+  return result;
+};
+
+exports.splitSelectors = splitSelectors;

package/dist/cjs/splitSelectors.test.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _splitSelectors = require("./splitSelectors");
+
+describe("splitSelectors", function () {
+  test("handles basic selectors", function () {
+    expect((0, _splitSelectors.splitSelectors)(".a")).toEqual([".a"]);
+    expect((0, _splitSelectors.splitSelectors)(".a, .b")).toEqual([".a", ".b"]);
+  });
+  test("supports ::slotted and :is", function () {
+    expect((0, _splitSelectors.splitSelectors)("::slotted(:is(button, a):active)")).toEqual(["::slotted(:is(button, a):active)"]);
+    expect((0, _splitSelectors.splitSelectors)("::slotted(:is(button, a):active), ::slotted(:is(button, a):hover)")).toEqual(["::slotted(:is(button, a):active)", "::slotted(:is(button, a):hover)"]);
+  });
+  test("supports :host", function () {
+    expect((0, _splitSelectors.splitSelectors)(":host([type='secondary']) ::slotted(:is(button, a)), :host([type='primary']) ::slotted(:is(button, a):active)")).toEqual([":host([type='secondary']) ::slotted(:is(button, a))", ":host([type='primary']) ::slotted(:is(button, a):active)"]);
+    expect((0, _splitSelectors.splitSelectors)(":host([outline]) ::slotted(:is(button, a):focus-within:focus-visible:not(:active))")).toEqual([":host([outline]) ::slotted(:is(button, a):focus-within:focus-visible:not(:active))"]);
+  });
+});

package/dist/cjs/withPseudoState.js

@@ -11,6 +11,8 @@ var _coreEvents = require("@storybook/core-events");
 
 var _constants = require("./constants");
 
+var _splitSelectors = require("./splitSelectors");
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -95,20 +97,23 @@ _addons.addons.getChannel().on(_coreEvents.STORY_CHANGED, function () {
 var withPseudoState = function withPseudoState(StoryFn, _ref5) {
   var viewMode = _ref5.viewMode,
       parameters = _ref5.parameters,
-      id = _ref5.id;
+      id = _ref5.id,
+      globalsArgs = _ref5.globals;
   var parameter = parameters.pseudo;
+  var globals = globalsArgs.pseudo;
 
-  var _useGlobals = (0, _addons.useGlobals)(),
-      _useGlobals2 = _slicedToArray(_useGlobals, 2),
-      globals = _useGlobals2[0].pseudo,
-      updateGlobals = _useGlobals2[1]; // Sync parameter to globals, used by the toolbar (only in canvas as this
+  var channel = _addons.addons.getChannel(); // 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)(function () {
-    if (parameter !== globals && viewMode === "story") updateGlobals({
-      pseudo: parameter
-    });
+    if (parameter !== globals && viewMode === "story") {
+      channel.emit(_coreEvents.UPDATE_GLOBALS, {
+        globals: {
+          pseudo: parameter
+        }
+      });
+    }
   }, [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.
 
@@ -168,7 +173,8 @@ function rewriteStyleSheets(shadowRoot) {
                 selectorText = _step2$value.selectorText;
 
             if (matchOne.test(selectorText)) {
-              var newRule = cssText.replace(selectorText, selectorText.split(", ").flatMap(function (selector) {
+              var selectors = (0, _splitSelectors.splitSelectors)(selectorText);
+              var newRule = cssText.replace(selectorText, selectors.flatMap(function (selector) {
                 if (selector.includes(".pseudo-")) return [];
                 var states = [];
                 var plainSelector = selector.replace(matchAll, function (_, state) {

package/dist/esm/splitSelectors.js

@@ -0,0 +1,36 @@
+var isAtRule = function isAtRule(selector) {
+  return selector.indexOf("@") === 0;
+};
+
+export var splitSelectors = function splitSelectors(selectors) {
+  if (isAtRule(selectors)) return [selectors];
+  var result = [];
+  var parentheses = 0;
+  var brackets = 0;
+  var selector = "";
+
+  for (var i = 0, len = selectors.length; i < len; i++) {
+    var char = selectors[i];
+
+    if (char === "(") {
+      parentheses += 1;
+    } else if (char === ")") {
+      parentheses -= 1;
+    } else if (char === "[") {
+      brackets += 1;
+    } else if (char === "]") {
+      brackets -= 1;
+    } else if (char === ",") {
+      if (!parentheses && !brackets) {
+        result.push(selector.trim());
+        selector = "";
+        continue;
+      }
+    }
+
+    selector += char;
+  }
+
+  result.push(selector.trim());
+  return result;
+};

package/dist/esm/splitSelectors.test.js

@@ -0,0 +1,15 @@
+import { splitSelectors } from "./splitSelectors";
+describe("splitSelectors", function () {
+  test("handles basic selectors", function () {
+    expect(splitSelectors(".a")).toEqual([".a"]);
+    expect(splitSelectors(".a, .b")).toEqual([".a", ".b"]);
+  });
+  test("supports ::slotted and :is", function () {
+    expect(splitSelectors("::slotted(:is(button, a):active)")).toEqual(["::slotted(:is(button, a):active)"]);
+    expect(splitSelectors("::slotted(:is(button, a):active), ::slotted(:is(button, a):hover)")).toEqual(["::slotted(:is(button, a):active)", "::slotted(:is(button, a):hover)"]);
+  });
+  test("supports :host", function () {
+    expect(splitSelectors(":host([type='secondary']) ::slotted(:is(button, a)), :host([type='primary']) ::slotted(:is(button, a):active)")).toEqual([":host([type='secondary']) ::slotted(:is(button, a))", ":host([type='primary']) ::slotted(:is(button, a):active)"]);
+    expect(splitSelectors(":host([outline]) ::slotted(:is(button, a):focus-within:focus-visible:not(:active))")).toEqual([":host([outline]) ::slotted(:is(button, a):focus-within:focus-visible:not(:active))"]);
+  });
+});

package/dist/esm/withPseudoState.js

@@ -27,9 +27,11 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 /* eslint-env browser */
-import { addons, useEffect, useGlobals } from "@storybook/addons";
+import { addons, useEffect } from "@storybook/addons";
 import { DOCS_RENDERED, STORY_CHANGED, STORY_RENDERED } from "@storybook/core-events";
+import { UPDATE_GLOBALS } from '@storybook/core-events';
 import { PSEUDO_STATES } from "./constants";
+import { splitSelectors } from "./splitSelectors";
 var pseudoStates = Object.values(PSEUDO_STATES);
 var matchOne = new RegExp(":(".concat(pseudoStates.join("|"), ")"));
 var matchAll = new RegExp(":(".concat(pseudoStates.join("|"), ")"), "g"); // Drops any existing pseudo state classnames that carried over from a previously viewed story
@@ -84,20 +86,21 @@ addons.getChannel().on(STORY_CHANGED, function () {
 export var withPseudoState = function withPseudoState(StoryFn, _ref5) {
   var viewMode = _ref5.viewMode,
       parameters = _ref5.parameters,
-      id = _ref5.id;
+      id = _ref5.id,
+      globalsArgs = _ref5.globals;
   var parameter = parameters.pseudo;
-
-  var _useGlobals = useGlobals(),
-      _useGlobals2 = _slicedToArray(_useGlobals, 2),
-      globals = _useGlobals2[0].pseudo,
-      updateGlobals = _useGlobals2[1]; // Sync parameter to globals, used by the toolbar (only in canvas as this
+  var globals = globalsArgs.pseudo;
+  var channel = addons.getChannel(); // 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(function () {
-    if (parameter !== globals && viewMode === "story") updateGlobals({
-      pseudo: parameter
-    });
+    if (parameter !== globals && viewMode === "story") {
+      channel.emit(UPDATE_GLOBALS, {
+        globals: {
+          pseudo: parameter
+        }
+      });
+    }
   }, [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.
 
@@ -155,7 +158,8 @@ function rewriteStyleSheets(shadowRoot) {
                 selectorText = _step2$value.selectorText;
 
             if (matchOne.test(selectorText)) {
-              var newRule = cssText.replace(selectorText, selectorText.split(", ").flatMap(function (selector) {
+              var selectors = splitSelectors(selectorText);
+              var newRule = cssText.replace(selectorText, selectors.flatMap(function (selector) {
                 if (selector.includes(".pseudo-")) return [];
                 var states = [];
                 var plainSelector = selector.replace(matchAll, function (_, state) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "storybook-addon-pseudo-states",
-  "version": "1.8.0",
+  "version": "1.11.0",
   "description": "CSS pseudo states for Storybook",
   "keywords": [
     "storybook-addons",
@@ -25,6 +25,7 @@
     "clean": "rimraf ./dist",
     "start": "concurrently \"yarn storybook --no-manager-cache --quiet\" \"yarn build:dist --watch\"",
     "storybook": "start-storybook -p 6006",
+    "test": "jest src",
     "chromatic": "chromatic",
     "build:dist": "babel ./src --out-dir ./dist/cjs && BABEL_ESM=\"true\" babel ./src --out-dir ./dist/esm",
     "build:storybook": "build-storybook",
@@ -43,6 +44,7 @@
     "babel-loader": "^8.1.0",
     "chromatic": "^5.6.0",
     "concurrently": "^5.3.0",
+    "jest": "^27.5.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "rimraf": "^3.0.2"