Prevent MUI from optimizing class names in prod

[fmsf]

I would like to prevent MUI from optimising classNames:

• development: .MuiAppBar-root-12

• production: `.c12``
  documentation: https://material-ui.com/customization/css-in-js/#class-names

• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior

With NODE_ENV=production MUI optimizes the names, which is cool, but I am using MUI with https://github.com/kriasoft/react-starter-kit and (it may be configuration noobness), but I am seeing the following code being generated. Class names in HTML optimised, but styles not optimised:

I've been through the documentation trying to figure out how to disable the class name optimisation but can't find anything. Should there be a configuration flag, or am I missing something? As a side note I'm doing this side project to cut some learning curve, so I may be missing something obvious.

Your Environment

current dependencies, is mostly the stuff from here https://github.com/kriasoft/react-starter-kit, except with an added material ui:

"dependencies": {
    "babel-polyfill": "7.0.0-beta.3",
    "bluebird": "^3.5.1",
    "body-parser": "^1.18.2",
    "classnames": "^2.2.5",
    "cookie-parser": "^1.4.3",
    "core-js": "^2.5.1",
    "express": "^4.16.2",
    "express-graphql": "^0.6.11",
    "express-jwt": "^5.3.0",
    "graphql": "^0.11.7",
    "history": "^4.7.2",
    "install": "^0.10.1",
    "isomorphic-style-loader": "^4.0.0",
    "jsonwebtoken": "^8.1.0",
    "material-ui": "^1.0.0-beta.18",
    "node-fetch": "^1.7.3",
    "normalize.css": "^7.0.0",
    "passport": "^0.4.0",
    "passport-facebook": "^2.1.1",
    "pretty-error": "^2.1.1",
    "prop-types": "^15.6.0",
    "query-string": "^5.0.1",
    "ramda": "^0.25.0",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "rss-parser": "^2.10.6",
    "sequelize": "^4.17.2",
    "serialize-javascript": "^1.3.0",
    "source-map-support": "^0.5.0",
    "universal-router": "^4.3.0",
    "whatwg-fetch": "^2.0.3",
    "yarn": "^1.2.1"
  }

Any help or direction would be great. And thanks for the hand.

[oliviertassinari]

Class names in HTML optimised, but styles not optimised

Wow, it's very weird! It's hard to tell what's going on without a reproduction repository.
Without, I can't help much. I would encourage looking why the NODE_ENV change.

how to disable the class name optimisation but can't find anything. Should there be a configuration flag, or am I missing something?

People can provide their own class name generator with the JssProvider component and createGenerateClassName option of JSS. So you can implement a simple version of it without this optimization.

[mlg87]

@oliviertassinari ive got the opposite issue currently in my production build (also using the kriasoft starter kit) where the stylesheets have been optimized correctly, but the development classes are on the dom elements (see here). ive also followed the guide in the css-in-js docs almost to a t. any ideas?

also, sorry for commenting on a closed issue, but it is the most relevant one that ive found

[mlg87]

in case anyone finds this in the future and you're experiencing something similar, see this issue in webpack. that will take care of it for you

[oliviertassinari]

@mlg87 In the case of SSR, it means your server isn't configured for production, only the client is.