babel / minify

:scissors: An ES6+ aware minifier based on the Babel toolchain (beta)
https://babeljs.io/repl
MIT License
4.39k stars 225 forks source link

babel minify output has mysterious/broken output for this example #1044

Open codefactor opened 1 year ago

codefactor commented 1 year ago

Describe the bug

Some minified JS code is not functionally equivalent to original, and it produces runtime errors when the minified code is executed. Some extra unexpected string variable is injected into the minified JS code and then later that variable is used as a function which throws.

To Reproduce

Minimal code to reproduce the bug

Using package.json like this:

{
  "name": "babel-issue",
  "version": "1.0.0",
  "devDependencies": {
    "@babel/core": "^7.14.6",
    "@babel/preset-env": "^7.14.7",
    "babel-minify": "^0.5.2",
    "ts-node": "^10.9.1"
  }
}

Execute code like this:

const content = `(function() {
  var e = YAHOO.util, k = YAHOO.lang, L = YAHOO.env.ua, a = YAHOO.lang.trim, B = {}, F = {}, m = /^t(?:able|d|h)$/i, w = /color$/i, j = window.document, v = j.documentElement, C = "ownerDocument", M = "defaultView", U = "documentElement", S = "compatMode", z = "offsetLeft", o = "offsetTop", T = "offsetParent", x = "parentNode", K = "nodeType", c = "tagName", n = "scrollLeft", H = "scrollTop", p = "getBoundingClientRect", V = "getComputedStyle", y = "currentStyle", l = "CSS1Compat", A = "BackCompat", E = "class", f = "className", i = "", b = " ", R = "(?:^|\\s)", J = "(?= |$)", t = "g", O = "position", D = "fixed", u = "relative", I = "left", N = "top", Q = "medium", P = "borderLeftWidth", q = "borderTopWidth", d = L.opera, h = L.webkit, g = L.gecko, s = L.ie;
  e.Dom = {
      _getXY: function(W) {
          var X, G, Z, ab, Y, aa, ac = Math.round, ad = false;
          if (e.Dom._canPosition(W)) {
              Z = W[p]();
              ab = W[C];
              X = e.Dom.getDocumentScrollLeft(ab);
              G = e.Dom.getDocumentScrollTop(ab);
              ad = [Z[I], Z[N]];
              if (Y || aa) {
                  ad[0] -= aa;
                  ad[1] -= Y;
              }
              if ((G || X)) {
                  ad[0] += X;
                  ad[1] += G;
              }
              ad[0] = ac(ad[0]);
              ad[1] = ac(ad[1]);
          }
          return ad;
      }
  };
})();`;
console.log(new require("babel-minify")(content).code);

Actual Output

The console will output this:

(function(){var b=YAHOO.util,c=YAHOO.lang,e=YAHOO.env.ua,f=YAHOO.lang.trim,a=window.document,i=a.documentElement,j=e.opera,d=e.webkit,h=e.gecko,g=e.ie;b.Dom={_getXY:function(a){var d,e,f,g,h,i,c=Math.round,j="tagName",k=!1;return b.Dom._canPosition(a)&&(f=a.getBoundingClientRect(),g=a.ownerDocument,d=b.Dom.getDocumentScrollLeft(g),e=b.Dom.getDocumentScrollTop(g),k=[f.left,f.top],(h||i)&&(k[0]-=i,k[1]-=h),(e||d)&&(k[0]+=d,k[1]+=e),k[0]=j(k[0]),k[1]=j(k[1])),k}}})();

This is prettified like this (but not very pretty)

(function() {
    var b = YAHOO.util,
        c = YAHOO.lang,
        e = YAHOO.env.ua,
        f = YAHOO.lang.trim,
        a = window.document,
        i = a.documentElement,
        j = e.opera,
        d = e.webkit,
        h = e.gecko,
        g = e.ie;
    b.Dom = {
        _getXY: function(a) {
            var d, e, f, g, h, i, c = Math.round,
                j = "tagName",
                k = !1;
            return b.Dom._canPosition(a) && 
                (f = a.getBoundingClientRect(),
                g = a.ownerDocument,
                d = b.Dom.getDocumentScrollLeft(g),
                e = b.Dom.getDocumentScrollTop(g),
                k = [f.left, f.top],
                (h || i) && 
                (k[0] -= i, k[1] -= h), 
                (e || d) && 
                (k[0] += d, k[1] += e),
                k[0] = j(k[0]),
                k[1] = j(k[1])),
                k;
        }
    }
})();

Expected Output

This is my best guess what it should look like instead:

(function() {
    var b = YAHOO.util,
        c = YAHOO.lang,
        e = YAHOO.env.ua,
        f = YAHOO.lang.trim,
        a = window.document,
        i = a.documentElement,
        j = e.opera,
        d = e.webkit,
        h = e.gecko,
        g = e.ie;
    b.Dom = {
        _getXY: function(a) {
            var d, e, f, g, h, i, c = Math.round, k = !1;
            return b.Dom._canPosition(a) && 
                (f = a.getBoundingClientRect(),
                g = a.ownerDocument,
                d = b.Dom.getDocumentScrollLeft(g),
                e = b.Dom.getDocumentScrollTop(g),
                k = [f.left, f.top],
                (h || i) && 
                (k[0] -= i, k[1] -= h), 
                (e || d) && 
                (k[0] += d, k[1] += e),
                k[0] = c(k[0]),
                k[1] = c(k[1])),
                k;
        }
    }
})();

NOTE:

  1. The j variable with "tagName" is unexpected
  2. Later the js variable is used as a function which throws an exception
  3. The function should have been called on the "c" variable which is actually Math.round
  4. The example code is not meant to be complete, just a small fragment of the bigger original source file - which I would be happy to provide the original file if necessary.

Configuration

All configuration is provided above in the package.json and JS code snippet.

I'm using babel-minify to minify a JS file just as shown above, though in my example I'm reading from constant using only a small JS snippet from the bigger file that has the issue.

Possible solution

Additional context

As background, I'm trying to replace a google closure implementation that works fine with babel-minify, and mostly works fine - but this one really old JS file is not compressing correctly. I can work around the problem by making minor adjustments to the JS code being minified, which is fine; however, I'd like to know more about the problem. The example JS being minified is from YUI, and I believe the file has been prettified and then minify again - but please just ignore that.

codefactor commented 1 year ago

Any ideas on this one? Is this the right repository for this type of issue?

I wasn't sure about it because I don't know where the actual minify mistake occurs.

At the moment our solution is to just disable minify on certain files. But this is obviously not ideal.