"Cannot read property 'css' of undefined"

[donatj]

When running it on my site https://donatstudios.com, I receive in my console Cannot read property 'css' of undefined and it fails to show up.

[donatj]

I believe it is not getting along with MooTools.

[jdan]

Hey @donatj,

I can confirm this is happening, and though minified it looks like some webpack code that manages dynamic stylesheets. I'll look into this further today with an unminified copy - thanks for reporting.

[jdan]

Yeah this is pretty weird.

Line 367 of tota11y.js sets update to applyToTag with its first argument already bound to styleElement.

update = applyToTag.bind(null, styleElement);

However, we see that on line 373, the statement update(obj) results in the second argument to applyToTag being undefined (instead of obj). This is what's causing the error (we try to access the css property of the second argument).

So, why is this happening?

The "bind" I mentioned earlier is actually intercepted by mootools (you called it):

bind: function(bind, args){
    var self = this;
    if (args != null) args = Array.from(args);
    return function(){
        return self.apply(bind, args || arguments);
    };
},

Quite curiously, the returned function will || the original arguments with whatever it's called with, instead of concatenating them.

But there's another bind in this file!

bind: function(that){
    var self = this,
        args = arguments.length > 1 ? Array.slice(arguments, 1) : null,
        F = function(){};

    var bound = function(){
        var context = that, length = arguments.length;
        if (this instanceof bound){
            F.prototype = self.prototype;
            context = new F;
        }
        var result = (!args && !length)
            ? self.call(context)
            : self.apply(context, args && length ? args.concat(Array.slice(arguments)) : args || arguments);
        return context == that ? result : context;
    };
    return bound;
},

The latter should work just fine, but it's overwritten by the weird one mentioned above it.

I went ahead and made a JSBin to showcase this odd behavior: https://jsbin.com/jitixe/edit?html,js,console

You'll see that add3(7) should result in 10, but the actual result is NaN for the reasons mentioned above.

If we instead include "MooTools 1.5.0 (without 1.2 compatibility layer)" like I have in this JSBin: https://jsbin.com/zakuf/edit?html,js,console, we get 10 as expected.

tl;dr: Looks like Webpack's style-loader won't work with MooTools's 1.2 compatibility layer.

No one has touched this file since August 2011, so we can't rely on a fix from them :) Is there any way you can use MooTools without this compatibility layer? Otherwise you'll need to host tota11y yourself and include it before mootools if possible.

I'm going to close this issue because it's not a bug in tota11y (or even webpack), but I'm happy to explore some options with you.