Global styles like View Transitions break build

[jantimon]

Link to the code that reproduces this issue

https://github.com/jantimon/reproduction-nextjs-pure-mode

To Reproduce

1. Clone this repository
2. Install dependencies:

   npm install

3. Run the development server:

   npm run dev

4. Open http://localhost:3000 in your browser
5. Click the view transition link
6. Observe that the global styling features don't work as expected:
   

Current vs. Expected behavior

Currently it is not possible to migrate some createGlobalStyle as outside of the app / pages folder it is not allowed to define global styles

Therefore it is quite hard to migrate css-in-js components to react server components with css modules

import { createGlobalStyle } from 'styled-components';
export const GlobalTransitions = createGlobalStyle`
  ::view-transition-old(root) {
    animation: 300ms cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
  }
  /* ... */
`;

Usually the linting rule helps to structure the code but for these edge-cases it would help us to disable the linting for a dedicated file. The /* cssmodules-pure-no-check */ pattern mirrors established escape hatches in other tools:

• @ts-nocheck in TypeScript
• /* eslint-disable */ in ESLint
• // @ts-ignore for specific lines in TypeScript

/* cssmodules-pure-no-check */ already exists in the upstream dependencies (LightningCSS & PostCSS) - so this request is simply to upgrade these dependencies:

{
  "dependencies": {
-   "postcss-modules-local-by-default": "4.0.0",
+   "postcss-modules-local-by-default": "4.2.0",
-   "lightningcss": "1.22.0",
+   "lightningcss": "1.29.3"
  }
}

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.3.0: Thu Jan  2 20:24:16 PST 2025; root:xnu-11215.81.4~3/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 20.18.2
  npm: 10.8.2
  Yarn: 1.22.22
  pnpm: 10.2.0
Relevant Packages:
  next: 15.3.0-canary.12 // Latest available version is detected (15.3.0-canary.12).
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

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

CSS

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

next dev (local), next build (local), next start (local)

Additional context

If you like I can create a PR for the upgrade

[samcx]

@jantimon Thank you for submitting an issue!

I see that LightningCSS was already bumped, but we need to bump the PostCSS side.

• Bump lightningcss #77132

[jantimon]

@jantimon Thank you for submitting an issue!

I see that LightningCSS was already bumped, but we need to bump the PostCSS side.

• Bump lightningcss #77132

Here is the bump for PostCSS: #77321

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.