Selector ":global .class" is not pure (pure selectors must contain at least one local class or id)

Question

I am using css modules with Sass in next.js and I got this error

:global {
    .slick-track {
        display: flex; // Syntax error: Selector ":global .slick-track" is not pure (pure selectors must contain at least one local class or id)
    }
}

This is as identical as the official css-modules doc example but with Sass instead of Less but in Sass syntax this should be working.

I saw this question but it was using a tag whereas I am using a class so it should be pure.

When I add () to :global it won't pop error but the style is not applying (You cannot find this style in browser console)

:global() {
    .slick-track {
        display: flex; // No error, but style not working
    }
}

For this scss file it does not have any dependency (@import @use etc.) but I think it is not the case.

I try adding a custom postcss.config.js according to this but not working either.

Answer 1

You need to use global selector inside your local selector in CSS-modules.

For example, if you have HTML:

<div className={classes.someCSSMoludesClass}>
  <div className="some-global-class">
    content
  </div>
</div>

for rewriting global class "some-global-class" you need to make this inside your CSS-module:

.someCSSModulesClass {
  :global(.some-global-class) {
    %your properties%
  }
}

Don't forget to use selector inside :global.

I had the same problem, but in swiper slider, and resolved it like this. Maybe you have to write this class in the component that is above

Answer 2

I am using nextjs with default postcss configuration. For me this is how is worked.

.someCSSModulesClass :global .any-global-class {
  background-color: blue;
}

Reference: https://github.com/css-modules/css-modules#exceptions