From ab9d63c8c6a6b56903be09d5b23e7a178b2bd04b Mon Sep 17 00:00:00 2001 From: Ian Clanton-Thuon Date: Tue, 27 Sep 2022 18:14:01 -0700 Subject: [PATCH 1/2] Remove the namedExport option. --- .../remove-namedExport_2022-09-28-01-13.json | 10 ++++++++++ webpack/loader-load-themed-styles/README.md | 17 ----------------- .../src/LoadThemedStylesLoader.ts | 18 ++++++------------ 3 files changed, 16 insertions(+), 29 deletions(-) create mode 100644 common/changes/@microsoft/loader-load-themed-styles/remove-namedExport_2022-09-28-01-13.json diff --git a/common/changes/@microsoft/loader-load-themed-styles/remove-namedExport_2022-09-28-01-13.json b/common/changes/@microsoft/loader-load-themed-styles/remove-namedExport_2022-09-28-01-13.json new file mode 100644 index 00000000000..599505792f2 --- /dev/null +++ b/common/changes/@microsoft/loader-load-themed-styles/remove-namedExport_2022-09-28-01-13.json @@ -0,0 +1,10 @@ +{ + "changes": [ + { + "packageName": "@microsoft/loader-load-themed-styles", + "comment": "Remove the namedExport option.", + "type": "major" + } + ], + "packageName": "@microsoft/loader-load-themed-styles" +} \ No newline at end of file diff --git a/webpack/loader-load-themed-styles/README.md b/webpack/loader-load-themed-styles/README.md index f1472c1c5e6..67725483c28 100644 --- a/webpack/loader-load-themed-styles/README.md +++ b/webpack/loader-load-themed-styles/README.md @@ -28,7 +28,6 @@ var css = require("@microsoft/loader-load-themed-styles!css!./file.css"); { loader: "@microsoft/loader-load-themed-styles", // creates style nodes from JS strings options: { - namedExport: 'default', async: false } }, @@ -60,22 +59,6 @@ var css = require("@microsoft/loader-load-themed-styles!css!./file.css"); ## Options -### `namedExport` (string, defaults to `undefined`) - -By default, css modules will be exported as a commonjs export: - -```js -module.exports = { ... }; -``` - -To override this, you may provide a named export to export to a specifically named thing. This -is useful in exporting as the default in es6 module import scenarios. For example, providing -"default" for the named export will output this: - -```js -module.exports.default = { ... }; -``` - ### `async` (boolean, defaults to `false`) By default, `@microsoft/load-themed-styles` loads styles synchronously. This can have adverse performance effects diff --git a/webpack/loader-load-themed-styles/src/LoadThemedStylesLoader.ts b/webpack/loader-load-themed-styles/src/LoadThemedStylesLoader.ts index a9b14bfac01..7be5281c743 100644 --- a/webpack/loader-load-themed-styles/src/LoadThemedStylesLoader.ts +++ b/webpack/loader-load-themed-styles/src/LoadThemedStylesLoader.ts @@ -18,12 +18,6 @@ const loadedThemedStylesPath: string = require.resolve('@microsoft/load-themed-s * @public */ export interface ILoadThemedStylesLoaderOptions { - /** - * If this parameter is specified, override the name of the value exported from this loader. This is useful in - * exporting as the default in es6 module import scenarios. See the README for more information. - */ - namedExport?: string; - /** * If this parameter is set to "true," the "loadAsync" parameter is set to true in the call to loadStyles. * Defaults to false. @@ -63,13 +57,13 @@ export class LoadThemedStylesLoader { } public static pitch(this: loader.LoaderContext, remainingRequest: string): string { - const { namedExport, async = false }: ILoadThemedStylesLoaderOptions = loaderUtils.getOptions(this) || {}; - - let exportName: string = 'module.exports'; - if (namedExport) { - exportName += `.${namedExport}`; + const options: ILoadThemedStylesLoaderOptions = loaderUtils.getOptions(this) || {}; + if ((options as Record).namedExport) { + throw new Error('The "namedExport" option has been removed.'); } + const { async = false } = options; + return [ `var content = require(${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)});`, `var loader = require(${JSON.stringify(LoadThemedStylesLoader._loadedThemedStylesPath)});`, @@ -79,7 +73,7 @@ export class LoadThemedStylesLoader { '// add the styles to the DOM', `for (var i = 0; i < content.length; i++) loader.loadStyles(content[i][1], ${async === true});`, '', - `if(content.locals) ${exportName} = content.locals;` + 'if(content.locals) module.exports = content.locals;' ].join('\n'); } } From 482ed6bd55ddc16dba018d7294f152ab3477634c Mon Sep 17 00:00:00 2001 From: Ian Clanton-Thuon Date: Tue, 27 Sep 2022 18:32:56 -0700 Subject: [PATCH 2/2] Fix a test. --- .../src/test/LoadThemedStylesLoader.test.ts | 22 ------------------- 1 file changed, 22 deletions(-) diff --git a/webpack/loader-load-themed-styles/src/test/LoadThemedStylesLoader.test.ts b/webpack/loader-load-themed-styles/src/test/LoadThemedStylesLoader.test.ts index bf3afa343e1..82de038025f 100644 --- a/webpack/loader-load-themed-styles/src/test/LoadThemedStylesLoader.test.ts +++ b/webpack/loader-load-themed-styles/src/test/LoadThemedStylesLoader.test.ts @@ -90,28 +90,6 @@ describe(LoadThemedStylesLoader.name, () => { expect(returnedModule.exports).toEqual({}); }); - it('correctly handles the namedExport option', () => { - LoadThemedStylesLoader.loadedThemedStylesPath = './testData/LoadThemedStylesMock'; - - const query: {} = { namedExport: 'default' }; - let loaderResult: string = LoadThemedStylesLoader.pitch.call( - { query } as webpack.loader.LoaderContext, - './testData/MockStyle1' - ); - loaderResult = loaderResult.replace(/require\(\"!!/, 'require("'); - loaderResult = wrapResult(loaderResult); - - const returnedModule: { exports: string } = eval(loaderResult); // eslint-disable-line no-eval - - expect(LoadThemedStylesMock.loadedData.indexOf('STYLE 1') !== -1).toEqual(true); - expect(LoadThemedStylesMock.loadedData.indexOf('STYLE 2') !== -1).toEqual(true); - expect(LoadThemedStylesMock.loadedData).toHaveLength(2); - expect(LoadThemedStylesMock.calledWithAsync[0]).toEqual(false); - expect(LoadThemedStylesMock.calledWithAsync[1]).toEqual(false); - expect(LoadThemedStylesMock.calledWithAsync).toHaveLength(2); - expect(returnedModule.exports).toEqual({ default: 'locals' }); - }); - it('correctly handles the async option set to "true"', () => { LoadThemedStylesLoader.loadedThemedStylesPath = './testData/LoadThemedStylesMock';