title: Selector ":global .class" is not pure (pure selectors must contain at least one local class or id)
body: <p>I am using css modules with Sass in next.js and I got this error</p>
  <pre><code>:global {
      .slick-track {
          display: flex; // Syntax error: Selector &quot;:global .slick-track&quot; is not pure (pure selectors must contain at least one local class or id)
      }
  }
  </code></pre>
  <p>This is as identical as the official css-modules doc <a href="https://github.com/css-modules/css-modules#user-content-usage-with-preprocessors" rel="noreferrer">example</a> but with Sass instead of Less but in Sass syntax this should be working.</p>
  <p>I saw <a href="https://stackoverflow.com/questions/62467903/targeting-pure-elements-in-next-js-with-css-modules">this</a> question but it was using a tag whereas I am using a class so it should be pure.</p>
  <p>When I add <code>()</code> to :global it won't pop error but the style is not applying (You cannot find this style in browser console)</p>
  <pre><code>:global() {
      .slick-track {
          display: flex; // No error, but style not working
      }
  }
  </code></pre>
  <p>For this scss file it does not have any dependency (<code>@import @use</code> etc.) but I think it is not the case.</p>
  <p>I try adding a custom <code>postcss.config.js</code> according to <a href="https://github.com/vercel/next.js/issues/10475" rel="noreferrer">this</a> but not working either.</p>