Webpack - Included CSS files are not minified

[pmk65]

@sirockin I noticed that in the jsoneditor.js build by Webpack, the CSS is now included. But this seems to be unminified, so comments are included. See below:

typeof s&&(s=[[t.i,s,""]]);var n={insert:"head",singleton:!1};i(15)(s,n);s.locals&&(t.exports=s.locals)},function(t,e,i){(t.exports=i(14)(!1)).push([t.i,".starrating {\n direction: rtl;\n display: inline-block;\n white-space:nowrap;\n}\n.starrating > input {\n display: none;\n} /* Remove radio buttons /\n.starrating > label:before {\n content: '\2606'; / Empty Star /\n margin: 1px;\n font-size: 18px;\n font-style:normal;\n font-weight:400;\n line-height:1;\n font-family: 'Arial';\n display: inline-block;\n}\n.starrating > label {\n color: #888; / Start color when not clicked /\n cursor: pointer;\n margin: 0;\n margin: 8px 0 2px 0;\n}\n.starrating > label.starrating-display-enabled {\n margin: 1px 0 0 0;\n}\n.starrating > input:checked ~ label,\n.starrating:not(.readonly) > input:hover ~ label {\n color: #ffca08; / Set yellow color when star checked/hover /\n}\n.starrating > input:checked ~ label:before,\n.starrating:not(.readonly) > input:hover ~ label:before {\n content: '\2605'; / Filled Star when star checked/hover */\n text-shadow: 0 0 1px rgba(0,20,20,1);\n}\n.starrating .starrating-display {\n position: relative;\n direction: rtl; \n text-align: center;\n font-size: 10px;\n line-height: 0px;\n}\n",""])}]);

[sirockin]

hmmm. Okay will look into it.

[sirockin]

Have tried minimizing using optimize-css-assets-webpack-plugin but no dice with comments.

Someone else has opened an issue on this so I'll keep an eye on it:

NMFR/optimize-css-assets-webpack-plugin#93

[pmk65]

It's not just the comments (But that's what caught my attention) It is isn't minified at all.
If it was minified, the "\n" and spacing would have been removed.

[sirockin]

The above plugin does seem to remove spacing but for some reason not the '`n'.

[pmk65]

Bus should something like (.readonly) > input:hover ~ label:before be concatenated into (.readonly)>input:hover~label:before ? (spaces removed)

A "dirty" solution would be to minify the CSS manually and place the minified version in the styles folder together with the unminified. (JSON-Editor doesn't use the external stylesheets much, so it rarely gets updated) And then refer to the minified version in the Webpack setup.

[sirockin]

No that doesn't appear to be happening - I'll look into finding a clean way - someone else must have solved this - before resorting to dirty.

[pmk65]

2 Webpack 4 plugins for minifying CSS:
https://github.com/NMFR/optimize-css-assets-webpack-plugin
https://webpack.js.org/plugins/mini-css-extract-plugin/

https://stackoverflow.com/questions/50628268/webpack-css-optimization-and-minify

[sirockin]

Thanks - I'm already using them.

[pmk65]

Maybe useful: https://github.com/marharyta/webpack-boilerplate

[germanbisurgi]

fixed in #647