Add support for `preamble` option

[xavierfoucrier]

Hi webpack team :wave:

I am currently upgrading a project setup to webpack@5 and want to move from [email protected] to [email protected], but it looks like there is not way to add a simple banner at the top of the emitted CSS asset, so I am unable to put a preamble the same way I was doing this on webpack@4:

optimization: {
  minimizer: [
    new TerserPlugin({
      extractComments: false,
      terserOptions: {
        output: {
          comments: false,
          preamble: preamble, // <-- add preamble to the app.js asset
        },
      },
    }),
  ],
},
plugins: [
  new OptimizeCSSAssetsPlugin({
    cssProcessorPluginOptions: {
      preset: ['default', {
        discardComments: {
          removeAll: true,
        },
      }],
    },
  }),
  new webpack.BannerPlugin({
    raw: true,
    banner: () => {
      return preamble; // <-- add preamble to the app.css asset
    },
  }),
  // ...
]

I guess it's because new CssMinimizerPlugin move into webpack.optimization.minimizer array :thinking: I think it's not a bug, more a feature that is not supported yet.

Feature Proposal

It would be good to have an option to add a banner/preamble at the top of the emitted asset when css-minimizer-webpack-plugin minimization process ends.

Feature Use Case

Same as TerserPlugin with the preamble option: easy to implement and use without any additional plugins.

May be the option should go into CSSNano.. not sure about that.

[alexander-akait]

Here interesting problem - BannerPlugin added comment(s), but cssnano remove them due removeAll: true, I think we need here an option for banner plugin... like event: 'before-minimizer' and event: 'after-minimizer'. The preamble option in TerserPlugin for terser package, but cssnano doesn't have this option, but for me solving it on BannerPlugin level is better

[xavierfoucrier]

Hi @alexander-akait,

Thanks for taking time to answer. You are right, removing removeAll: true on cssnano do the job, but all other comments inside source stay in the final bundle

Fixing on BannerPlugin sounds good :wink:

[xavierfoucrier]

Hi @alexander-akait,

Just to know on my side, could this be fixed in the next few weeks? Thanks a lot!

I know you have a lot of work in all webpack repos, so don't worry, it's just to know on my side and plan the upgrade.

[alexander-akait]

Yep, let's give me time to think about it, should not be hard

[xavierfoucrier]

Thanks a lot @alexander-akait!

[xavierfoucrier]

Hello @alexander-akait,

Any update on this? :roll_eyes: :kissing_heart:

I have tried to downgrade to investigate further and noticed that this happened anyway when moving from [email protected] to [email protected] - cssnano moves from 4.0.2 to 4.1.0 - , but of course this version is only compatible with webpack@4, and I want to stay on webpack@5 now.

[alexander-akait]

Hi, sorry no, still in my todo, I can provide place where we can implement this and you will help me

[xavierfoucrier]

@alexander-akait sure I can help of course, I think you are better for webpack core code structure, but I can give à try, let me know! :wink:

[xavierfoucrier]

Hello @alexander-akait, please let me know when you have time to build something, this way I can test and help :wink:

[xavierfoucrier]

@alexander-akait, I have finally decided to drop banner / top comments from my css / js assets.

Feel free to close this issue, or let it open to fix later.

[alexander-akait]

Let's keep open, we really need to solve it

[noppa]

We have solved this for us by basically copy-pasting BannerPlugin to a new custom plugin and changing

-	stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS
+	stage: Compilation.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE + 1

At least for our use case it's working nicely. Maybe BannerPlugin could take some option in and select the stage based on it?

[alexander-akait]

@vankop what do you think? We will allow to add banner to minified files

[vankop]

maybe for raw option we should use another stage? 🤔 or use next stage Compilation.PROCESS_ASSETS_STAGE_DEV_TOOLING ?

[alexander-akait]

Maybe we can add the stage property - classic (right now, maybe better name), after-minimizer (for this), in future we can add more them if we will need it

[alexander-akait]

Because raw can used for any stage