Skip to content

Commit

Permalink
[pigment-css][nextjs-plugin] Fix alias resolver
Browse files Browse the repository at this point in the history
Uses webpack's internal resolver to resolve aliased paths during WyW's
evaluation phase.
  • Loading branch information
brijeshb42 committed Mar 15, 2024
1 parent c25839e commit 8a8e9ce
Showing 1 changed file with 48 additions and 7 deletions.
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,
Expand All @@ -21,6 +22,7 @@ import {
extendTheme,
type Theme as BaseTheme,
} from '@pigment-css/react/utils';
import type { ResolvePluginInstance } from 'webpack';

type NextMeta = {
type: 'next';
Expand Down Expand Up @@ -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;
}
Expand Down Expand Up @@ -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
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',
Expand All @@ -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,
Expand Down

0 comments on commit 8a8e9ce

Please sign in to comment.