web/bug: fix regex recursion error in compatibility mode (#22338)

* web/bug: Fix wild regexp self-ddos recursion bug in compatibility mode.

# What

Replace CSS *not x or y* with *not x and not y* constructs. The form:

    :host([expanded][position="left"]:not([inline], [static]))

… becomes …

    :host([expanded][position="left"]:not([inline]):not([static]))

Minor: Removed the `export` declaration on a helper function in the Drawer story file.

# Why

The first expression triggered an obscure regex recursion bug in `polyfill.js` when converting the CSS to a format that works when the browser’s shadowDOM features are disabled. It does not handle complex CSS Level 4 Selectors very well.

The unneeded `export` was confusing Storybook and causing it to render an empty story on the Drawer’s component overview page.
This commit is contained in:
Ken Sternberg
2026-05-13 13:23:35 -07:00
committed by GitHub
parent a712e5bb2f
commit f0686c274a
2 changed files with 12 additions and 12 deletions
@@ -121,7 +121,7 @@ export const Default: Story = {
render: () => html` <ak-drawer> ${contentBlock} ${panelBlock} </ak-drawer> `,
};
export const story = (args: DrawerProps = {}, name?: string): Story => ({
const story = (args: DrawerProps = {}, name?: string): Story => ({
...Template,
...(name ? { name } : {}),
args: {
+11 -11
View File
@@ -51,11 +51,11 @@ export const styles = css`
flex-direction: column;
}
:host(:not([inline], [static])) .ak-v2-c-drawer__main {
:host(:not([inline]):not([static])) .ak-v2-c-drawer__main {
position: relative;
}
:host(:not([inline], [static])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
:host(:not([inline]):not([static])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
position: absolute;
inset-block-start: 0;
inset-block-end: 0;
@@ -65,17 +65,17 @@ export const styles = css`
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host(:not([inline], [static]))
:host(:not([inline]):not([static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([expanded]:not([inline], [static])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
:host([expanded]:not([inline]):not([static])) .ak-v2-c-drawer__main > .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([position="left"]:not([inline], [static]))
:host([position="left"]:not([inline]):not([static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
inset-inline-end: auto;
@@ -84,19 +84,19 @@ export const styles = css`
}
:where(.ak-v2-m-dir-rtl, [dir="rtl"])
:host([position="left"]:not([inline], [static]))
:host([position="left"]:not([inline]):not([static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(calc(-100% * var(--ak-v2-global--inverse--multiplier)));
}
:host([expanded][position="left"]:not([inline], [static]))
:host([expanded][position="left"]:not([inline]):not([static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateX(0);
}
:host([position="bottom"]:not([inline], [static]))
:host([position="bottom"]:not([inline]):not([static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
inset-inline-end: 0;
@@ -108,7 +108,7 @@ export const styles = css`
transform: translateY(100%);
}
:host([position="bottom"][expanded]:not([inline], [static]))
:host([position="bottom"][expanded]:not([inline]):not([static]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel {
transform: translateY(0);
@@ -406,10 +406,10 @@ export const styles = css`
);
}
:host([position="left"][inline]:not([no-border], [resizable]))
:host([position="left"][inline]:not([no-border]):not([resizable]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable),
:host([position="left"][static]:not([no-border], [resizable]))
:host([position="left"][static]:not([no-border]):not([resizable]))
.ak-v2-c-drawer__main
> .ak-v2-c-drawer__panel:not(.pf-m-no-border, .pf-m-resizable) {
padding-inline-start: 0;