mrcoles / cssunminifier Goto Github PK
View Code? Open in Web Editor NEWA tool to unminify CSS—written in node.js
Home Page: http://mrcoles.com/blog/css-unminify/
A tool to unminify CSS—written in node.js
Home Page: http://mrcoles.com/blog/css-unminify/
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);}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.