Repository: microsoft/griffel
Pull request #421 (2023-08-15 16:35:35)

Allow developers to specify custom resolve options.
Integrating my last change in #412, I ran into an issue because `@linaria/babel-preset` (at least at its current version of `3.0.0-beta.23`) throws an error when given an ESM module. Since we don't want to use CJS as the basis of our whole build, we need to specify custom `conditionNames` for this loader in particular.

github-actions[bot]: ## 📊 Bundle size report

<sub>🤖 This report was generated against <a href='https://github.com/microsoft/griffel/commit/e4223c867b232ded7f1b3693e33a89aa6b304447'>e4223c867b232ded7f1b3693e33a89aa6b304447</a></sub>

<!-- Sticky Pull Request Comment -->
MLoughry: @layershifter When you get a chance, can you please review?

Patch:
diff --git a/change/@griffel-webpack-loader-741e9ad7-6c83-458e-9add-a8541efa0939.json b/change/@griffel-webpack-loader-741e9ad7-6c83-458e-9add-a8541efa0939.json
new file mode 100644
index 0000000..9deea37
--- /dev/null
+++ b/change/@griffel-webpack-loader-741e9ad7-6c83-458e-9add-a8541efa0939.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add webpackResolveOptions to specify custom resolve options",
+  "packageName": "@griffel/webpack-loader",
+  "email": "miclo@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/webpack-loader/README.md b/packages/webpack-loader/README.md
index d411de3..b8e0a2a 100644
--- a/packages/webpack-loader/README.md
+++ b/packages/webpack-loader/README.md
@@ -181,6 +181,31 @@ module.exports = {
 };
 ```
 
+Alternatively, you can specify custom [`resolve` options](https://webpack.js.org/configuration/resolve/). These values will override any options inherited from your webpack config. This can be particularly important if you use custom `conditionNames` that do not include `require`, which is necessary for transformation.
+```js
+module.exports = {
+  resolve: {
+    conditionNames: ['source', 'import'],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: '@griffel/webpack-loader',
+          options: {
+            webpackResolveOptions: {
+              conditionNames: ['source', 'require'],
+            },
+          },
+        },
+      },
+    ],
+  },
+};
+```
+
 ### Configuring module evaluation
 
 ```js
diff --git a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts b/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts
new file mode 100644
index 0000000..daf6f7f
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/code.ts
@@ -0,0 +1,8 @@
+import { makeStyles } from '@griffel/react';
+import color from './color';
+
+export const styles = makeStyles({
+  root: {
+    backgroundColor: color,
+  },
+});
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.jsx b/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/color.jsx
similarity index 100%
rename from packages/webpack-loader/__fixtures__/webpack-resolve-options/color.jsx
rename to packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/color.jsx
diff --git a/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts b/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts
new file mode 100644
index 0000000..3e9985b
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/webpack-inherit-resolve-options/output.ts
@@ -0,0 +1,12 @@
+import { __styles } from '@griffel/react';
+import color from './color';
+export const styles = __styles(
+  {
+    root: {
+      De3pzq: 'f1bh81bl',
+    },
+  },
+  {
+    d: ['.f1bh81bl{background-color:blue;}'],
+  },
+);
diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts
new file mode 100644
index 0000000..7d54944
--- /dev/null
+++ b/packages/webpack-loader/__fixtures__/webpack-resolve-options/color.ts
@@ -0,0 +1,3 @@
+const color = 'blue';
+
+export default color;
diff --git a/packages/webpack-loader/src/schema.ts b/packages/webpack-loader/src/schema.ts
index 1764c17..3b20bc5 100644
--- a/packages/webpack-loader/src/schema.ts
+++ b/packages/webpack-loader/src/schema.ts
@@ -9,5 +9,40 @@ export const optionsSchema: JSONSchema7 = {
       type: 'array',
       items: { type: 'string', enum: ['alias', 'modules', 'plugins', 'conditionNames', 'extensions'] },
     },
+    webpackResolveOptions: {
+      type: 'object',
+      properties: {
+        alias: {
+          oneOf: [
+            {
+              type: 'object',
+              properties: {
+                alias: { oneOf: [{ type: 'string' }, { enum: [false] }, { type: 'array', items: { type: 'string' } }] },
+                name: { type: 'string' },
+                onlyModule: { type: 'boolean' },
+              },
+              required: ['alias', 'name'],
+            },
+            {
+              type: 'object',
+              patternProperties: {
+                ['.*']: {
+                  oneOf: [{ type: 'string' }, { enum: [false] }, { type: 'array', items: { type: 'string' } }],
+                },
+              },
+            },
+          ],
+        },
+        conditionNames: { type: 'array', items: { type: 'string' } },
+        extensions: { type: 'array', items: { type: 'string' } },
+        modules: { type: 'array', items: { type: 'string' } },
+        plugins: {
+          oneOf: [
+            { type: 'string', enum: ['...'] },
+            { type: 'object', additionalProperties: true },
+          ],
+        },
+      },
+    },
   },
 };
diff --git a/packages/webpack-loader/src/webpackLoader.ts b/packages/webpack-loader/src/webpackLoader.ts
index 5ef1cdb..b519f58 100644
--- a/packages/webpack-loader/src/webpackLoader.ts
+++ b/packages/webpack-loader/src/webpackLoader.ts
@@ -8,6 +8,10 @@ import { optionsSchema } from './schema';
 
 export type WebpackLoaderOptions = BabelPluginOptions & {
   inheritResolveOptions?: ('alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions')[];
+  webpackResolveOptions?: Pick<
+    Required<webpack.Configuration>['resolve'],
+    'alias' | 'modules' | 'plugins' | 'conditionNames' | 'extensions'
+  >;
 };
 
 type WebpackLoaderParams = Parameters<webpack.LoaderDefinitionFunction<WebpackLoaderOptions>>;
@@ -49,7 +53,11 @@ export function webpackLoader(
   // https://github.com/webpack/webpack/issues/14946
   this.cacheable();
 
-  const { inheritResolveOptions = ['alias', 'modules', 'plugins'], ...babelConfig } = this.getOptions(optionsSchema);
+  const {
+    inheritResolveOptions = ['alias', 'modules', 'plugins'],
+    webpackResolveOptions,
+    ...babelConfig
+  } = this.getOptions(optionsSchema);
 
   // Early return to handle cases when makeStyles() calls are not present, allows to avoid expensive invocation of Babel
   if (!shouldTransformSourceCode(sourceCode, babelConfig.modules)) {
@@ -77,6 +85,7 @@ export function webpackLoader(
         resolveOptionsFromWebpackConfig[resolveOptionKey],
       ]),
     ),
+    ...webpackResolveOptions,
   });
 
   const originalResolveFilename = Module._resolveFilename;


Test patch:
diff --git a/packages/webpack-loader/src/webpackLoader.test.ts b/packages/webpack-loader/src/webpackLoader.test.ts
index 7ca1135..4dc73fa 100644
--- a/packages/webpack-loader/src/webpackLoader.test.ts
+++ b/packages/webpack-loader/src/webpackLoader.test.ts
@@ -258,7 +258,7 @@ describe('webpackLoader', () => {
   });
 
   // Asserts that "inheritResolveOptions" are handled properly
-  testFixture('webpack-resolve-options', {
+  testFixture('webpack-inherit-resolve-options', {
     loaderOptions: {
       inheritResolveOptions: ['extensions'],
     },
@@ -269,6 +269,15 @@ describe('webpackLoader', () => {
     },
   });
 
+  // Asserts that "webpackResolveOptions" are handled properly
+  testFixture('webpack-resolve-options', {
+    loaderOptions: {
+      webpackResolveOptions: {
+        extensions: ['.ts', '.jsx'],
+      },
+    },
+  });
+
   // Asserts that aliases are resolved properly in Babel plugin with resolve plugins
   testFixture('webpack-resolve-plugins', {
     webpackConfig: {