Order is destroyed when merging across multiple pages

[peterbe]

minimalcss will generate minimal CSS payloads for multiple URLs. It then combines them into one final merged version. Suppose you have two URLs with different DOM nodes present.

// pageX.html's minimal CSS
.btn { font-size: 10px }
.btn-default { font-size: 12px }

...and...

// pageY.html's minimal CSS
.btn { font-size: 10px }

First you combine this into one blob of CSS so it becomes:

.btn { font-size: 10px }
.btn-default { font-size: 12px }
.btn { font-size: 10px }

...and run it through csso.minify()
you end up with this:

.btn-default{font-size:12px}.btn{font-size:10px}

Now, in the case of this <button class="btn btn-default"> you end up with a button that is font-size: 10px which is not what you wanted.

[peterbe]

Added a blurb about it in the README.

I'm still wondering if it'd be possible to technically solve this. Probably not. But perhaps there's an opportunity to see what values of selectors change when the second URL comes in. Hard.

[ihorsl]

If it is possible to log each css rule line number and filename, than you can merge them according to line number in css file
page 1
Line number 100 .btn { font-size: 10px }
Line number 200 .btn-default { font-size: 12px }

page 2
Line number 100 .btn { font-size: 10px }

Result after merge:

Line number 100 .btn { font-size: 10px }
Line number 100 .btn { font-size: 10px }
Line number 200 .btn-default { font-size: 12px }

[leeoniya]

you may find this useful: leeoniya/dropcss#22

[leeoniya]

thinking about it a bit more, i think a partial solution might be to get the minimal css per file, then merge all same files before merging others. csso(csso(base1_minimal, base2_minimal), csso(specific.css)). still relies on file ordering though.

EDIT: nope, this prolly won't work either :(

[peterbe]

@ihorsl I think it goes deeper than that. It might work'ish. Suppose it's possible to write something like that it might get it right 90% of the time, but those 10% would be a disaster. I say disaster because the work to untangle it would be really hard. You'd almost have to start over from scratch.

Remember, something like this minimalcss is probably only needed when you use a CSS framework. If you handcoded all the CSS it'd probably so minimal (no pun intended) that none of this tooling is necessary.

My point is, we got to be careful so we don't really need to understand what we're optimizing. Otherwise the abstraction will leak.