Jss: Classes does not work for Components with special chars in display name

[kof]

@luiz290788 commented on Mon Nov 13 2017

The new prefix for the generated classes that use the display name of the decorated components are not being sanitized.

For example:
Decorated class display name "SomeOtherDecorator(Test)"
Generated classes ".SomeOtherDecorator(Test)-root-0-1"
The parenthesis in the classes is causing the problems here.

Suggested solution: Parse the display name of the component to remove the special characters.

---

@kof commented on Mon Nov 13 2017

Or escape the chars.

---

@luiz290788 commented on Mon Nov 13 2017

I was checking the code and thinking about the issue, it seems to be a jss issue instead of a react-jss issue. What do you think?

---

@kof commented on Mon Nov 13 2017

Well, ultimately yeah, as we are using property names in classes, they can also contain everything. We just never had that issue over there.

---

@kof commented on Mon Nov 13 2017

Also the escaping needs to be done in dev mode only, because in production we build short class names.

[kof]

I am going to use CSS.escape, since it is implemented in the most modern browsers and will be used in dev mode only. If once develops in a different browser, there is a good polyfill.

[kof]

fixed and released

[rafaeltavares]

I'm facing problems with generated class names in production, using react-jss.
It seems that they need to be escaped.

[kof]

@rafaeltavares please file a separate issue with codesandbox link

[iamstarkov]

@rafaeltavares can you place injectSheet HoC after injectIntl one?

[rafaeltavares]

@iamstarkov I updated react-jss from version 8.2.0 to 8.2.1 and it worked.