Can Missing semicolons in CSS and Javascript influence how code works?

Question

I always leave my css code and javascript minified but had never noticed the output generated. Well, I noticed that the last rule of a selector (in css) and the last function (in javascript) always loses the semicolon. For example, a simple rule in css:

div {
  border: 2px solid red;
  color: #fff;
}

Would be:

div{border:2px solid red;color:#fff} /*perdendo o último ponto e vírgula */

Another example, in javascript:

$(function(){
   var foo = true;

   if(foo) {
     foo = false;
     bar();  
   }
});

Will generate:

$(function(){var foo=true;if(foo){foo=false;bar()}}) /* sem os últimos ponto e vírgula */

In case there is only one function within a block, it also loses the score.

if(foo){
  bar();
}

Vira:

if(foo){bar()}

My question on the subject is: Can the absence of these various semicolons influence the functioning of the code in any way? I did tests on simple codes but I’m wondering if I might have problems with more complex work.

Answer 1

CSS

In the case of CSS, I see no problem in removing the ; of the last property of a rule. As after it comes the lock key, there can be no problems. The mini-scanner probably does this to reduce the file size by saving one character per rule.

Javascript

In the JS, the rules of omission of ; are more complex. Removing the semicolon just before the block closes does not seem problematic to me, but other cases may be. Your example of $(function...), for example. Let’s simplify and see where you can give problem. Basically what you have is a function call:

funcao()

This can be a problem if another file is concatenated after that. The minificator doesn’t know what the function does. What if it returns a function? For example:

function funcao() {
    return function(a) { console.log(a); }
}

Imagine something concatenated after that, like a typical code that uses the module Pattern:

(function() {
    return { foo: true };
}());

The minified and concatenated code would look like this (assuming funcao was already available and in scope):

funcao()(function() { return { foo: true };}())

The result is that the function returned by funcao will be invoked, receiving as parameter the object { foo: true }. The object will be logged into the console (because that’s what our example function does).

Therefore: a withdrawal of ; in Javascript, if it is not done very carefully, it can cause side effects.

Answer 2

1. When applying Minify techniques without ;, your code will probably stop working;
2. In my opinion there is something more cool to understand;