Bug Report: Stencil renders invalid CSS to DOM with pseudo-element selectors in nested media queries

Title

Stencil renders invalid CSS to DOM with pseudo-element selectors in nested media queries

Description

When Stencil renders CSS with pseudo-element selectors (e.g., :first-of-type) in nested selectors inside media queries, the output rendered to the DOM is missing a closing brace, resulting in invalid CSS that doesn't apply styles correctly.

Expected Behavior

Stencil should render valid CSS to the DOM. All closing braces should be present in the output.

Actual Behavior

The CSS rendered to the DOM is missing a closing brace after nested selectors with pseudo-elements. For example:

Source CSS:

@media (min-width: 640px) {
  article {
    section:first-of-type {
      flex: 1;
    }
  }
}

Rendered to DOM (missing closing curly brace):

@media (min-width: 640px){article{section:first-of-type { flex: 1}}

Workaround

Using nested syntax produces correct output:

@media (min-width: 640px) {
  article {
    section {
      &:first-of-type {
        flex: 1;
      }
    }
  }
}

Steps to Reproduce

1. Create a CSS file with pseudo-element selectors (:first-of-type, :last-child, etc.) in nested selectors inside a media query
2. Build/compile the Stencil project
3. Inspect the CSS rendered to the DOM in the browser
4. Observe that the closing brace for the nested selector is missing