[css-nesting] Nesting @media inside ::after not working

[mrshoekstra]

I'm not sure if this is the implementation of Google Chrome or part of the spec (bug or feature).
I would like this to work, it seems this should work, but it doesn't:

Preferred (not working)

body {

	@media print {

	}

	@media screen {

		&::after {
			background: red;
			content: '';
			inset: 0;
			position: absolute;
			
			@media (width < 50rem) {
				background: blue;
			}
		}
	}
}

Working version with duplicate @media screen and &::after {

body {

	@media print {

	}

	@media screen {

		&::after {
			background: red;
			content: '';
			inset: 0;
			position: absolute;
		}
	}
	
	@media screen and (width < 50rem) {

		&::after {
			background: blue;
		}
	}
}

https://www.w3.org/TR/css-nesting-1/

[johannesodland]

I think this is according to the spec.

When properties are used directly in nested at-rules, they act as if they were nested in a & { ... } block. (#conditionals) However, the & nesting selector cannot represent pseudo-elements. (#nest-selector)

As a result, the rule nested in the media query will be invalid:

::before {
  background: red;
  @media (width < 50rem) {
    background: blue;
  }
}

/* equivalent to
  ::before {
    background: red;
    @media (width < 50rem) {
      & {
        background: blue;
      }
    }
  }
*/

I agree this can be confusing to authors, but as Issue 2 the spec say:

We’d like to relax this restriction, but need to do so simultaneously for both :is() and &, since they’re intentionally built on the same underlying mechanisms. (Issue 7433)