Css-minify currently appears to remove all whitespace from quoted strings, however this is not necessarily desirable in the css content property.

On my page I am using the content property to add an arrow before collapsible elements, however upon minification the resulting element goes from:

To:

I have confirmed in the minified css file that this is in fact caused by css-minify.

CSS-minify has very recently started converting properties such as display: none to display: 0 and clip-path: unset to clip-path: 0. This renders the styles void, hence they are ignored by the browser.

One space is removed here and shouldn't be :

This rule:

.grid-item { width: calc((100% / 3) - 20px); }

gives:

.grid-item{width:calc((100% / 3)- 20px)}

Result: the rule doesn't work anymore because space before minus is removed.

please improve your vs code docs as in list it makes someone confuse

it just simple error but can let beginner not understand your extension

Example :

In style.css :

@import url("//fonts.googleapis.com/css?family=Maven+Pro:400,500,700,900");

In style.min.css :

@import url("//fonts.googleapis.com/css?family=Maven + Pro:400,500,700,900");

Issue :

There are some spaces before and after the "+" symbol in the minified url.
It produces bugs like 404 errors.

Hi @DracotMolver , it's me again ;)

I experienced another bug:

.my-form[disabled=true] .my-input { cursor: not-allowed; }

is minified as:

.my-form[disabled=true].my-input{cursor:not-allowed;}

removing space between attribute value selector ([disabled=true]) and children class (.my-input)

As well as
.accordion [data-toggle='collapse']
is minified as
.accordion[data-toggle='collapse']

CSS-minify removes spaces from calc() expression. I.e. calc(100% + 5px) ends up as calc(100%+5px) which doesn't work.

It is removing the space infront of an asterisk when used as a global selector.

#aptApp * { 
   box-sizing: content-box;
}

becomes

#aptApp*{box-sizing:content-box;}

which failes as a selector it was intended for.

expected
#aptApp *{box-sizing:content-box;}

I have found that the minify process is eliminating spaces following a :not property. For instance: body:not(.logged-in) .greeting becomes body:not(.logged-in).greeting, thereby breaking the assigned values.

header nav ul li:not(.nohover):hover ul { }

minified as

header nav ul li:not(.nohover) :hover ul { } /* space before : */

Tried [ Ctrl|Cmd + F1 ] on VS Code 1.14.2 and didn't work. But when clicked only F1 it let me to write css minify.

@media only screen and (min-width: 375px) is being minified as
@media only screen and(min-width:375px)
The space between 'and' and '(' is needed for the query to work.

The minifying is removing quotes from the font format, so

@font-face{
   font-family:'pxgrotesk-regular';
   src:url('pxgrotesk-regular.eot');
   src:url('pxgrotesk-regular.eot?#iefix') format('embedded-opentype'), 
   url('pxgrotesk-regular.woff2') format('woff2'), 
   url('pxgrotesk-regular.woff') format('woff'), 
   url('pxgrotesk-regular.ttf') format('truetype'), 
   url('pxgrotesk-regular.svg#svgFontName') format('svg');
}

becomes

@font-face{
   font-family:'pxgrotesk-regular';
   src:url(pxgrotesk-regular.eot);
   src:url(pxgrotesk-regular.eot?#iefix) format(embedded-opentype), 
   url(pxgrotesk-regular.woff2') format(woff2), 
   url(pxgrotesk-regular.woff') format(woff), 
   url(pxgrotesk-regular.ttf') format(truetype), 
   url(pxgrotesk-regular.svg#svgFontName) format(svg);
}

Then the browser[chrome] isn't rendering correctly, if I add quotes back to jus the format() it fixes it.

Thanks for your extension.

If css file contains any path to file with name ending with 0, i.e. "bg-section10.jpg", CSS-minify resolve it to "bg-section1.jpg" which breaks dependencies.