Summary
Reduced from https://www.phaseone.com
This page has one CSS rule with 33,922 selectors 馃椏 and it makes loading incredibly slow. Reduction turned out to be ~6MB in size, so I wrote one that generates selectors programmatically instead, should be pretty similar to the original issue.
Operating system
Linux
Steps to reproduce
N/A
Expected behavior
N/A
Actual behavior
N/A
URL for a reduced test case
N/A
HTML/SVG/etc. source for a reduced test case
<body>
<script>
const N = 30000;
const DEPTH = 6;
const REPS = 40;
const ancestors = Array.from({ length: DEPTH - 1 }, (_, j) => `.a${j}`).join(" ");
const selectors = Array.from(
{ length: N },
(_, i) => `${ancestors} input#submit.alt-${i}:disabled:hover`,
).join(",");
const style = document.createElement("style");
style.textContent = `${selectors}{font-size:.75rem}`;
document.head.append(style);
const node =
Array.from({ length: DEPTH - 1 }, (_, j) => `<div class="a${j}">`).join("") +
'<input id="submit" class="alt-0">' +
"</div>".repeat(DEPTH - 1);
document.body.insertAdjacentHTML("beforeend", node.repeat(REPS));
requestAnimationFrame(() => {
document.body.append(`first paint at ${Math.round(performance.now())}ms`);
});
</script>
</body>Log output and (if possible) backtrace
Screenshots or screen recordings
No response
Build flags or config settings
No response
Summary
Reduced from https://www.phaseone.com
This page has one CSS rule with 33,922 selectors 馃椏 and it makes loading incredibly slow. Reduction turned out to be ~6MB in size, so I wrote one that generates selectors programmatically instead, should be pretty similar to the original issue.
Operating system
Linux
Steps to reproduce
N/A
Expected behavior
N/A
Actual behavior
N/A
URL for a reduced test case
N/A
HTML/SVG/etc. source for a reduced test case
Log output and (if possible) backtrace
Screenshots or screen recordings
No response
Build flags or config settings
No response