minimize=true is stripping invalid css

[Zauberfisch]

• Operating System: arch linux
• Node Version: 13.6.0
• NPM Version: 6.13.6
• webpack Version: 4.41.2
• html-loader Version: unknown

I understand that the minimizer is trying to optimise for size, but in the process it strips invalid css from a style tag. I believe that this is undesirable behaviour.
In a normal case that might actually be the right thing to do, but some libraries/frameworks/loaders might depend on a not-valid-css string to be there to perform custom transformations or custom behaviour.

Expected Output for {attrs: false, minimize: true}

<div style="invalid css here">

Actual Output for {attrs: false, minimize: true}

<div style="">.

Expected Output for {attrs: false, minimize: false}

<div style="invalid css here">

Actual Output for {attrs: false, minimize: false}

<div style="invalid css here">

Code

// webpack.config.js
{
				test: /\.customTemplateExtension$/,
				use: [
					{
						loader: 'file-loader',
						options: {
							name: '[name].otherCustomTemplateExtension',
							esModule: false,
							outputPath: '../../app/templates',
						},
					},
					'extract-loader',
					{
						loader: 'html-loader',
						options: {
							attrs: false,
							minimize: true,
						}
					}
				],
			}

// foobar.customTemplateExtension
<div style="invalid value here"></div>

[alexander-akait]

Please open issue in html-minifier repo

[Zauberfisch]

I'm not sure it's exactly a bug in html-minifier. There is an option minifyCSS on html-minifier.

[alexander-akait]

Workaround - set minifyCSS to false. The issue terser/html-minifier-terser#27

[DanielRuf]

Solution

There is a way to prevent that:
https://github.com/jakubpawlowicz/clean-css#how-to-keep-a-css-fragment-intact

This is already supported through clean-css.
Use the /* clean-css ignore:start */ and /* clean-css ignore:end */ comments.

<div style="/* clean-css ignore:start */invalid css here/* clean-css ignore:end */">test</div>

[DanielRuf]

So actually not a bug ;-)

[alexander-akait]

@DanielRuf Unfortunately this is not the best behavior, in theory in future developers can use new CSS syntax and due clean-css do not support that it is break code, so it is bug, will be great to keep style tags as is if something wrong with syntax

[DanielRuf]

@DanielRuf Unfortunately this is not the best behavior, in theory in future developers can use new CSS syntax and due clean-css do not support that it is break code, so it is bug, will be great to keep style tags as is if something wrong with syntax

I don't agree with this.

Not possible without breaking the current implementation. Also wrapping everything in a style attribute into these comments prevents minifying css at all in the style attributes which makes not much sense. This should be controllable and it is controllable with these comments. It is just not documented.

[alexander-akait]

@DanielRuf

I don't agree with this.

Really? Would you expect from a babel or typescript empty string on invalid syntax or you wait an exception and keep a code in files as is? Or maybe prettier should write an empty string too when you have invalid syntax 😄

As i written in the original issue, we should got an exception when a syntax is broken, so when we got an exception we return original string instead return empty string.

[DanielRuf]

Afaik html-minifier and clean-css accept and generate only valid code.

[DanielRuf]

As i written in the original issue, we should got an exception when a syntax is broken, so when we got an exception we return original string instead return empty string.

See my reply in the linked issue. It should normally. This is an upstream issue in clean-css as far as I can see.

[alexander-akait]

Afaik html-minifier and clean-css accept and generate only valid code.

The problem is that clean-css does not recognize the new syntax what support new browsers and return broken code, so it is bug.

[DanielRuf]

does not recognize the new syntax what support new browsers and return broken code, so it is bug.

The issue was about something else:

<div style="invalid css here">