Skip to content

Commit

Permalink
[pigment-css][nextjs-plugin] Follow to mui#41494
Browse files Browse the repository at this point in the history
Resolve React and other related libraries to the actual ones in
node_modules instead of Next.js' own version of React that will also
include RSC related code that is not actually needed during WyW eval.
  • Loading branch information
brijeshb42 committed Mar 15, 2024
1 parent 5c956ba commit c3f6d9a
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 15 deletions.
23 changes: 13 additions & 10 deletions packages/pigment-css-nextjs-plugin/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,9 @@
import * as path from 'node:path';
import type { NextConfig } from 'next';
import { findPagesDir } from 'next/dist/lib/find-pages-dir';
import {
webpack as webpackPlugin,
extendTheme,
type PigmentOptions as BasePigmentOptions,
} from '@pigment-css/unplugin';
import { webpack as webpackPlugin, extendTheme, type PigmentOptions } from '@pigment-css/unplugin';

export type PigmentOptions = BasePigmentOptions & {
asyncResolve?: (what: string) => string | null;
};
export { type PigmentOptions };

const extractionFile = path.join(
path.dirname(require.resolve('../package.json')),
Expand Down Expand Up @@ -60,14 +54,23 @@ export function withPigment(nextConfig: NextConfig, pigmentConfig?: PigmentOptio
outputCss: dev || hasAppDir || !isServer,
placeholderCssFile: extractionFile,
},
asyncResolve(what) {
async asyncResolve(what: string, importer: string, stack: string[]) {
// Need to point to the react from node_modules during eval time.
// Otherwise, next makes it point to its own version of react that
// has a lot of RSC specific logic which is not actually needed.
if (what.startsWith('react')) {
return require.resolve(what);
}
if (what === 'next/image') {
return require.resolve('../next-image');
}
if (what.startsWith('next/font')) {
return require.resolve('../next-font');
}
return asyncResolve?.(what) ?? null;
if (asyncResolve) {
return asyncResolve(what, importer, stack);
}
return null;
},
babelOptions: {
...babelOptions,
Expand Down
10 changes: 5 additions & 5 deletions packages/pigment-css-unplugin/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ type WebpackMeta = {
};

type Meta = NextMeta | ViteMeta | WebpackMeta;
export type AsyncResolver = (what: string, importer: string, stack: string[]) => Promise<string>;

export type PigmentOptions<Theme extends BaseTheme = BaseTheme> = {
theme?: Theme;
Expand All @@ -49,7 +50,7 @@ export type PigmentOptions<Theme extends BaseTheme = BaseTheme> = {
debug?: IFileReporterOptions | false;
sourceMap?: boolean;
meta?: Meta;
asyncResolve?: (what: string) => string | null;
asyncResolve?: (...args: Parameters<AsyncResolver>) => Promise<string | null>;
transformSx?: boolean;
} & Partial<WywInJsPluginOptions>;

Expand All @@ -62,8 +63,6 @@ function hasCorectExtension(fileName: string) {
const VIRTUAL_CSS_FILE = `\0zero-runtime-styles.css`;
const VIRTUAL_THEME_FILE = `\0zero-runtime-theme.js`;

type AsyncResolver = (what: string, importer: string, stack: string[]) => Promise<string>;

function isZeroRuntimeThemeFile(fileName: string) {
return fileName === VIRTUAL_CSS_FILE || fileName === VIRTUAL_THEME_FILE;
}
Expand Down Expand Up @@ -142,14 +141,15 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
let webpackResolver: AsyncResolver;

const asyncResolve: AsyncResolver = async (what, importer, stack) => {
const result = asyncResolveOpt?.(what);
const result = await asyncResolveOpt?.(what, importer, stack);
if (typeof result === 'string') {
return result;
}
// Use Webpack's resolver to resolve actual path but
// ignore next.js files during evaluation phase of WyW
if (webpackResolver && !what.startsWith('next')) {
return webpackResolver(what, importer, stack);
const resolved = webpackResolver(what, importer, stack);
return resolved;
}
return asyncResolveFallback(what, importer, stack);
};
Expand Down

0 comments on commit c3f6d9a

Please sign in to comment.