Webpack HTML minifier is removing CMS {variables} from CSS rules

Question

I need help with html-minimizer-webpack-plugin. Right now, when I write this:

<style>
.video__embed {
aspect-ratio: {video_width}/{video_height} !important; 
padding-top: 0 !important;
}
</style>

minifier removes {video_width}/{video_height}!important; padding-top: 0 !important;, resulting in

<style>.video__embed{aspect-ratio:{};}</style>

How can I configure the plugin to keep those values intact, but still minified?

The html-minimizer-web pack-plugin does not support variables. Can you try with this plugin postcss-preset-env (npmjs.com/package/postcss-preset-env). — Pritam Mohanty
– Pritam Mohanty, Commented Feb 26, 2023 at 14:17
How is it you're minifying CMS content? As yang zhou states below, only valid (compiled) CSS should be minified. — isherwood
– isherwood, Commented Mar 2, 2023 at 16:20

isherwood · Accepted Answer · 2023-03-02 16:19:54Z

1

aspect-ratio: {video_width}/{video_height} !important;

This is not a valid CSS syntax. I think you should transpile this to valid CSS before use minimizer.

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Mar 2, 2023 at 16:17

yang zhou

3161 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

This is, unfortunately, not possible in my scenario.