lightningcss icon indicating copy to clipboard operation
lightningcss copied to clipboard

Minification error when using nesting

Open anwerso opened this issue 9 months ago • 1 comments

Example in playground

Input

.bar {
  @media (width > 10em) {
    margin: auto;

    div & {
      color: red;
    }
  }
}

Output

.bar{@media (width>10em){margin:autodiv &{color:red}}}

Not sure what combination of nesting, media query and & leads to margin:autodiv...

anwerso avatar May 23 '25 12:05 anwerso

I caught the same bug. And it seems to be related to the nested @media:

/* INPUT */
test-nesting {
	@media (width >= 40em) {
		color: beige;
		&:hover {
			color: wheat;
		}
	}
}

/* OUTPUT */
test-nesting{@media (width>=40em){color:beige&:hover{color:wheat}}}
/*                         Semicolon removed ↑ */

Но без @media обработка корректна:

/* INPUT */
test-nesting {
	color: beige;
	&:hover {
		color: wheat;
	}
}

/* OUTPUT */
test-nesting{color:beige;&:hover{color:wheat}}
/* Semicolon not removed ↑ */

firefoxic avatar Sep 15 '25 17:09 firefoxic