Skip to content

Minifier incorrectly removes semicolon before nested child selectors (& >) #512

@lewisl9029

Description

@lewisl9029

Hi there! Really appreciate your work on Lightning CSS! It's been a joy to use in https://reflame.app, and every bit as fast as advertised! :)

Wanted to report what looks like a bug with the minifier. I've set up a minimal repro in this playground, also pasting the input/output below for convenience:

Input:

.container {
	display: flex;

	& > div {
		display: flex;
	}
}

Output:

.container{display:flex&>div{display:flex}}

Note the lack of a ; after display:flex. This gets interpreted like this in browsers:

Screenshot 2023-06-13 at 10 28 22 PM

Which is clearly not preserving the nesting functionality.

Note that if we turn off nesting, the ; after display:flex is preserved in the output, so I'm assuming this is a bug with the minifier.

I'm working around this at the moment by forcing lightningcss to transpile nesting syntax, which I was planning to do anyways until nesting is supported natively in firefox. So this is not super urgent as far as I'm concerned, but I wanted to put it on your radar anyways.

Cheers!

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions