-
-
Notifications
You must be signed in to change notification settings - Fork 220
Description
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:
- The j variable with "tagName" is unexpected
- Later the js variable is used as a function which throws an exception
- The function should have been called on the "c" variable which is actually Math.round
- 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.