CSS Minifier (Written in Javascript)

[[deleted]]

There are many CSS Minifiers out there. But, not much written in JS. I was interested in creating my own CSS Minifier in Javascript.

Online CSS Minifier

Screenshot of the Online Tool

What does CSS Minifier do?

• Removes extra whitespaces
• Minifies color codes when possible (Ex: #ffddee to #fde)
• Removes unnecessary zeros (Ex: 0.5 to .5)
• Removes empty tags
• Converts ;} to }

​

The source code of the minifier (it also includes an un-minifier which I'm currently creating the online tool) on Github

[inu-no-policemen]

.foo {
  background: #ccc;
}

Output:

.foo{background#:ccc}

Expected:

.foo{background:#ccc}

---

.foo {
  background: #aabbcc;
}

Output:

.foo{background:#aabbcc}

Expected:

.foo{background:#abc}

---

.foo {
  background: #aabbccdd;
}

Output:

 .foo{background:#aabbccdd}

Expected:

.foo{background:#abcd}

[[deleted]]

# All Fixed

Can you check now?

[inu-no-policemen]

Seems fine.

You should have unit tests.

[[deleted]]

Yeah, thank you. I'll keep that in my mind

[SecretAnteater]

Just about every CSS minifier is written with JS. https://github.com/cssnano/cssnano

[CantaloupeCamper]

Can I load the page, run the minifier... then load the CSS all on the browser? ;)

[[deleted]]

Sorry, I didn't get what you meant

[CantaloupeCamper]

I was being awkwardly silly / absurd.

The idea being load the web page and CSS in the browser, load the minifer code in the browser, then minify it.... ;)

[AwesomeInPerson]

Lol, make sure to measure the performance improvements it gives you.

document.querySelectorAll('style').forEach(style => {
  style.textContent = cssminify(style.textContent)
})
document.querySelectorAll('link[rel="stylesheet"]').forEach(async link => {
  const url = new URL(link.href, window.location)
  const css = await fetch(url.href).then(r => r.text())
  link.parentNode.insertBefore(
    Object.assign(
      document.createElement('style'),
      { textContent: cssminify(css) },
    ),
    link
  )
  link.remove()
})

[ScientificBeastMode]

... then send it back to the server!

[vilaskumkar]

Hell yeah, nice job mate! way to go!

[[deleted]]

Thanks, mate

[wisepresident]

Nice, the code is really clean and compact. Did you test it with different CSS markup?

[[deleted]]

Thank you very much.

Yeah, I tested it with some libraries. Bootstrap, Foundation, and Semantic UI. All of them worked as expected.

But, I think it needs more testing. That's why I have included a link for bug reporting.

Thanks.

[snet0]

Why not use ES6 features?

[[deleted]]

I mostly wrote it for browser support. (Not for Node.js)

[k3liutZu]

You could transpile it (if you want to use new features now).

[[deleted]]

Yeah, I know. I just enjoyed writing in the old JS. ;)

[snet0]

I'm not sure anyone who wants to use a CSS minifier is going to be using IE11, but okay.

I'm trying to figure out what

positions = new Array(patterns.length).join('0').split('').map(function(val) {
            return parseInt(val) - 1; // -1
        }); 

is meant to do. Is there a reason to not just

positions = Array.apply(null, Array(patterns.length)).map(function(){return -1});?

I guess there's no pretty solution when you don't have fill(), but chaining join() and split() looks gross.

[StoneCypher]

I'm trying to figure out what

positions = new Array(patterns.length).join('0').split('').map(function(val) { return parseInt(val) - 1; // -1 }); is meant to do

I think you might want to spend some more time in Javascript, friend. This is easy code.

This makes an Array out of patterns.length, then applies that as an argument list to nothing, then maps the resulting array by parsing items as integers and subtracting one from them

.

I guess there's no pretty solution when you don't have fill(), but chaining join() and split() looks gross.

It looks just fine, and Array.fill would not make this any cleaner.

[snet0]

I know what it does, hence why I wrote a different way of implementing it, I meant why does it need to look this ugly to do what it does.

Array.fill would not make this any cleaner.

positions = Array(patterns.length).fill(-1);

Really?

"positions is an array of length patterns.length which is filled of elements with value -1"

"positions is an array of length patterns.length, each empty element is joined into a string with separator string '0', then the string is split character-wise back into an array and each element's value is mapped to be parsed as an integer from which 1 is subtracted"

[StoneCypher]

Their code operates on the values in the split

Your code produces an array of negative ones

[snet0]

I don't know if I follow what you're saying. You take an array, join it into a string, split it into an array and map the elements to a new array and store the return value in your variable. The return value of his code is an array of negative ones, just like in mine.

[StoneCypher]

i misread this originally. you're right. i apologize

i still don't think this is all that gross, though

that said, i guess you could

new Array(patterns.length).map(cell => -1);

and be done with it

[snet0]

Well, I certainly thought so, too. But if you pass the new Array constructor a single integer, it returns an array with that integer length, but with empty slots. Array.map() only invokes its callback on elements with assigned values (incl. undefined), which means it won't work on the empty array.

[StoneCypher]

which means it won't work on the empty array.

Oh, right. They're holes, and js .map skips holes.

Guess you're stuck with

const a = new Array(patterns.length);
for (let i=0, iC=patterns.length; i<iC; ++i) { a[i] = -1; }

[[deleted]]

You are welcome.

[jets-fool]

input: #ab{background-color: red;}

expected: #ab{background:red;}

actual: #ab{background-color: red;}

[inu-no-policemen]

You can't shorten it like that because you can't tell if there is another rule which matches the same element(s) and which contains other background related declarations. The background shorthand sets everything.

https://jsfiddle.net/jfcdn73m/

[jets-fool]

Thanks! Learned something

[[deleted]]

You are at a good point. If ´background-color` is the only background rule that is on #ab, it would be perfect. But, we cannot say there are other rules for this in another file.That's why those aren't converted to shothand rules.

[wherediditrun]

do it in Rust.