[] lets you nest style rules inside each other, following the [CSS Nesting specification].

If you want nested rules the same way [Sass] works you might want to use [PostCSS Nested] instead.

<example.css>

/* becomes */

<example.expect.css>

Previous iterations of the [CSS Nesting specification] required using @nest for certain selectors.

@nest was removed from the specification completely. Future versions of this plugin will first warn and then error if you use @nest.

We advice everyone to migrate their codebase now to nested CSS without @nest.

The current version of the CSS Nesting specification disallows nested selectors to start with a letter (i.e. a tag name or element selector). To write such selectors, they need to be prefixed with & or wrapped with :is().

You will get a warning when selectors start with a letter:

Nested selectors must start with a symbol and "span" begins with a letter.

.foo {
	/* ❌ invalid */
	span {
		color: hotpink;
	}

	/* ✅ valid */
	& span {
		color: hotpink;
	}

	/* ❌ invalid */
	span & {
		color: hotpink;
	}

	/* ✅ valid */
	:is(span) & {
		color: hotpink;
	}
}	

Before :

#alpha,
.beta {
	&:hover {
		order: 1;
	}
}

After without the option :

<exportName>()

:is(#alpha,.beta):hover {
	order: 1;
}

.beta:hover has specificity as if .beta where an id selector, matching the specification.

specificity: 1, 1, 0

After with the option :

<exportName>({
	noIsPseudoSelector: true
})

#alpha:hover, .beta:hover {
	order: 1;
}

.beta:hover has specificity as if .beta where a class selector, conflicting with the specification.

specificity: 0, 2, 0

Before :

.alpha > .beta {
	& + & {
		order: 2;
	}
}

After without the option :

<exportName>()

:is(.alpha > .beta) + :is(.alpha > .beta) {
	order: 2;
}

After with the option :

<exportName>({
	noIsPseudoSelector: true
})

.alpha > .beta + .alpha > .beta {
	order: 2;
}

this is a different selector than expected as .beta + .alpha matches .beta followed by .alpha.
avoid these cases when you disable :is()
writing the selector without nesting is advised here

/* without nesting */
.alpha > .beta + .beta {
	order: 2;
}