feat(nextjs): Add package for nextjs plugin

brijeshb42 commented 1 month ago

Motivation

Using WyW (Linaria) with Next.js, in the absence of official integration, has been a big pain so far. People have been relying on next-linaria (not maintained anymore) or next-with-linaria (has it's own issue of not being able to write global and local css in the same file). Mainly the issue is that these are not official. This change opens the way to having an official plugin that others can also contribute to and fix issues (whenever found).

Summary

There is an important change in the webpack-loader package that specifically handles nextjs integration. The support for virtual modules is not the best when it comes to Next.js. That's why, the current webpack-loader package does not work directly with Next. There is also an issue with custom css loader that gets removed during one of the three phases of Next.js build process. This change allows the nextjs plugin package to then hook into the usual webpack loader process.
2nd change is the plugin itself which is the new @wyw-in-js/nextjs package. It handles stuff like adding the two loaders (the webpack loader and the css injector loader) to the existing webpack configuration. It also handles resolving some of the next.js modules that are part of it's compile time like next/image or next/font.
3rd change adds a Next.js demo app in the examples directory that uses @linaria/core with the @wyw-in-js/nextjs plugin integration.

What this PR does not cover is support for Turbopack which has some key APIs missing as of now for us to support it.

Test plan

Since it'll be hard to test the Next.js plugin itself, I was planning on using the nextjs-demo app as the testing playground by adding various combinations of the @linaria/core or @linaria/react usage and try to build the app.

There is an issue right now in the new package that only allows apps with ESM files, ie, you can have next.config.mjs or next.config.js with "type": "module" in package.json. Commonjs doesn't work. This is something that I am debugging and will make the PR ready to review once that is done.

This code has been extracted out of Pigment CSS's Next.js implementation for the community.

To test the Next.js integration, go into the examples/nextjs-demo app and run pnpm build to build the app. The review can be done commit-wise since each commit builds on top of the previous one.

changeset-bot[bot] commented 1 month ago

🦋 Changeset detected

Latest commit: 6b5533b23f7c1d90ee0b530bfd25190f032302b1

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

brijeshb42 commented 1 month ago

Note that there is an issue when using :global(). Seems related to https://github.com/callstack/linaria/issues/1388

Anber / wyw-in-js