NextJS CSS extraction support

[itsdouges]

Is your feature request related to a problem? Please describe. NextJS support is desirable, but currently it doesn't work well. There are two schools of problems:

1. Style sheet sorting doesn't work (starting a conversation here https://github.com/vercel/next.js/issues/8582#issuecomment-804678546)

The cache group isn't set so we never pick up the asset.

2. SSR build doesn't like the CSS imports we place

Extracting during the server run results in this error:

➜  with-compiled-css git:(compiled-extract) ✗ yarn build
yarn run v1.22.4
$ next build
info  - Using external babel configuration from /Users/mdougall/projects/next.js/examples/with-compiled-css/.babelrc
Found more than one file in server entrypoint pages/index [ 'compiled-css.2d2140d05c227ad24dfe.js', 'pages/index.js' ]
info  - Creating an optimized production build
info  - Compiled successfully

> Build error occurred
Error: Cannot find module for page: /
    at pageNotFoundError (/Users/mdougall/projects/next.js/examples/with-compiled-css/node_modules/next/dist/next-server/server/require.js:1:384)
    at getPagePath (/Users/mdougall/projects/next.js/examples/with-compiled-css/node_modules/next/dist/next-server/server/require.js:1:917)
    at /Users/mdougall/projects/next.js/examples/with-compiled-css/node_modules/next/dist/build/index.js:15:3428
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async /Users/mdougall/projects/next.js/examples/with-compiled-css/node_modules/next/dist/build/tracer.js:3:470
    at async Promise.all (index 0)
    at async /Users/mdougall/projects/next.js/examples/with-compiled-css/node_modules/next/dist/build/index.js:15:2910
    at async /Users/mdougall/projects/next.js/examples/with-compiled-css/node_modules/next/dist/build/tracer.js:3:470
    at async /Users/mdougall/projects/next.js/examples/with-compiled-css/node_modules/next/dist/build/index.js:15:2147
    at async /Users/mdougall/projects/next.js/examples/with-compiled-css/node_modules/next/dist/build/tracer.js:3:470 {
  code: 'ENOENT'
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
Command failed: /usr/local/Cellar/yvm/3.3.0/versions/v1.22.4/bin/yarn.js build

We need to investigate these two areas.

Describe the solution you'd like We want to create an example that has no extraction during dev, extraction during prod, and sorting & SSR work as expected.

• When extracted SSR should not interweave style tags (because the runtime is stripped).
• Style sheet should be sorted

Additional context We currently collate CSS into a single style sheet using webpack cache groups - nextJS seemingly disables this. We might need an alternative implementation.

[jesstelford]

For those landing here from a search; compiled does work with Next.js, but only by inlining the styles. This issue is specifically about support for extracting CSS into a .css file.

See the working example from @madou here: https://github.com/vercel/next.js/tree/canary/examples/with-compiled-css

[NimishGopal]

Hi @madou, any update on this? Planning to migrate to this library in my NextJS project.

[itsdouges]

Hey @NimishGopal! There is currently webpack 5 support but true next support still needs work as the current implementation relies on webpack cache groups which isn't available in next.

There is a draft PR up (here: https://github.com/atlassian-labs/compiled/pull/724) which will, as a side effect, fix the problem. It does this by instead of relying on cache groups, brings all CSS into the control of Compiled. It's a bit stale at the moment however and needs to be revived.

[karlhorky]

@madou any news on this here? (I saw that #724 was closed, for picking up later)

Would you recommend not using Compiled because of the lacking integration with Next.js because of this? We are currently evaluating alternatives to Emotion for CSS template string CSS-in-JS libraries (not object-based) that we will migrate to in our upcoming Web Development Bootcamp cohorts at upleveled.io