Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pigment-css][nextjs-plugin] Fix alias resolver #41494

Merged
merged 1 commit into from
Mar 15, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
[pigment-css][nextjs-plugin] Fix alias resolver
Uses webpack's internal resolver to resolve aliased paths during WyW's
evaluation phase.
brijeshb42 committed Mar 15, 2024
commit 8a8e9ce3f3c36de6ffe7995d7cf1014dbb870d50
55 changes: 48 additions & 7 deletions packages/pigment-css-unplugin/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import * as path from 'node:path';
import { transformAsync } from '@babel/core';
import {
type Preprocessor,
@@ -21,6 +22,7 @@ import {
extendTheme,
type Theme as BaseTheme,
} from '@pigment-css/react/utils';
import type { ResolvePluginInstance } from 'webpack';

type NextMeta = {
type: 'next';
@@ -60,6 +62,8 @@ 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;
}
@@ -134,6 +138,22 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
};
},
};

let webpackResolver: AsyncResolver;

const asyncResolve: AsyncResolver = async (what, importer, stack) => {
const result = asyncResolveOpt?.(what);
if (typeof result === 'string') {
return result;
}
// Use Webpack's resolver to resolve actual path but
// ignore next.js files during evaluation phase of WyW
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not related to this PR but it seems like we can ignore the emotion as well for the .toString error, right?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me check if it fixes emotion related issue but I am sure these two are unrelated. Maybe we can point that emotion import to a dummy file similar to what we do for next/image/next/font.

if (webpackResolver && !what.startsWith('next')) {
return webpackResolver(what, importer, stack);
}
return asyncResolveFallback(what, importer, stack);
};

const linariaTransformPlugin: UnpluginOptions = {
name: 'zero-plugin-transform-linaria',
enforce: 'post',
@@ -143,14 +163,35 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
transformInclude(id) {
return isZeroRuntimeProcessableFile(id, transformLibraries);
},
async transform(code, id) {
const asyncResolve: typeof asyncResolveFallback = async (what, importer, stack) => {
const result = asyncResolveOpt?.(what);
if (typeof result === 'string') {
return result;
}
return asyncResolveFallback(what, importer, stack);
webpack(compiler) {
const resolverPlugin: ResolvePluginInstance = {
apply(resolver) {
webpackResolver = function webpackAsyncResolve(
what: string,
importer: string,
stack: string[],
) {
const context = path.isAbsolute(importer)
? path.dirname(importer)
: path.join(process.cwd(), path.dirname(importer));
return new Promise((resolve, reject) => {
resolver.resolve({}, context, what, { stack: new Set(stack) }, (err, result) => {
if (err) {
reject(err);
} else if (result) {
resolve(result);
} else {
reject(new Error(`${process.env.PACKAGE_NAME}: Cannot resolve ${what}`));
}
});
});
};
},
};
compiler.options.resolve.plugins = compiler.options.resolve.plugins || [];
compiler.options.resolve.plugins.push(resolverPlugin);
},
async transform(code, id) {
const transformServices = {
options: {
filename: id,