storybook-addon-pseudo-states 1.15.2--canary.45.07abc1b.0 → 1.15.2--canary.45.85eb83a.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.
package/dist/cjs/constants.js
CHANGED
|
@@ -8,8 +8,8 @@ const ADDON_ID = "storybook/pseudo-states";
|
|
|
8
8
|
exports.ADDON_ID = ADDON_ID;
|
|
9
9
|
const TOOL_ID = `${ADDON_ID}/tool`;
|
|
10
10
|
|
|
11
|
-
// Pseudo-
|
|
12
|
-
//
|
|
11
|
+
// Pseudo-elements which are not allowed to have classes applied on them
|
|
12
|
+
// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector
|
|
13
13
|
exports.TOOL_ID = TOOL_ID;
|
|
14
14
|
const EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
|
|
15
15
|
|
|
@@ -16,6 +16,7 @@ const warnOnce = message => {
|
|
|
16
16
|
console.warn(message);
|
|
17
17
|
warnings.add(message);
|
|
18
18
|
};
|
|
19
|
+
const isExcludedPseudoElement = (selector, pseudoState) => _constants.EXCLUDED_PSEUDO_ELEMENTS.some(element => selector.endsWith(`${element}:${pseudoState}`));
|
|
19
20
|
const rewriteRule = (cssText, selectorText, shadowRoot) => {
|
|
20
21
|
return cssText.replace(selectorText, (0, _splitSelectors.splitSelectors)(selectorText).flatMap(selector => {
|
|
21
22
|
if (selector.includes(".pseudo-")) {
|
|
@@ -29,20 +30,12 @@ const rewriteRule = (cssText, selectorText, shadowRoot) => {
|
|
|
29
30
|
states.push(state);
|
|
30
31
|
return "";
|
|
31
32
|
});
|
|
32
|
-
const
|
|
33
|
-
return selector.endsWith(`${element}:${pseudo}`);
|
|
34
|
-
});
|
|
35
|
-
const classSelector = states.reduce((acc, state) => {
|
|
36
|
-
if (getDoesSelectorEndsWithExcludedPseudoElement(state)) {
|
|
37
|
-
return undefined;
|
|
38
|
-
}
|
|
39
|
-
return acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`);
|
|
40
|
-
}, selector);
|
|
33
|
+
const classSelector = states.reduce((acc, state) => !isExcludedPseudoElement(selector, state) && acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`), selector);
|
|
41
34
|
if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
|
|
42
|
-
return [selector, classSelector];
|
|
35
|
+
return [selector, classSelector].filter(Boolean);
|
|
43
36
|
}
|
|
44
37
|
const ancestorSelector = shadowRoot ? `:host(${states.map(s => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map(s => `.pseudo-${s}`).join("")} ${plainSelector}`;
|
|
45
|
-
return [selector, classSelector, ancestorSelector].filter(selector => !selector
|
|
38
|
+
return [selector, classSelector, ancestorSelector].filter(selector => selector && !selector.includes(":not()"));
|
|
46
39
|
}).join(", "));
|
|
47
40
|
};
|
|
48
41
|
|
package/dist/esm/constants.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
export const ADDON_ID = "storybook/pseudo-states";
|
|
2
2
|
export const TOOL_ID = `${ADDON_ID}/tool`;
|
|
3
3
|
|
|
4
|
-
// Pseudo-
|
|
5
|
-
//
|
|
4
|
+
// Pseudo-elements which are not allowed to have classes applied on them
|
|
5
|
+
// E.g. ::-webkit-scrollbar-thumb.pseudo-hover is not a valid selector
|
|
6
6
|
export const EXCLUDED_PSEUDO_ELEMENTS = ["::-webkit-scrollbar-thumb"];
|
|
7
7
|
|
|
8
8
|
// Dynamic pseudo-classes
|
|
@@ -10,6 +10,7 @@ const warnOnce = message => {
|
|
|
10
10
|
console.warn(message);
|
|
11
11
|
warnings.add(message);
|
|
12
12
|
};
|
|
13
|
+
const isExcludedPseudoElement = (selector, pseudoState) => EXCLUDED_PSEUDO_ELEMENTS.some(element => selector.endsWith(`${element}:${pseudoState}`));
|
|
13
14
|
const rewriteRule = (cssText, selectorText, shadowRoot) => {
|
|
14
15
|
return cssText.replace(selectorText, splitSelectors(selectorText).flatMap(selector => {
|
|
15
16
|
if (selector.includes(".pseudo-")) {
|
|
@@ -23,20 +24,12 @@ const rewriteRule = (cssText, selectorText, shadowRoot) => {
|
|
|
23
24
|
states.push(state);
|
|
24
25
|
return "";
|
|
25
26
|
});
|
|
26
|
-
const
|
|
27
|
-
return selector.endsWith(`${element}:${pseudo}`);
|
|
28
|
-
});
|
|
29
|
-
const classSelector = states.reduce((acc, state) => {
|
|
30
|
-
if (getDoesSelectorEndsWithExcludedPseudoElement(state)) {
|
|
31
|
-
return undefined;
|
|
32
|
-
}
|
|
33
|
-
return acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`);
|
|
34
|
-
}, selector);
|
|
27
|
+
const classSelector = states.reduce((acc, state) => !isExcludedPseudoElement(selector, state) && acc.replace(new RegExp(`(?<!Y):${state}`, "g"), `.pseudo-${state}`), selector);
|
|
35
28
|
if (selector.startsWith(":host(") || selector.startsWith("::slotted(")) {
|
|
36
|
-
return [selector, classSelector];
|
|
29
|
+
return [selector, classSelector].filter(Boolean);
|
|
37
30
|
}
|
|
38
31
|
const ancestorSelector = shadowRoot ? `:host(${states.map(s => `.pseudo-${s}`).join("")}) ${plainSelector}` : `${states.map(s => `.pseudo-${s}`).join("")} ${plainSelector}`;
|
|
39
|
-
return [selector, classSelector, ancestorSelector].filter(selector => !selector
|
|
32
|
+
return [selector, classSelector, ancestorSelector].filter(selector => selector && !selector.includes(":not()"));
|
|
40
33
|
}).join(", "));
|
|
41
34
|
};
|
|
42
35
|
|