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/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 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. diff --git a/packages/babel-plugin/src/types.ts b/packages/babel-plugin/src/types.ts index c0b5cb2ab..f697dda57 100644 --- a/packages/babel-plugin/src/types.ts +++ b/packages/babel-plugin/src/types.ts @@ -107,6 +107,9 @@ export interface PluginOptions { /** * 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; } 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/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/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/extract-plugin.ts b/packages/webpack-loader/src/extract-plugin.ts index e3bd6a237..05fe5f367 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 the `extract: true` and `classHashPrefix` options, which is 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..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 { @@ -142,10 +151,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-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]*$`.