storybook-addon-pseudo-states 2.1.1--canary.bb79e5f.0 → 2.1.1--canary.7274efd.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 (3) hide show
  1. package/dist/preview.js +13 -9
  2. package/dist/preview.mjs +13 -9
  3. package/package.json +1 -1
package/dist/preview.js CHANGED
@@ -89,7 +89,7 @@ var warnOnce = (message) => {
89
89
  warnings.add(message);
90
90
  };
91
91
  var isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some((element) => selector.endsWith(`${element}:${pseudoState}`));
92
- var rewriteRule = ({ cssText, selectorText }, shadowRoot) => {
92
+ var rewriteRule = ({ cssText, selectorText }, { shadowRoot, pseudo }) => {
93
93
  return cssText.replace(
94
94
  selectorText,
95
95
  splitSelectors(selectorText).flatMap((selector) => {
@@ -113,16 +113,19 @@ var rewriteRule = ({ cssText, selectorText }, shadowRoot) => {
113
113
  return [selector, classSelector].filter(Boolean);
114
114
  }
115
115
  const ancestorSelector = shadowRoot ? `:host(${states.map((s) => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map((s) => `.pseudo-${s}`).join("")} ${plainSelector}`;
116
- return [selector, classSelector, ancestorSelector].filter(
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(
117
123
  (selector2) => selector2 && !selector2.includes(":not()")
118
124
  );
119
125
  }).join(", ")
120
126
  );
121
127
  };
122
- var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2) => {
123
- if (sheet.__pseudoStatesRewritten)
124
- return;
125
- sheet.__pseudoStatesRewritten = true;
128
+ var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2, pseudo) => {
126
129
  try {
127
130
  let index = -1;
128
131
  for (const cssRule of sheet.cssRules) {
@@ -131,7 +134,7 @@ var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2) => {
131
134
  continue;
132
135
  const styleRule = cssRule;
133
136
  if (matchOne.test(styleRule.selectorText)) {
134
- const newRule = rewriteRule(styleRule, shadowRoot);
137
+ const newRule = rewriteRule(styleRule, { shadowRoot, pseudo });
135
138
  sheet.deleteRule(index);
136
139
  sheet.insertRule(newRule, index);
137
140
  if (shadowRoot && shadowHosts2)
@@ -220,16 +223,17 @@ var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs
220
223
  const timeout = setTimeout(() => {
221
224
  applyParameter(rootElement, globals2 || pseudoConfig(parameter));
222
225
  shadowHosts.forEach(updateShadowHost);
223
- }, parameters.pseudoDelay || 0);
226
+ }, 0);
224
227
  return () => clearTimeout(timeout);
225
228
  }, [rootElement, globals2, parameter]);
226
229
  return StoryFn();
227
230
  };
228
231
  var rewriteStyleSheets = (shadowRoot) => {
232
+ const pseudo = channel.data.storyPrepared[0].parameters.pseudo;
229
233
  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
230
234
  if (shadowRoot?.adoptedStyleSheets?.length)
231
235
  styleSheets = shadowRoot.adoptedStyleSheets;
232
- styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts));
236
+ styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts, pseudo));
233
237
  };
234
238
  channel.on(import_core_events.STORY_CHANGED, () => shadowHosts.clear());
235
239
  channel.on(import_core_events.STORY_RENDERED, () => rewriteStyleSheets());
package/dist/preview.mjs CHANGED
@@ -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) => {
60
+ var rewriteRule = ({ cssText, selectorText }, { shadowRoot, pseudo }) => {
61
61
  return cssText.replace(
62
62
  selectorText,
63
63
  splitSelectors(selectorText).flatMap((selector) => {
@@ -81,16 +81,19 @@ var rewriteRule = ({ cssText, selectorText }, shadowRoot) => {
81
81
  return [selector, classSelector].filter(Boolean);
82
82
  }
83
83
  const ancestorSelector = shadowRoot ? `:host(${states.map((s) => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map((s) => `.pseudo-${s}`).join("")} ${plainSelector}`;
84
- return [selector, classSelector, ancestorSelector].filter(
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(
85
91
  (selector2) => selector2 && !selector2.includes(":not()")
86
92
  );
87
93
  }).join(", ")
88
94
  );
89
95
  };
90
- var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2) => {
91
- if (sheet.__pseudoStatesRewritten)
92
- return;
93
- sheet.__pseudoStatesRewritten = true;
96
+ var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2, pseudo) => {
94
97
  try {
95
98
  let index = -1;
96
99
  for (const cssRule of sheet.cssRules) {
@@ -99,7 +102,7 @@ var rewriteStyleSheet = (sheet, shadowRoot, shadowHosts2) => {
99
102
  continue;
100
103
  const styleRule = cssRule;
101
104
  if (matchOne.test(styleRule.selectorText)) {
102
- const newRule = rewriteRule(styleRule, shadowRoot);
105
+ const newRule = rewriteRule(styleRule, { shadowRoot, pseudo });
103
106
  sheet.deleteRule(index);
104
107
  sheet.insertRule(newRule, index);
105
108
  if (shadowRoot && shadowHosts2)
@@ -188,16 +191,17 @@ var withPseudoState = (StoryFn, { viewMode, parameters, id, globals: globalsArgs
188
191
  const timeout = setTimeout(() => {
189
192
  applyParameter(rootElement, globals2 || pseudoConfig(parameter));
190
193
  shadowHosts.forEach(updateShadowHost);
191
- }, parameters.pseudoDelay || 0);
194
+ }, 0);
192
195
  return () => clearTimeout(timeout);
193
196
  }, [rootElement, globals2, parameter]);
194
197
  return StoryFn();
195
198
  };
196
199
  var rewriteStyleSheets = (shadowRoot) => {
200
+ const pseudo = channel.data.storyPrepared[0].parameters.pseudo;
197
201
  let styleSheets = Array.from(shadowRoot ? shadowRoot.styleSheets : document.styleSheets);
198
202
  if (shadowRoot?.adoptedStyleSheets?.length)
199
203
  styleSheets = shadowRoot.adoptedStyleSheets;
200
- styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts));
204
+ styleSheets.forEach((sheet) => rewriteStyleSheet(sheet, shadowRoot, shadowHosts, pseudo));
201
205
  };
202
206
  channel.on(STORY_CHANGED, () => shadowHosts.clear());
203
207
  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.bb79e5f.0",
3
+ "version": "2.1.1--canary.7274efd.0",
4
4
  "description": "CSS pseudo states for Storybook",
5
5
  "keywords": [
6
6
  "storybook-addons",