React-styleguidist: Custom styles are not applied to minified build

[Xiphe]

Current behavior

This has been reported earlier: https://github.com/styleguidist/react-styleguidist/issues/1431

When I run styleguidist build with a webpack config that minifies function names then my custom styles are not applied.

To reproduce

https://github.com/McManning/styleguidist-demo

Expected behavior

I expect the minified bundle to still apply my custom styles.

[Xiphe]

The problem comes from the Styled HOC relying on the function name.

I would propose to refactor this to const componentName = (WrappedComponent.displayName || WrappedComponent.name).replace(/Renderer$/, ''); and explicitly decorate all rsg components with their displayNames as string. Like LogoRenderer.displayName = 'LogoRenderer'; This way the StyleHOC can identify the rsg components even after they are minified.

Let me know what you think, I'd happily provide a PR for this.

[stale[bot]]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.

[BboyAwey]

I've met this shit too. Is there any solution on it ?

[Eddie-CooRo]

@BboyAwey Disabling the minification worked for me.

[Xiphe]

As I said this can (an should) be fixed within styleguidist itself by having explicit static displayName attributes on all stylable components.

[BboyAwey]

This bug also affect the custom components of styleguidist. If you are using custom styleguidist components and still need the minification of your code, here is my temporary solution for this bug.

Create a new file named Styled.fixed.js which is copied from react-styleguidist/lib/client/rsg-components/Styled/Styled.js, and fixe this bug like below, then put it into our src dir.

/* eslint-disable */
/**
 * this file will fix a styleguidist bug:
 * https://github.com/styleguidist/react-styleguidist/issues/1525
 * and if there's any fix solution from styleguidist
 * please remove this file and use the latest version of styleguidist
 * 
 * Awey 2020-04-30
 */
import "core-js/modules/es.function.name";
import "core-js/modules/es.object.assign";
import "core-js/modules/es.regexp.exec";
import "core-js/modules/es.string.replace";
import React, { Component } from 'react';
import Context from 'rsg-components/Context';
import createStyleSheet from 'react-styleguidist/lib/client/styles/createStyleSheet';

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

export default function StyleHOC(styles) {
  return function (WrappedComponent) {
    var _class, _temp;
    // fix the bug here
    var componentName = (WrappedComponent.displayName || WrappedComponent.name).replace(/Renderer$/, '');
    return _temp = _class =
    /*#__PURE__*/
    function (_Component) {
      _inheritsLoose(_class, _Component);

      function _class(props, context) {
        var _this;

        _this = _Component.call(this, props, context) || this;

        _defineProperty(_assertThisInitialized(_this), "sheet", void 0);

        _this.sheet = createStyleSheet(styles, // the protection here is useful for tests
        context.config || {}, componentName, context.cssRevision);

        _this.sheet.update(props).attach();

        return _this;
      }

      var _proto = _class.prototype;

      _proto.componentDidUpdate = function componentDidUpdate(nextProps) {
        this.sheet.update(nextProps);
      };

      _proto.render = function render() {
        return React.createElement(WrappedComponent, Object.assign({}, this.props, {
          classes: this.sheet.classes
        }));
      };

      return _class;
    }(Component), _defineProperty(_class, "displayName", "Styled(" + componentName + ")"), _defineProperty(_class, "contextType", Context), _temp;
  };
}

Import this file in your custom styleguidist components, and use displayName property instead:

import React from 'react'
// use the fixed file
import Styled from './Styled.fixed'

const styles = ({ fontFamily, color, borderRadius, space }) => ({
  code: {
    padding: '2px 5px',
    backgroundColor: color.sidebarBackground,
    color: color.name,
    borderRadius: borderRadius,
    fontFamily: fontFamily.monospace,
    fontSize: 14,
    marginLeft: space[0],
    marginRight: space[0]
  }
})

export const Code = ({ classes, children }) => <code className={classes.code}>{children}</code>

// give your custom component a display name
Code.displayName = 'Code'

export default Styled(styles)(Code)

[stufisher]

Any news on this one?

[stale[bot]]

😴 This issue has been automatically marked as stale because it has not had recent activity. It will be closed in a week without any further activity. Consider opening a pull request if you still have this issue or want this feature.

[Xiphe]

I still find this mission-critical and am disappointed that no maintainer responded to this

[Xiphe]

🧙‍♀️ Summoning @sapegin @n1313 @mitsuruog

[sapegin]

I still find this mission-critical and am disappointed that no maintainer responded to this

If this is mission-critical _for you_, open a pull request. But talking to maintainers like they owe you something isn't going to work.