Problem with postcss transformation when importing css with layer

[finnan444]

Link to the code that reproduces this issue

https://github.com/finnan444/nextjs-error-postcss-layer

To Reproduce

1. Add frame.css file with some styles(for example .foo {color: red})
2. In globals.css add @import 'frame.css'
3. run next dev
4. In browser in layout.css we see correct styles from frame.css (.foo {color: red})
5. In globals.css add layer to import - @import 'frame.css' layer(frame);
6. The browser layout.css will have incorrect styling:

   @media layer(frame) {
   .foo {color: red}
   }

Current vs. Expected behavior

Following the steps of previous selection i expect the layout.css to have

@layer frame {
    .foo {
        color: red
    }
}

I suppose there is some problem with postcss-import-parser

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.5.0: Wed May  1 20:12:58 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 20.12.2
  npm: 10.5.0
  Yarn: N/A
  pnpm: 9.1.1
Relevant Packages:
  next: 14.2.3 // Latest available version is detected (14.2.3).
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.4.5
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local), next build (local)

Additional context

No response

[matthewroach]

I came across the same issue you have reported here. There is a workaround for this until Next is able to apply a fix. You can add a custom postcss config that uses the postcss-import plugin.

Install the postcss-import plugin as a dependency to your project npm i --save-dev postcss-import

Add a postcss.config.json file to the root of your project with the following:

{
  "plugins": [
    "postcss-import"
  ]
}

Reference - https://nextjs.org/docs/pages/building-your-application/configuring/post-css#customizing-plugins