Style changes after applying cleancss

[JanWielemaker]

I'm applying cleancss to merge a large number of css files. This worked fine in 2.2.14, but in 3.4.6 the #content div has no longer 100% width. The bug is apparently introduced with restructuring because all works fine again when using cleancss --skip-restructuring. I fully realize this is a poor bug report. I'm not really sure how to create a good one though :(

Is this known? How to reduce this to a simple example? Run both using -b and try to work out what style aspects are different in the CSS debugger? Any better suggestion?

[jakubpawlowicz]

Thanks for reporting it @JanWielemaker - there is no easy way of narrow it down, I usually use -b and get rid of content until I made it work / break. You can also share the file privately so I can take a look.

[simpixelated]

I had to set restructuring: false to keep it from stripping -webkit-transform from the ionic CSS: https://github.com/driftyco/ionic/blob/af1bfef327e685585244c6051c4d38b98aa6c62a/release/css/ionic.css#L2914. Would have taken me hours to find if I hadn't seen this issue. Thanks @JanWielemaker!

[elipoultorak]

I also found the same bug. If you compile the following code without --skip-restructuring the result will be a{text-decoration:none} but it should be underline. If you add --skip-restructuring then it's fine.

html{color:#000;background:#fff;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}

a,article,aside,blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,html,input,legend,li,nav,ol,optgroup,p,pre,section,select,sub,sup,table,td,textarea,th,ul{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0}
img{border:0}
a,body,div,html,span{background:transparent;text-decoration: none;}
a:active,a:hover{outline:0}
svg:not(:root) {overflow: hidden;}
select,input,button,textarea,table{font-size: inherit; font-family: inherit}
sub,sup{line-height:0;position:relative;vertical-align:baseline}


button,input,optgroup,select,textarea{color:inherit;font:inherit;box-sizing: content-box}
button{overflow:visible}
button,select{text-transform:none}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}
button[disabled],html input[disabled]{cursor:default}
input, select{vertical-align:middle;}
legend{color:#000;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input{line-height:normal;display:inline-block;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}
textarea{overflow:auto}
optgroup{font-weight:bold}
input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height: auto;}
input[type="search"]{-webkit-appearance: textfield;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;box-sizing: content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration {-webkit-appearance: none;}


article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
audio:not([controls]){display: none;height: 0;}
nav ul{list-style:none;}
body,input{
    font-size: 15px;
    line-height: 19px;
    font-family: "Droid Sans",Helvetica,Arial,sans-serif;
}
pre,code,kbd,samp,tt{font-family:monospace;}

h1{font-size:22px;line-height: 27px;}
h2{font-size: 18px;line-height: 22px;}
h3{font-size:15px;line-height: 19px}
h4,h5,h6{font-size: 14px;line-height: 17px}
h1,h2,h3{margin:0.5em 0;}


h1,h2,h3,h4,h5,h6,b,strong{font-weight: bold;}
em{font-style:italic}
a{text-decoration: underline;color:#00f;}
ol{list-style:decimal inside}
ul{list-style:disc inside}
dl dd{margin-left:1em}
th,td{border:1px solid #000;padding:0.4em;vertical-align: middle}
th{font-weight: bold;text-align:center}
p,fieldset,table,pre{margin-bottom:0.7em;}
input:not([type]),
input[type=text],
input[type=password],
textarea{
    width:170px;
    border:1px solid #d0d0d0;
    padding:3px 6px;
    border-radius: 3px;
    border-top-color: #bbb;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5), 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
    background: #fff;
}
textarea{height: 100px;}
input:not([type]):focus,
input[type="text"]:focus,
input[type=password]:focus,
textarea:focus {
    border: 1px solid #49f;
    outline: none;
    box-shadow: 0 0 2px rgba(0, 0, 50, 0.4), 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
}

sub,sup,small{font-size:12px}
sub{bottom:-0.25em}
sup{top:-0.5em;}
del{text-decoration: line-through;}
u,ins{text-decoration: underline;}

[jakubpawlowicz]

I can see it now, fix is coming in 3.4.9!

[jakubpawlowicz]

It's fixed in 3.4.9.

[elipoultorak]

Thanks!