diff --git a/change/@griffel-webpack-loader-3fba1f5a-ce6b-4d64-ad46-b17ca2db5949.json b/change/@griffel-webpack-loader-3fba1f5a-ce6b-4d64-ad46-b17ca2db5949.json new file mode 100644 index 000000000..bf147b937 --- /dev/null +++ b/change/@griffel-webpack-loader-3fba1f5a-ce6b-4d64-ad46-b17ca2db5949.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix(webpack-loader): fix schema for webpackResolveOptions.plugins", + "packageName": "@griffel/webpack-loader", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/fake-color.ts b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/fake-color.ts new file mode 100644 index 000000000..8019b6a7b --- /dev/null +++ b/packages/webpack-loader/__fixtures__/webpack-resolve-plugins/fake-color.ts @@ -0,0 +1,3 @@ +const color = 'red'; + +export default color; diff --git a/packages/webpack-loader/src/schema.ts b/packages/webpack-loader/src/schema.ts index 3b20bc5e5..02594e7ad 100644 --- a/packages/webpack-loader/src/schema.ts +++ b/packages/webpack-loader/src/schema.ts @@ -37,10 +37,8 @@ export const optionsSchema: JSONSchema7 = { extensions: { type: 'array', items: { type: 'string' } }, modules: { type: 'array', items: { type: 'string' } }, plugins: { - oneOf: [ - { type: 'string', enum: ['...'] }, - { type: 'object', additionalProperties: true }, - ], + type: 'array', + items: { type: 'object' }, }, }, }, diff --git a/packages/webpack-loader/src/webpackLoader.test.ts b/packages/webpack-loader/src/webpackLoader.test.ts index 409b20330..fb106f1f7 100644 --- a/packages/webpack-loader/src/webpackLoader.test.ts +++ b/packages/webpack-loader/src/webpackLoader.test.ts @@ -234,84 +234,47 @@ describe('webpackLoader', () => { testFixture('reset'); testFixture('empty'); - // Integration fixtures for config functionality - testFixture('config-classname-hash-salt', { - loaderOptions: { - classNameHashSalt: 'HASH_SALT', - }, - }); + const fakeColorModulePath = path.resolve(__dirname, '..', '__fixtures__', 'webpack-resolve-plugins', 'fake-color.ts'); + const colorModulePath = path.resolve(__dirname, '..', '__fixtures__', 'webpack-resolve-plugins', 'color.ts'); - testFixture('config-modules', { - loaderOptions: { - modules: [{ moduleSource: 'react-make-styles', importName: 'makeStyles' }], - }, - webpackConfig: { - externals: { - 'react-make-styles': 'Griffel', - }, + const CustomAliasPlugin: webpack.ResolvePluginInstance = { + // Simple plugin that will detect the non-existent module we are testing for and replace with + // correct path from the fixture + apply(resolver) { + const target = resolver.ensureHook('internal-resolve'); + + resolver.getHook('raw-resolve').tapAsync('CustomAliasPlugin', (request, resolveContext, callback) => { + if (request.request === 'non-existing-color-module') { + const newRequest = { ...request, request: colorModulePath }; + + return resolver.doResolve(target, newRequest, null, resolveContext, callback); + } + + callback(); + }); }, - }); + }; - // Asserts that aliases are resolved properly in Babel plugin - testFixture('webpack-aliases', { + testFixture('webpack-resolve-plugins', { webpackConfig: { resolve: { alias: { - 'non-existing-color-module': path.resolve(__dirname, '..', '__fixtures__', 'webpack-aliases', 'color.ts'), + 'non-existing-color-module': fakeColorModulePath, }, + plugins: [CustomAliasPlugin], }, }, }); - - // Asserts that "inheritResolveOptions" are handled properly - testFixture('webpack-inherit-resolve-options', { - loaderOptions: { - inheritResolveOptions: ['extensions'], - }, + testFixture('webpack-resolve-plugins', { webpackConfig: { resolve: { - extensions: ['.ts', '.jsx'], + alias: { + 'non-existing-color-module': fakeColorModulePath, + }, }, }, - }); - - // 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: { - resolve: { - plugins: [ - { - // Simple plugin that will detect the non-existent module we are testing for and replace with - // correct path from the fixture - apply: function (resolver) { - const target = resolver.ensureHook('resolve'); - - resolver.getHook('before-resolve').tapAsync('ResolveFallback', (request, resolveContext, callback) => { - if (request.request === 'non-existing-color-module') { - const obj = { - directory: request.directory, - path: request.path, - query: request.query, - request: path.resolve(__dirname, '..', '__fixtures__', 'webpack-resolve-plugins', 'color.ts'), - }; - return resolver.doResolve(target, obj, null, resolveContext, callback); - } - - callback(); - }); - }, - }, - ], - }, + webpackResolveOptions: { plugins: [CustomAliasPlugin] }, }, });