Group media rules

list conditions

[...document.styleSheets].flatMap(s =>
  [...s.cssRules]
    .filter(r => r.type === CSSRule.MEDIA_RULE)
    .map(r => r.conditionText)
    .filter((v,i,a) => a.indexOf(v) === i)
).join("\n")
"(max-width: 640px)
(prefers-color-scheme: dark)
(max-width: 980px)
(max-width: 816px)
not all and (min-resolution: 0.001dpcm)
print
(max-width: 1264px)
(max-width: 1100px)
(max-width: 640px)
(prefers-color-scheme: dark)
print
only screen and (min--moz-device-pixel-ratio: 1.5), not all, only screen and (-webkit-min-device-pixel-ratio: 1.5), not all
only screen and (min--moz-device-pixel-ratio: 1.5) and (prefers-color-scheme: dark), not all, only screen and (-webkit-min-device-pixel-ratio: 1.5) and (prefers-color-scheme: dark), not all
screen and (max-width: 1111px) and (min-width: 980.1px)
screen and (max-width: 947px) and (min-width: 816.1px)
screen and (max-width: 771px) and (min-width: 640.1px)
screen and (max-width: 607px) and (min-width: 640.1px)
screen and (max-width: 607px)
screen and (max-width: 640px)
screen and (max-width: 816px)
screen and (max-width: 1090px)
screen and (max-width: 980px)
(hover: none)
screen
screen and (max-width: 980px) and (min-width: 640.1px)
screen and (max-width: 816px) and (min-width: 640.1px)
screen and (min-width: 980.1px)
screen and (min-width: 816.1px)
screen and (max-width: 1280px)
screen and (max-width: 1116px)
screen and (max-width: 940px)
screen and (max-width: 776px)
screen and (min-width: 1050px)"

screen and (max-width: 640px)

conditionText = 'screen and (max-width: 640px)'
;[...document.styleSheets].flatMap(s =>
  [...s.cssRules]
    .filter(r => r.type === CSSRule.MEDIA_RULE)
    .filter(r => r.conditionText === conditionText)
    .flatMap(mediaRule => [...mediaRule.cssRules].map(r => r.cssText))
).join("\n")
"html.html__responsive .top-bar .-marketing-link { padding-left: 8px; padding-right: 8px; }
html.html__responsive .top-bar .-logo .-img._glyph { width: 25px; margin-top: 0px; }
html.html__responsive .top-bar .-logo.network-logo { width: 25px; overflow: hidden; display: block; }
html.html__responsive .top-bar .-logo.network-logo .svg-icon { transform: scale(2); transform-origin: 0px -10px 0px; }
html.html__responsive .topbar-dialog, html.html__responsive .topbar-dialog.review-dialog.review-dialog-mod { width: 100%; left: 0px; right: 0px; }
html.html__responsive .topbar-dialog.feature-notice-dialog .s-popover--arrow__tl::before, html.html__responsive .topbar-dialog.feature-notice-dialog .s-popover--arrow__tl::after { left: 105px; }
.site-footer--container, .site-footer--extra { padding: 24px 12px; }
.site-footer--logo { display: none; }
.site-footer--categories-nav { padding-right: 12px; }
.site-footer--category { padding-left: 44px; }
.site-footer__open .site-footer--categories-nav::after { display: none; }
html.html__responsive #content { border-left: 0px none; border-right: 0px none; }
html.html__responsive #content { padding-left: 12px; padding-right: 12px; width: 100%; }
html.html__responsive .site-header .site-header--container { background-image: none; }
html.html__responsive .left-sidebar-toggle { display: flex; }
html.html__responsive .flush-left { margin-left: -12px; margin-right: -12px; width: calc(100% + 24px); }
html.html__responsive [data-is-here-when]:not([data-is-here-when~=\"sm\"]) { display: none; }
html.html__responsive .statscontainer { margin-left: 0px; margin-right: 12px; }
html.html__responsive .question-summary { padding-left: 12px !important; padding-right: 12px !important; }
html.html__responsive .question-summary.narrow { flex-direction: column; }
html.html__responsive .narrow .cp { width: 100%; float: none; padding-bottom: 8px !important; padding-left: 0px !important; padding-right: 0px !important; }
html.html__responsive .narrow .votes, html.html__responsive .narrow .status, html.html__responsive .narrow .views { padding: 4px 0px; line-height: 1; box-sizing: border-box; width: auto; height: auto; border-radius: 3px; min-width: auto; text-align: left; margin: 0px 4px 0px 0px; }
html.html__responsive .narrow .votes > div, html.html__responsive .narrow .status > div, html.html__responsive .narrow .views > div { display: inline-block; font-size: 12px; margin-bottom: 0px; }
html.html__responsive .narrow .votes > div.mini-counts, html.html__responsive .narrow .status > div.mini-counts, html.html__responsive .narrow .views > div.mini-counts { font-weight: bold; }
html.html__responsive .narrow .status { margin-top: -1px; padding: 4px 8px; }
html.html__responsive .narrow .summary { width: 100%; float: none; }"