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

user_12317362 0
Viewed 24716

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.

css-modules next.js reactjs sass
4 Answers

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

user_126079320

example image

THIS ANSWER IS FOR NEXT.JS. If you are going to change body's or html's etc... css. You should change it on globals.css not Home.modules.css or somewhere else.

user_118244170
user_60115830

You can create another display.css.

user_194896950
Related