Preact: doesn't work properly with react-css-modules

[mqklin]

demo

Only inner styleName compiles to 'class', but inners not. You can see that div-2 value has stylename attribute, but should class as div-1.

---

Component code:

import React, { Component } from 'react';
import CSSModules from 'react-css-modules';
import styles from './styles.css';

@CSSModules(styles)
export default class App extends Component {
  render() {
    return (
      <div styleName="div-1">
        <div styleName="div-2">
          Big square should be red; <br /> Small square should be black.
        </div>
      </div>
    );
  }
}

styles.css:

.div-1 {
  width: 500px;
  height: 500px;
  background: red;
}

.div-2 {
  width: 200px;
  height: 200px;
  background: black;
  color: white;
}

---

How it looks:

How it should:

[developit]

@mkxml seems like he is using preact-compat - I was looking through the react-css-modules source to see if I could find where they're doing the VNode manipulation. Maybe just an issue with vnode.props being non-enumerable?

[mkxml]

@developit Hmm, with preact-compat it should work. After some consideration I removed my comment since it wouldn't help in this case. It would be useful if it was preact core + css-modules.

[developit]

indeed - your comment is how I use CSS modules too 👌

[mqklin]

It's very verbose to write styles every time, css-modules allows to write it only once, that's why I use it. Will be very great for me if this will be fixed, I want to try preact in production. Thanks.

[developit]

@mqklin understandable! This will likely be solved over in preact-compat, but I'm fine tracking it here to avoid lots of issue juggling.

[mqklin]

Any progress on this issue? Maybe I should create the issue in react-css-modules repo?

[developit]

@mqklin Might be useful - link me in there so maybe we can get more context. I'm not super familiar with react-css-modules, so any help is very much appreciated!

[mqklin]

I've migrated to styled-component. I don't think someone needs this issue to be fixed, so I'm closing it.

[pavelivanov]

so sad, hoped it to be fixed... =/

[evenfrost]

@developit maybe it could get a bit of attention for upcoming release of Preact X? I know this issue was a kind of dead-end, but I'm ready to help if had some clues where to start (have a little to no experience in Preact/Babel plugins development).

Currently react-css-modules moved to babel-plugin-css-modules, and here is corresponding issue in its repo: https://github.com/gajus/babel-plugin-react-css-modules/issues/250.

As for me, this is real helper in React project as you can switch from writing className={styles.foo} to just styleName="foo", and would be awesome to use it in Preact projects as well.