[nextjs] Fix tsconfig's path resolving (#182)

Co-authored-by: Brijesh Bittu <[email protected]>

apps/pigment-css-next-app/src/app/grid/page.tsx

@@ -1,14 +1,20 @@
 import Box from '@pigment-css/react/Box';
 import Grid from '@pigment-css/react/Grid';
 import { styled } from '@pigment-css/react';
+import { Test } from '@/components/Test';
 import GridDemo3 from './demo3';
 
 const Item = styled.div`
   background-color: #fff;
   border: 1px solid #ced7e0;
+  color: #222;
   padding: 8px;
   border-radius: 4px;
   text-align: center;
+
+  ${Test} {
+    color: red;
+  }
 `;
 
 function GridDemo1() {
@@ -53,7 +59,9 @@ function GridDemo4() {
   return (
     <Grid container rowSpacing={1} columnSpacing={{ xs: 1, sm: 2, md: 3 }}>
       <Grid size={6}>
-        <Item>1</Item>
+        <Item>
+          <Test>1</Test>
+        </Item>
       </Grid>
       <Grid size={6}>
         <Item>2</Item>

apps/pigment-css-next-app/src/components/Test.tsx

@@ -0,0 +1,5 @@
+import { styled } from '@pigment-css/react';
+
+export const Test = styled.h1({
+  fontSize: '2rem',
+});

apps/pigment-css-next-app/tsconfig.json

@@ -19,7 +19,8 @@
       }
     ],
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "src/*": ["./src/*"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],

packages/pigment-css-unplugin/src/index.ts

@@ -24,8 +24,8 @@ import {
   type Theme as BaseTheme,
   type PluginCustomOptions,
 } from '@pigment-css/react/utils';
-import type { ResolvePluginInstance } from 'webpack';
 import { styledEngineMockup } from '@pigment-css/react/internal';
+
 import { handleUrlReplacement, type AsyncResolver } from './utils';
 
 type NextMeta = {
@@ -185,32 +185,34 @@ export const plugin = createUnplugin<PigmentOptions, true>((options) => {
       return isZeroRuntimeProcessableFile(id, finalTransformLibraries);
     },
     webpack(compiler) {
-      const resolverPlugin: ResolvePluginInstance = {
-        apply(resolver) {
-          webpackResolver = function webpackAsyncResolve(
-            what: string,
-            importer: string,
-            stack: string[],
-          ) {
+      compiler.resolverFactory.hooks.resolver
+        .for('normal')
+        .tap(`${pluginName}Resolver`, (resolver) => {
+          webpackResolver = (what: string, importer: string, stack: string[]) => {
             const context = path.isAbsolute(importer)
               ? path.dirname(importer)
               : path.join(projectPath, 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}`));
-                }
-              });
+              resolver.resolve(
+                {},
+                context,
+                what,
+                {
+                  stack: new Set(stack),
+                },
+                (err, result) => {
+                  if (typeof result !== 'string') {
+                    reject(new Error(`${process.env.PACKAGE_NAME}: Could not resolve ${what}`));
+                  } else if (result) {
+                    resolve(result);
+                  } else {
+                    reject(err);
+                  }
+                },
+              );
             });
           };
-        },
-      };
-      compiler.options.resolve.plugins = compiler.options.resolve.plugins || [];
-      compiler.options.resolve.plugins.push(resolverPlugin);
+        });
     },
     async transform(code, url) {
       const [filePath] = url.split('?');