[bug]: CLI: nested @media in registry css merges under wrong parent

[mattiaz9]

Describe the bug

When a registry item (e.g. registry:style) defines nested at-rules inside a selector object, such as "@media (…)" under "body" inside "@layer base", the PostCSS merger used by the cli does not attach those @media blocks to the current rule. Instead, it effectively merges them against the parent at-rule (e.g. @layer base), so @media ends up as a sibling of body under the layer.

The result of this misplacement is this error (NextJS):

Unexpected end of input

Generated code of PostCSS transform of file content of app/globals.css:

Affected component/components

Custom registry items with css prop

How to reproduce

• Create or use a Next (or Vite) app with Tailwind v4 + shadcn initialized (components.json pointing at app/globals.css or your global CSS file).
• Add a minimal registry:style (local URL or published JSON) whose css includes nested @media under body:

{
  "name": "repro-nested-media",
  "type": "registry:style",
  "css": {
    "@layer base": {
      "body": {
        "--foo": "1rem",
        "@media (width >= 40rem)": {
          "--foo": "2rem"
        }
      }
    }
  }
}

• Run npx shadcn@latest add < json-url >
• Open the updated global CSS file and inspect the block that was inserted for this item.

Expected:

@layer base {
  body {
    --foo: 1rem;
    @media (width >= 40rem) {
        --foo: 2rem;
      }
  }
}

Result:

@layer base {
  body {
    --foo: 1rem;
  }
  @media (width >= 40rem) {
     --foo: 2rem;
  }
}

Codesandbox/StackBlitz link

No response

Logs

System Info

macOS 26.3
node 24.12.0
shadcn 4.2.0
pnpm 10.26.0
next 16.2.0
tailwindcss 4.2.2

Before submitting

• I've made research efforts and searched the documentation
• I've searched for existing issues