storybook-addon-pseudo-states 2.1.1--canary.7274efd.0 → 2.1.1--canary.85.9b305fd.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/{chunk-OZNRRAVT.mjs → chunk-GCHTSOYT.mjs} +9 -1
  2. package/dist/manager.js +9 -1
  3. package/dist/manager.mjs +1 -1
  4. package/dist/preview.js +19 -15
  5. package/dist/preview.mjs +11 -15
  6. package/package.json +1 -1
package/dist/{chunk-OZNRRAVT.mjs → chunk-GCHTSOYT.mjs} RENAMED
@@ -11,7 +11,15 @@ var PSEUDO_STATES = {
11
11
  focus: "focus",
12
12
  visited: "visited",
13
13
  link: "link",
14
- target: "target"
14
+ target: "target",
15
+ "ancestor-hover": "ancestor-hover",
16
+ "ancestor-active": "ancestor-active",
17
+ "ancestor-focusVisible": "ancestor-focus-visible",
18
+ "ancestor-focusWithin": "ancestor-focus-within",
19
+ "ancestor-focus": "ancestor-focus",
20
+ "ancestor-visited": "ancestor-visited",
21
+ "ancestor-link": "ancestor-link",
22
+ "ancestor-target": "ancestor-target"
15
23
  };
16
24
 
17
25
  export {
package/dist/manager.js CHANGED
@@ -33,7 +33,15 @@ var PSEUDO_STATES = {
33
33
  focus: "focus",
34
34
  visited: "visited",
35
35
  link: "link",
36
- target: "target"
36
+ target: "target",
37
+ "ancestor-hover": "ancestor-hover",
38
+ "ancestor-active": "ancestor-active",
39
+ "ancestor-focusVisible": "ancestor-focus-visible",
40
+ "ancestor-focusWithin": "ancestor-focus-within",
41
+ "ancestor-focus": "ancestor-focus",
42
+ "ancestor-visited": "ancestor-visited",
43
+ "ancestor-link": "ancestor-link",
44
+ "ancestor-target": "ancestor-target"
37
45
  };
38
46
 
39
47
  // src/manager/PseudoStateTool.tsx
package/dist/manager.mjs CHANGED
@@ -3,7 +3,7 @@ import {
3
3
  PARAM_KEY,
4
4
  PSEUDO_STATES,
5
5
  TOOL_ID
6
- } from "./chunk-OZNRRAVT.mjs";
6
+ } from "./chunk-GCHTSOYT.mjs";
7
7
 
8
8
  // src/manager.ts
9
9
  import { addons, types } from "@storybook/manager-api";
package/dist/preview.js CHANGED
@@ -38,7 +38,15 @@ var PSEUDO_STATES = {
38
38
  focus: "focus",
39
39
  visited: "visited",
40
40
  link: "link",
41
- target: "target"
41
+ target: "target",
42
+ "ancestor-hover": "ancestor-hover",
43
+ "ancestor-active": "ancestor-active",
44
+ "ancestor-focusVisible": "ancestor-focus-visible",
45
+ "ancestor-focusWithin": "ancestor-focus-within",
46
+ "ancestor-focus": "ancestor-focus",
47
+ "ancestor-visited": "ancestor-visited",
48
+ "ancestor-link": "ancestor-link",
49
+ "ancestor-target": "ancestor-target"
42
50
  };
43
51
 
44
52
  // src/preview/withPseudoState.ts
@@ -89,7 +97,7 @@ var warnOnce = (message) => {
89
97
  warnings.add(message);
90
98
  };
91
99
  var isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`));
92
- var rewriteRule = ({ cssText, selectorText }, { shadowRoot, pseudo }) => {
100
+ var rewriteRule = ({ cssText, selectorText }, shadowRoot) => {
93
101
  return cssText.replace(
94
102
  selectorText,
95
103
  splitSelectors(selectorText).flatMap((selector) => {
@@ -112,20 +120,17 @@ var rewriteRule = ({ cssText, selectorText }, { shadowRoot, pseudo }) => {
112
120
  if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
113
121
  return [selector, classSelector].filter(Boolean);
114
122
  }
115
- const ancestorSelector = shadowRoot ? `:host(${states.map((s) => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map((s) => `.pseudo-${s}`).join("")} ${plainSelector}`;
116
- const includeAncestor = !pseudo || states.some((state) => pseudo[state] === true);
117
- const selectors = [
118
- selector,
119
- classSelector,
120
- ...includeAncestor ? [ancestorSelector] : []
121
- ];
122
- return selectors.filter(
123
+ const ancestorSelector = shadowRoot ? `:host(${states.map((s) => `.pseudo-ancestor-${s}`).join("")}) ${plainSelector}` : `${states.map((s) => `.pseudo-ancestor-${s}`).join("")} ${plainSelector}`;
124
+ return [selector, classSelector, ancestorSelector].filter(
123
125
  (selector2) => selector2 && !selector2.includes(":not()")
124
126
  );
125
127
  }).join(", ")
126
128
  );
127
129
  };
128
- var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2, pseudo) => {
130
+ var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2) => {
131
+ if (sheet.__pseudoStatesRewritten)
132
+ return;
133
+ sheet.__pseudoStatesRewritten = true;
129
134
  try {
130
135
  let index = -1;
131
136
  for (const cssRule of sheet.cssRules) {
@@ -134,7 +139,7 @@ var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2, pseudo) => {
134
139
  continue;
135
140
  const styleRule = cssRule;
136
141
  if (matchOne.test(styleRule.selectorText)) {
137
- const newRule = rewriteRule(styleRule, { shadowRoot, pseudo });
142
+ const newRule = rewriteRule(styleRule, shadowRoot);
138
143
  sheet.deleteRule(index);
139
144
  sheet.insertRule(newRule, index);
140
145
  if (shadowRoot && shadowHosts2)
@@ -167,7 +172,7 @@ var applyParameter = (rootElement, parameter = {}) => {
167
172
  Object.entries(parameter || {}).forEach(([state, value]) => {
168
173
  if (typeof value === "boolean") {
169
174
  if (value)
170
- add(rootElement, state);
175
+ add(rootElement, `ancestor-${state}`);
171
176
  } else if (typeof value === "string") {
172
177
  rootElement.querySelectorAll(value).forEach((el) => add(el, state));
173
178
  } else if (Array.isArray(value)) {
@@ -229,11 +234,10 @@ var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs
229
234
  return StoryFn();
230
235
  };
231
236
  var rewriteStyleSheets = (shadowRoot) => {
232
- const pseudo = channel.data.storyPrepared[0].parameters.pseudo;
233
237
  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
234
238
  if (shadowRoot?.adoptedStyleSheets?.length)
235
239
  styleSheets = shadowRoot.adoptedStyleSheets;
236
- styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts, pseudo));
240
+ styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts));
237
241
  };
238
242
  channel.on(import_core_events.STORY_CHANGED, () => shadowHosts.clear());
239
243
  channel.on(import_core_events.STORY_RENDERED, () => rewriteStyleSheets());
package/dist/preview.mjs CHANGED
@@ -2,7 +2,7 @@ import {
2
2
  EXCLUDED_PSEUDO_ELEMENTS,
3
3
  PARAM_KEY,
4
4
  PSEUDO_STATES
5
- } from "./chunk-OZNRRAVT.mjs";
5
+ } from "./chunk-GCHTSOYT.mjs";
6
6
 
7
7
  // src/preview/withPseudoState.ts
8
8
  import {
@@ -57,7 +57,7 @@ var warnOnce = (message) => {
57
57
  warnings.add(message);
58
58
  };
59
59
  var isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`));
60
- var rewriteRule = ({ cssText, selectorText }, { shadowRoot, pseudo }) => {
60
+ var rewriteRule = ({ cssText, selectorText }, shadowRoot) => {
61
61
  return cssText.replace(
62
62
  selectorText,
63
63
  splitSelectors(selectorText).flatMap((selector) => {
@@ -80,20 +80,17 @@ var rewriteRule = ({ cssText, selectorText }, { shadowRoot, pseudo }) => {
80
80
  if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
81
81
  return [selector, classSelector].filter(Boolean);
82
82
  }
83
- const ancestorSelector = shadowRoot ? `:host(${states.map((s) => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map((s) => `.pseudo-${s}`).join("")} ${plainSelector}`;
84
- const includeAncestor = !pseudo || states.some((state) => pseudo[state] === true);
85
- const selectors = [
86
- selector,
87
- classSelector,
88
- ...includeAncestor ? [ancestorSelector] : []
89
- ];
90
- return selectors.filter(
83
+ const ancestorSelector = shadowRoot ? `:host(${states.map((s) => `.pseudo-ancestor-${s}`).join("")}) ${plainSelector}` : `${states.map((s) => `.pseudo-ancestor-${s}`).join("")} ${plainSelector}`;
84
+ return [selector, classSelector, ancestorSelector].filter(
91
85
  (selector2) => selector2 && !selector2.includes(":not()")
92
86
  );
93
87
  }).join(", ")
94
88
  );
95
89
  };
96
- var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2, pseudo) => {
90
+ var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2) => {
91
+ if (sheet.__pseudoStatesRewritten)
92
+ return;
93
+ sheet.__pseudoStatesRewritten = true;
97
94
  try {
98
95
  let index = -1;
99
96
  for (const cssRule of sheet.cssRules) {
@@ -102,7 +99,7 @@ var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2, pseudo) => {
102
99
  continue;
103
100
  const styleRule = cssRule;
104
101
  if (matchOne.test(styleRule.selectorText)) {
105
- const newRule = rewriteRule(styleRule, { shadowRoot, pseudo });
102
+ const newRule = rewriteRule(styleRule, shadowRoot);
106
103
  sheet.deleteRule(index);
107
104
  sheet.insertRule(newRule, index);
108
105
  if (shadowRoot && shadowHosts2)
@@ -135,7 +132,7 @@ var applyParameter = (rootElement, parameter = {}) => {
135
132
  Object.entries(parameter || {}).forEach(([state, value]) => {
136
133
  if (typeof value === "boolean") {
137
134
  if (value)
138
- add(rootElement, state);
135
+ add(rootElement, `ancestor-${state}`);
139
136
  } else if (typeof value === "string") {
140
137
  rootElement.querySelectorAll(value).forEach((el) => add(el, state));
141
138
  } else if (Array.isArray(value)) {
@@ -197,11 +194,10 @@ var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs
197
194
  return StoryFn();
198
195
  };
199
196
  var rewriteStyleSheets = (shadowRoot) => {
200
- const pseudo = channel.data.storyPrepared[0].parameters.pseudo;
201
197
  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
202
198
  if (shadowRoot?.adoptedStyleSheets?.length)
203
199
  styleSheets = shadowRoot.adoptedStyleSheets;
204
- styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts, pseudo));
200
+ styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts));
205
201
  };
206
202
  channel.on(STORY_CHANGED, () => shadowHosts.clear());
207
203
  channel.on(STORY_RENDERED, () => rewriteStyleSheets());
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "storybook-addon-pseudo-states",
3
- "version": "2.1.1--canary.7274efd.0",
3
+ "version": "2.1.1--canary.85.9b305fd.0",
4
4
  "description": "CSS pseudo states for Storybook",
5
5
  "keywords": [
6
6
  "storybook-addons",