CSS nesting issues

[bartveneman]

From nerdy.dev:

@layer base.normalize {
	html {
		--nav-height: 72px;
		view-timeline: document-timeline;

		&:has(.PostList .PostItem:focus-visible) {
			scroll-padding-block-start: calc(var(--nav-height) + var(--size-5));
			scroll-snap-type: y mandatory;

			@media (min-width: 1024px) {
				scroll-padding-block-start: calc(var(--nav-height) + var(--size-9));
			}
		}
	}

	body {
		display: grid;
		grid-template-rows: auto 1fr;
		[data-theme=dark] &:has(.PostDetail .note){background:radial-gradient(circle at 35% 50%,rgba(5,88,255,.15),transparent 50%),radial-gradient(circle at 65% 50%,rgba(128,0,74,.15),transparent 50%),radial-gradient(circle at 50% 65%,rgba(74,128,0,.15),transparent 50%);background-attachment:fixed}@media (prefers-color-scheme:light){&:has(.BlogDetail){background-image:linear-gradient(to bottom,#fff 100vh,300vh,var(--surface-2));background-image:linear-gradient(to bottom,#fff 100vb,300vb,var(--surface-2))}}[data-theme=light] &:has(.BlogDetail){background-image:linear-gradient(to bottom,#fff 100vh,300vh,var(--surface-2));background-image:linear-gradient(to bottom,#fff 100vb,300vb,var(--surface-2))}[data-theme=dark] &:has(.BlogDetail){background-image:none}
	}
}

.sun-and-moon {
		& > :is(.moon, .sun, .sun-beams) {
			transform-origin: center center;
		}

		& > :is(.moon, .sun) {
			fill: var(--icon-fill);
			.theme-toggle:is(:hover,:focus-visible)>&{fill:var(--icon-fill-hover)}
		}

		& > .sun-beams {
			stroke: var(--icon-fill);
			stroke-width: 2px;
			.theme-toggle:is(:hover,:focus-visible) &{stroke:var(--icon-fill-hover)}
		}

		[data-theme=dark] &{&>.sun{transform:scale(1.75)}&>.sun-beams{opacity:0}&>.moon>circle{transform:translateX(-7px);@supports (cx:1){cx:17;transform:translateX(0)}}}@media (prefers-reduced-motion:no-preference){&>.sun{transition:transform .5s var(--ease-elastic-3)}&>.sun-beams{transition:transform .5s var(--ease-elastic-4),opacity .5s var(--ease-3)}& .moon>circle{transition:transform .25s var(--ease-out-5);@supports (cx:1){transition:cx .25s var(--ease-out-5)}}[data-theme=dark] &{&>.sun{transform:scale(1.75);transition-duration:.25s;transition-timing-function:var(--ease-3)}&>.sun-beams{transform:rotate(-25deg);transition-duration:.15s}&>.moon>circle{transition-delay:.25s;transition-duration:.5s}}}
	}

[bartveneman]

Currently blocked by CSSTree although it's probably fixed in their next release.