title: CSS Modules and CSS keyframe animations
body: <p>I am trying to do a simple animation using React, keyframes, CSS modules (and SASS). The problem is that CSS Modules hash keyframe names the same way it hashes the local classes. </p>
  
  <p>JS code</p>
  
  <pre><code>//...
  
  export default () =&gt; {
    const [active, setActive] = useState(false);
    return(
      &lt;div className={active ? 'active' : 'inactive'}
        onClick={() =&gt; setActive(!active)}
      &gt;content&lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>An attempt to make everything global, used <a href="https://gravitydept.com/blog/keyframe-animations-in-css-modules" rel="noreferrer">this</a> source as a tutorial (does not compile):</p>
  
  <pre><code>//default scope is local
  
  @keyframes :global(animateIn) {
    0% { background: black; }
    100% { background: orange; }
  }
  
  @keyframes :global(animatOut) {
    0% { background: orange; }
    100% { background: black; }
  }
  
  :global {
    .active {
      background: orange;
  
      animation-name: animateIn;
      animation-duration: 1s;
    }
  
    .inactive {
      background: black;
  
      animation-name: animateOut;
      animation-duration: 1s;
    }
  }
  </code></pre>
  
  <p>Changing this does not work too:</p>
  
  <pre><code>:global {
    @keyframes animateIn {
      0% { background: black; }
      100% { background: orange; }
    }
  
    @keyframes animateOut {
      0% { background: orange; }
      100% { background: black; }
    }
  }
  </code></pre>
  
  <p>Another attempt (does not work):</p>
  
  <pre><code>@keyframes animateIn {
    0% { background: black; }
    100% { background: orange; }
  }
  
  @keyframes animateOut {
    0% { background: orange; }
    100% { background: black; }
  }
  
  :global {
    .active {
      background: orange;
  
      :local {
        animation-name: animateIn;
      }
      animation-duration: 1s;
    }
  
    .inactive {
      background: black;
  
      :local {
        animation-name: animateOut;
      }
      animation-duration: 1s;
    }
  }
  </code></pre>
  
  <p>How to use keyframes in CSS modules global scope? Is it possible to use local scope keyframes in a global scope class?</p>