From 29a65edfa60ce74d3f874ebafb9b822177b11a55 Mon Sep 17 00:00:00 2001 From: Kylor Hall Date: Tue, 15 Oct 2024 13:06:44 +1300 Subject: [PATCH 1/8] Throw an error when mixing `extract: true` and `classHashPrefix` configuration options to avoid unsupported usage and bundle size bloat. --- packages/parcel-transformer/src/index.ts | 6 ++++++ packages/webpack-loader/src/extract-plugin.ts | 7 +++++++ packages/webpack-loader/src/types.ts | 6 ------ website/packages/docs/src/pages/pkg-webpack-loader.mdx | 1 - 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/parcel-transformer/src/index.ts b/packages/parcel-transformer/src/index.ts index d31b534ea..feb01cea5 100644 --- a/packages/parcel-transformer/src/index.ts +++ b/packages/parcel-transformer/src/index.ts @@ -124,6 +124,12 @@ export default new Transformer({ }, async transform({ asset, config, options }) { + if (config.extract && config.classHashPrefix) { + throw new Error( + '`@compiled/parcel-transformer` is mixing `extract: true` and `classHashPrefix` options, which will not supported and will result in bundle size bloat.' + ); + } + const ast = await asset.getAST(); if (!(ast?.type === 'babel' && ast.program)) { diff --git a/packages/webpack-loader/src/extract-plugin.ts b/packages/webpack-loader/src/extract-plugin.ts index e3bd6a237..2eebc75bc 100644 --- a/packages/webpack-loader/src/extract-plugin.ts +++ b/packages/webpack-loader/src/extract-plugin.ts @@ -108,6 +108,13 @@ export class CompiledExtractPlugin { constructor(options: CompiledExtractPluginOptions = {}) { this.#options = options; + + // @ts-expect-error -- Make sure this config doesn't bleed in as it's passed through + if (options.classHashPrefix) { + throw new Error( + '`@compiled/webpack-loader.CompiledExtractPlugin` is mixing `extract: true` and `classHashPrefix` options, which will not supported and will result in bundle size bloat.' + ); + } } apply(compiler: Compiler): void { diff --git a/packages/webpack-loader/src/types.ts b/packages/webpack-loader/src/types.ts index 08534672d..84613683c 100644 --- a/packages/webpack-loader/src/types.ts +++ b/packages/webpack-loader/src/types.ts @@ -142,10 +142,4 @@ export interface CompiledExtractPluginOptions { * Defaults to `false`. */ sortShorthand?: boolean; - - /** - * Adds a defined prefix to the generated classes' hashes. - * Useful in micro frontend environments to avoid clashing/specificity issues. - */ - classHashPrefix?: string; } diff --git a/website/packages/docs/src/pages/pkg-webpack-loader.mdx b/website/packages/docs/src/pages/pkg-webpack-loader.mdx index 8e5c016ff..1de3eed1c 100644 --- a/website/packages/docs/src/pages/pkg-webpack-loader.mdx +++ b/website/packages/docs/src/pages/pkg-webpack-loader.mdx @@ -211,7 +211,6 @@ module.exports = { `@compiled/webpack-loader` also accepts the following options. These are not used in the loader itself, but instead they are passed directly to the underlying `@compiled/babel-plugin`. - `addComponentName` -- `classHashPrefix` - `classNameCompressionMap` - `importReact` - `importSources` From 4acfa57fe326b0692fa4d14370cd85370f5e5681 Mon Sep 17 00:00:00 2001 From: Kylor Hall Date: Tue, 15 Oct 2024 13:14:26 +1300 Subject: [PATCH 2/8] Update docs --- packages/babel-plugin/src/types.ts | 2 ++ packages/parcel-transformer/src/types.ts | 2 ++ website/packages/docs/src/pages/pkg-babel-plugin.mdx | 2 +- 3 files changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/babel-plugin/src/types.ts b/packages/babel-plugin/src/types.ts index c0b5cb2ab..3001fdcc9 100644 --- a/packages/babel-plugin/src/types.ts +++ b/packages/babel-plugin/src/types.ts @@ -107,6 +107,8 @@ export interface PluginOptions { /** * Adds a defined prefix to the generated classes' hashes. * Useful in micro frontend environments to avoid clashing/specificity issues. + * + * This will throw an error if used alongside extraction or `extract: true`. */ classHashPrefix?: string; } diff --git a/packages/parcel-transformer/src/types.ts b/packages/parcel-transformer/src/types.ts index d14a2ed69..e76ffa86b 100644 --- a/packages/parcel-transformer/src/types.ts +++ b/packages/parcel-transformer/src/types.ts @@ -71,6 +71,8 @@ export interface ParcelTransformerOpts extends BabelPluginOpts { /** * Adds a defined prefix to the generated classes' hashes. * Useful in micro frontend environments to avoid clashing/specificity issues. + * + * This will throw an error if used alongside extraction or `extract: true`. */ classHashPrefix?: string; } diff --git a/website/packages/docs/src/pages/pkg-babel-plugin.mdx b/website/packages/docs/src/pages/pkg-babel-plugin.mdx index da5f0f5d7..3509f7112 100644 --- a/website/packages/docs/src/pages/pkg-babel-plugin.mdx +++ b/website/packages/docs/src/pages/pkg-babel-plugin.mdx @@ -83,7 +83,7 @@ Will cache the result of statically evaluated imports. Adds a prefix to the generated hashed css rule names. The valued passed to it gets hashed in conjunction with the rest of the rule declaration. -This is useful when `@compiled` is being used in a micro frontend environment by multiple packages and you want to avoid specificity issues. +This is useful when `@compiled` is being used in a micro frontend environment by multiple packages and you want to avoid specificity issues. Please note that mixing this with extraction is not supported and Parcel or Webpack will throw an error if combined. The currently accepted regex for this value is `^[a-zA-Z\-_]+[a-zA-Z\-_0-9]*$`. From bc9a409e72646b9d096d888df062b3fbb162ed5e Mon Sep 17 00:00:00 2001 From: Kylor Hall Date: Tue, 15 Oct 2024 13:22:34 +1300 Subject: [PATCH 3/8] Add changesets and finalize docs --- packages/babel-plugin/src/types.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/babel-plugin/src/types.ts b/packages/babel-plugin/src/types.ts index 3001fdcc9..f697dda57 100644 --- a/packages/babel-plugin/src/types.ts +++ b/packages/babel-plugin/src/types.ts @@ -108,7 +108,8 @@ export interface PluginOptions { * Adds a defined prefix to the generated classes' hashes. * Useful in micro frontend environments to avoid clashing/specificity issues. * - * This will throw an error if used alongside extraction or `extract: true`. + * Avoid mixing this with extraction as this may throw an error if combined with extraction + * or `extract: true` in Webpack loaders or Parcel tranformers. */ classHashPrefix?: string; } From e06da63549ef7bf429e701ce84e7e3277eccef40 Mon Sep 17 00:00:00 2001 From: Kylor Hall <136543114+kylorhall-atlassian@users.noreply.github.com> Date: Tue, 15 Oct 2024 13:37:46 +1300 Subject: [PATCH 4/8] Update packages/webpack-loader/src/extract-plugin.ts Co-authored-by: Grant Wong <2908767+dddlr@users.noreply.github.com> --- packages/webpack-loader/src/extract-plugin.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-loader/src/extract-plugin.ts b/packages/webpack-loader/src/extract-plugin.ts index 2eebc75bc..05fe5f367 100644 --- a/packages/webpack-loader/src/extract-plugin.ts +++ b/packages/webpack-loader/src/extract-plugin.ts @@ -112,7 +112,7 @@ export class CompiledExtractPlugin { // @ts-expect-error -- Make sure this config doesn't bleed in as it's passed through if (options.classHashPrefix) { throw new Error( - '`@compiled/webpack-loader.CompiledExtractPlugin` is mixing `extract: true` and `classHashPrefix` options, which will not supported and will result in bundle size bloat.' + '`@compiled/webpack-loader.CompiledExtractPlugin` is mixing the `extract: true` and `classHashPrefix` options, which is not supported and will result in bundle size bloat.' ); } } From b356876ca1802885e084886d20c676644825bc9b Mon Sep 17 00:00:00 2001 From: Kylor Hall Date: Tue, 15 Oct 2024 16:49:11 +1300 Subject: [PATCH 5/8] Add changesets and finalize docs --- .changeset/fluffy-cherries-exercise.md | 7 +++++++ .changeset/silver-jokes-care.md | 6 ++++++ 2 files changed, 13 insertions(+) create mode 100644 .changeset/fluffy-cherries-exercise.md create mode 100644 .changeset/silver-jokes-care.md diff --git a/.changeset/fluffy-cherries-exercise.md b/.changeset/fluffy-cherries-exercise.md new file mode 100644 index 000000000..f9450ee35 --- /dev/null +++ b/.changeset/fluffy-cherries-exercise.md @@ -0,0 +1,7 @@ +--- +'@compiled/parcel-transformer': patch +'@compiled/webpack-loader': patch +'@compiled/babel-plugin': patch +--- + +Documents what happens when mixing extraction and classHashPrefix diff --git a/.changeset/silver-jokes-care.md b/.changeset/silver-jokes-care.md new file mode 100644 index 000000000..477fc0f16 --- /dev/null +++ b/.changeset/silver-jokes-care.md @@ -0,0 +1,6 @@ +--- +'@compiled/parcel-transformer': minor +'@compiled/webpack-loader': minor +--- + +Throw an error when mixing `extract: true` and `classHashPrefix` configuration options to avoid unsupported usage and bundle size bloat. From 5c1918535beeb5e640537e1f83b6480ae64f2f04 Mon Sep 17 00:00:00 2001 From: Guilherme Oliveira Date: Thu, 17 Oct 2024 16:26:52 +1300 Subject: [PATCH 6/8] feat: add classHashPrefix to webpack loader --- packages/webpack-loader/src/compiled-loader.ts | 5 +++++ packages/webpack-loader/src/types.ts | 9 +++++++++ 2 files changed, 14 insertions(+) diff --git a/packages/webpack-loader/src/compiled-loader.ts b/packages/webpack-loader/src/compiled-loader.ts index bdaf8dbce..6b8cd43f6 100644 --- a/packages/webpack-loader/src/compiled-loader.ts +++ b/packages/webpack-loader/src/compiled-loader.ts @@ -40,6 +40,7 @@ function getLoaderOptions(context: LoaderContext) { extractStylesToDirectory = undefined, resolver = undefined, importSources = undefined, + classHashPrefix = undefined, }: CompiledLoaderOptions = typeof context.getOptions === 'undefined' ? // Webpack v4 flow getOptions(context) @@ -95,6 +96,9 @@ function getLoaderOptions(context: LoaderContext) { importSources: { type: 'array', }, + classHashPrefix: { + type: 'string', + }, }, }); @@ -115,6 +119,7 @@ function getLoaderOptions(context: LoaderContext) { extractStylesToDirectory, resolver, importSources, + classHashPrefix, }; } diff --git a/packages/webpack-loader/src/types.ts b/packages/webpack-loader/src/types.ts index 84613683c..00b3352de 100644 --- a/packages/webpack-loader/src/types.ts +++ b/packages/webpack-loader/src/types.ts @@ -103,6 +103,15 @@ export interface CompiledLoaderOptions { * Passed to @compiled/babel-plugin. */ importSources?: string[]; + + /** + * Adds a defined prefix to the generated classes' hashes. + * Useful in micro frontend environments to avoid clashing/specificity issues. + * + * Avoid mixing this with extraction as this may throw an error if combined with extraction + * or `extract: true` in Webpack loaders or Parcel tranformers. + */ + classHashPrefix?: string; } export interface CompiledExtractPluginOptions { From bbab282891268efcd7fa96a7ee5c457cfc4fb9d3 Mon Sep 17 00:00:00 2001 From: Guilherme Oliveira Date: Thu, 17 Oct 2024 16:31:14 +1300 Subject: [PATCH 7/8] docs: update webpack-loader docs --- website/packages/docs/src/pages/pkg-webpack-loader.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/website/packages/docs/src/pages/pkg-webpack-loader.mdx b/website/packages/docs/src/pages/pkg-webpack-loader.mdx index 1de3eed1c..8e5c016ff 100644 --- a/website/packages/docs/src/pages/pkg-webpack-loader.mdx +++ b/website/packages/docs/src/pages/pkg-webpack-loader.mdx @@ -211,6 +211,7 @@ module.exports = { `@compiled/webpack-loader` also accepts the following options. These are not used in the loader itself, but instead they are passed directly to the underlying `@compiled/babel-plugin`. - `addComponentName` +- `classHashPrefix` - `classNameCompressionMap` - `importReact` - `importSources` From 1db036d710ff997b6b064dc8c81bc1b9ab0beefc Mon Sep 17 00:00:00 2001 From: Guilherme Oliveira Date: Thu, 17 Oct 2024 16:37:02 +1300 Subject: [PATCH 8/8] chore: add changeset for fix --- .changeset/seven-beers-shake.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/seven-beers-shake.md diff --git a/.changeset/seven-beers-shake.md b/.changeset/seven-beers-shake.md new file mode 100644 index 000000000..b706a2099 --- /dev/null +++ b/.changeset/seven-beers-shake.md @@ -0,0 +1,5 @@ +--- +'@compiled/webpack-loader': patch +--- + +fix: webpack loader wasn't passing classHashPrefix option down to babel plugin