Right way to split css into critical and non-critical style files

[sanjithkumar017]

Summary

What would be the right way to handle styles in a large application? We are loading a single css for our whole application today and we would like to stick to it for historical reasons.
We are currently trying out two different approaches(links to the repo with minimal code)

1. Use webpack splitchunks API to segregate critical styles from non-critical styles based on filenames
   This would require a huge effort from us to refactor our styles to allow webpack to bundle critical styles and non-critical styles separately. This seems to be the best option we have at the moment.

2. Use a custom webpack plugin to spit an extra css file which will contain critical styles
   Configure a webpack plugin which uses purgecss(allow purge to decide which css is needed. But is not 100% foolproof in my opinion) internally and spits out two css files: original css(lazy load) and critical css(preload). The issue with this approach is that nextjs does not treat the purged(critical) css file as a part of the build. It is not listed in the .next/build-manifest.json file. We reply on build-manifest.json to power our document on production builds.

Is there a better way to do this?

Additional 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
    Binaries:
      Node: 20.12.1
      npm: 10.5.0
      Yarn: 1.22.22
      pnpm: 8.15.5
    Relevant packages:
      next: 12.3.4
      eslint-config-next: 15.2.2
      react: 18.0.0
      react-dom: 18.0.0

Example

https://github.com/sanjithkumar017/next12-styling-webpack-demo