storybook-addon-pseudo-states 1.8.0 → 1.9.0

package/CHANGELOG.md

@@ -7,6 +7,7 @@
 
 #### 🐛 Bug Fix
 
+- 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))
 

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; }
@@ -168,7 +170,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

@@ -30,6 +30,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import { addons, useEffect, useGlobals } from "@storybook/addons";
 import { DOCS_RENDERED, STORY_CHANGED, STORY_RENDERED } 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
@@ -155,7 +156,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.9.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"