Illegal classname generation in Firefox

[hoangbn]

Current behaviour:

I am seeing illegal class names being generated in Firefox, making the browser not render those styles.

Chrome:

Firefox:

To reproduce:
This code is produced by the https://github.com/davidhu2000/react-spinners package (in particular https://github.com/davidhu2000/react-spinners/blob/master/src/ScaleLoader.tsx), but I cannot currently reproduce this on a fresh repo.

Any idea why this could potentially happen, and where I should look for it would be appreciated.

Expected behaviour:

Class names being generated in Firefox should have the same pattern as in Chrome.

Environment information:

• react version: 17.0.2
• @emotion/react version: 11.7.1

[Andarist]

@srmagura would you be so kind to take a look at this one? This is definitely related to the label extraction thing.

[srmagura]

Thanks for the ping. It is clearly an issue with label extraction.

I just rendered a ScaleLoader in my application and the class names are correct in Firefox. So the issue only manifests under certain conditions... it probably has to do with how the JS is transpiled.

@hoangbn I should be able to fix this quickly if we can get a minimal repro. Can you either (A) create a minimal repro yourself or (B) answer some questions so I can try to repro?

For (A), you would need to create a new React application that uses the exact same build tools & configuration as your real app where this is happening.

For (B):

1. Can you confirm you are using React 17.0.2?
2. What bundler are you using? E.g. Webpack 4
3. What are you using to transpile your JavaScript/TypeScript? E.g. Babel, swc, TypeScript
4. What version of ECMAScript is your transpiler targeting? E.g. ES5 or ES2015
5. Are you using @emotion/babel-plugin?

[hoangbn]

@srmagura Here's the repo: https://github.com/hoangbn/emotion-issue-2614.
The gatsby-theme-material-ui-top-layout/components/top-layout.js is a wrapper around pages/index.js. It's also where I'm creating the emotion CacheProvider.

I also noticed the classname is correctly generated in production (npm run build && npm run serve).

[srmagura]

Thanks a lot! I can reproduce it.

getLabelFromStackTrace currently does not support function names like Loader.prototype.render for engines other than V8 simply because we did not have any test cases that produced such a stack trace.

If you look at ScaleLoader.js in node_modules, it is clear that the stack trace will contain either Loader.render (V8) or Loader.prototype.render (Firefox).

var Loader = /** @class */ (function (_super) {
    __extends(Loader, _super);
    function Loader() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.style = function (i) {
            var _a = _this.props, color = _a.color, width = _a.width, height = _a.height, margin = _a.margin, radius = _a.radius, speedMultiplier = _a.speedMultiplier;
            return react_1.css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: ", ";\n      display: inline-block;\n      animation: ", " ", "s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "], ["\n      background-color: ", ";\n      width: ", ";\n      height: ", ";\n      margin: ", ";\n      border-radius: ", ";\n      display: inline-block;\n      animation: ", " ", "s ", "s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);\n      animation-fill-mode: both;\n    "])), color, helpers_1.cssValue(width), helpers_1.cssValue(height), helpers_1.cssValue(margin), helpers_1.cssValue(radius), scale, 1 / speedMultiplier, i * 0.1);
        };
        return _this;
    }
    Loader.prototype.render = function () {
        var _a = this.props, loading = _a.loading, css = _a.css;
        return loading ? (react_1.jsx("span", { css: [css] },
            react_1.jsx("span", { css: this.style(1) }),
            react_1.jsx("span", { css: this.style(2) }),
            react_1.jsx("span", { css: this.style(3) }),
            react_1.jsx("span", { css: this.style(4) }),
            react_1.jsx("span", { css: this.style(5) }))) : null;
    };
    Loader.defaultProps = helpers_1.heightWidthRadiusDefaults(35, 4, 2);
    return Loader;
}(React.PureComponent));

I should have a PR ready for this on Monday (don't have a Mac at home).