title: React App with css module multiple classes
body: <p>i created a basic react app like this:</p>
  <pre><code>import React from 'react';
  import style from './Button.module.scss';
  
  
  export default class Button extends React.Component {
      render() {
          return (
              &lt;button className={[style.class, 'awesome', 'great'].join(' ')}&gt;
                  hello world
              &lt;/button&gt;
          );
      }
  }
  </code></pre>
  <p>the css/scss:</p>
  <pre><code>.class {
      background: pink;
      color: red;
  
  
      /* not working */
      &amp;:is(.awesome) {
          border-width: 2px;
      }
  
      /* not working either */
      &amp;.awesome {
          border-width: 2px;
      }
  
      /* works */
      &amp;:not(.great) {
          border-style: dotted;
      }
  }
  </code></pre>
  <p>the problem:
  the sublass <code>.awesome</code> is not working, whereas <code>.great</code> works fine.
  Can you fix the code so the <code>.awesome</code> will work.
  I need some subclass of the .button, so i can toggle them at runtime.</p>
  <p>this is the generated css on the browser,
  the <code>.awesome</code> is not generated but <code>.great</code> generated.</p>
  <pre><code>.Button_class__1tDJY:not(.Button_great__3yeAv) {
      border-style: dotted;
  }
  .Button_class__1tDJY {
      background: pink;
      color: red;
  }
  </code></pre>