didn't generate classname about babel-plugin-react-css-modules

[darylwright]

I'm also experiencing this issue, however, the classes get generated when there is whitespace after the styleName attribute.

This JSX code...

<ul className="justify-content-center" styleName="pagination">
        <li styleName={`page-item${isFirstPage ? " disabled" : ""}`}>
          <a styleName="page-link" href={`${basePath}/1`} aria-label="First">
            <span aria-hidden="true">&laquo;</span>
            <span className="sr-only">First</span>
          </a>
        </li>
</ul>

... produces this DOM structure.

<ul class="justify-content-center ">
  <li class="">
    <a class="" href="/blog/posts/1" aria-label="First">
      <span aria-hidden="true">«</span>
      <span class="sr-only">First</span>
    </a>
  </li>
</ul>

However, when I put a space after the first styleName attribute only...

<ul className="justify-content-center" styleName="pagination" >{/* Note the space before the closing angle bracket*/}
        <li styleName={`page-item${isFirstPage ? " disabled" : ""}`}>
          <a styleName="page-link" href={`${basePath}/1`} aria-label="First">
            <span aria-hidden="true">&laquo;</span>
            <span className="sr-only">First</span>
          </a>
        </li>
</ul>

all styleNames generate their corresponding classNames.

<ul class="justify-content-center pagination___3ieNK">
  <li class="page-item___2eMHw disabled___2y7aB">
    <a class="page-link___t-Mvf" href="/blog/posts/1" aria-label="First">
      <span aria-hidden="true">«</span>
      <span class="sr-only">First</span>
    </a>
  </li>
</ul>

In another instance, the styleName attribute was not able to be converted over because there wasn't a space before a self-closing <img> tag. (i.e. <img src="..."/> vs. <img src="..." />) Adding the space before self-closing the tag enabled the styleName to generate the className.

Edit: A temporary workaround for the issue I'm having is to position the styleName attribute such that it isn't the last one in the DOM element. This ensures that there is a space after the attribute. This will not work if the styleName is the only attribute in the element.