mrcoles / cssunminifier Goto Github PK

IMHO, this

.hide-for-print {
    display             : none;
}

should become

.hide-for-print {
    display: none;
}

While using your tool to unminify a min.css file, I noticed some errors that were created in the final deminified file, which all dealt with the "negation pseudo-class".

So, I found the issue within the 'cssunminifier.js' file located in the /lib/ folder.

My suggested fix: (Look at the code around line 24, .replace(/\n ([^:]+):\s*/g, **'\n $1:')** )
// I removed the additional unnecessary spaces

Your current one has: .replace(/\n ([^:]+):\s*/g, '\n $1: ')

Beginning around line 17 of ' cssunminifier/lib/cssunminifier.js ' file:

Replace current code with:

code = code
        .split('\t').join('    ')
        .replace(/\s*{\s*/g, ' {\n    ')
        .replace(/;\s*/g, ';\n    ')
        .replace(/,\s*/g, ', ')
        .replace(/[ ]*}\s*/g, '}\n')
        .replace(/\}\s*(.+)/g, '}\n$1')
        .replace(/\n    ([^:]+):\s*/g, '\n $1:')
        .replace(/([A-z0-9\)])}/g, '$1;\n}');

  if (tab != 4) {
	    for (;tab != 0;tab--) { space += ' '; }
	    code = code.replace(/\n    /g, '\n'+space);
    } 

If it helps, here is some code that will produce errors without the suggested fixes from above.

#lione{font-size:2em;color:#4682b4}#first{font-size:1em;color:red}#linext{font-size:2em;color:#000}#next{font-size:1em;color:orange}#lithird{font-size:2em;color:#00f}#third{font-size:1em;color:pink}#lilast{font-size:2em;color:brown}#one{font-size:1em;color:green}@media screen and (max-width:768px){.level-item:not(:last-child){margin-bottom:.75rem}}@media print,screen and (min-width:769px){.level-left .level-item:not(:last-child),.level-right .level-item:not(:last-child){margin-right:.75rem}}@media print,screen and (min-width:769px){.columns:not(.is-desktop){display:flex}}@media print,screen and (min-width:769px){.tile:not(.is-child){display:flex}.tile.is-1{flex:none;width:8.3333333333%}.tile.is-2{flex:none;width:16.6666666667%}.tile.is-3{flex:none;width:25%}.tile.is-4{flex:none;width:33.3333333333%}.tile.is-5{flex:none;width:41.6666666667%}.tile.is-6{flex:none;width:50%}.tile.is-7{flex:none;width:58.3333333333%}.tile.is-8{flex:none;width:66.6666666667%}.tile.is-9{flex:none;width:75%}.tile.is-10{flex:none;width:83.3333333333%}.tile.is-11{flex:none;width:91.6666666667%}.tile.is-12{flex:none;width:100%}}

It came with cssunminifier:

The "sys" module is now called "util". It should have a similar interface.

node.js:201
        throw e; // process.nextTick error, or 'error' event on first tick
              ^
Error: require.paths is removed. Use node_modules folders, or the NODE_PATH environment variable instead.

I searched on this problem and it someone said it is caused since the script is not compatible with node.js 0.6.x .

Anyone can fix it?

This was part of the result of un-minifying a stylesheet:

.pnd-img {
    width: auto;
    height: auto;
    position: relative;
    max-width: 100%}

Whereas the expected result is:

.pnd-img {
    width: auto;
    height: auto;
    position: relative;
    max-width: 100%;
}

Your (awesome!) tool manages to handle adding the missing semi-colons in seemingly all other scenarios except when the last style/property is a width, min-width, or a height. This is also an issue when the only style in the defined rule is a width, min-width, or a height.

Note 1: I've only tried this on: https://mrcoles.com/blog/css-unminify/

Note 2: Oddly enough, this wasn't always the case (but it did fail this about 80% of the time).

Note 3: I'm starting to wonder if maybe the % sign at the end is the problem. Because there were also odd cases of it failing when the last style was a left: 0%, margin-bottom: 5%, flex-basis: 50%, etc. The only exception to this has been one rule that ended with a content: "/".

Note 4: It also failed to add a new line after the closing bracket of a media query.

This will be unminified with a break after data:image/png; and will make the background-image unusable.

.test {color:#000;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAA4AgMAAAAED9f9AAAACVBMVEUAAABmZmZmZmaO3ZBrAAAAA3RSTlMA5rA5MyM4AAAAJElEQVQ4y2MYOUA1FAEiEMKiSMIheIUxDRkFo9Ew2MFoeBMDAPLUMTllKtkfAAAAAElFTkSuQmCC);}