30

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.

legenddaniel
  • 698
  • 2
  • 9
  • 17
  • have you tried passing the class name in as a param? `:global(.slick-track) { display: flex; }` – Jadam Feb 01 '21 at 22:23
  • @Jadam Yes it works but in this case the hierarchical class from Sass has no meaning. You have to write the same `:global(.class)` for every item. – legenddaniel Feb 04 '21 at 17:26

5 Answers5

16

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

Dharman
  • 30,962
  • 25
  • 85
  • 135
malininss
  • 190
  • 1
  • 4
  • 2
    Out of curiosity, is this documented anywhere? Couldn't find anything on this. – juliomalves Feb 02 '21 at 18:10
  • Yes this one works. But seems the css module [example](https://github.com/css-modules/css-modules#user-content-usage-with-preprocessors) is globally scoped – legenddaniel Feb 04 '21 at 20:57
  • However, this `:global(.title)` is [documented](https://github.com/ruanyf/css-modules-demos#demo02-global-scope), so why does it not work? – Qwerty Sep 18 '22 at 02:59
16

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.

burakarslan
  • 245
  • 2
  • 11
4

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

Muhammad Kamal
  • 1,169
  • 1
  • 8
  • 11
  • Yes this is what the above answer said as to put the `:global` as descendant of a local class – legenddaniel Jun 20 '21 at 04:42
  • I wanted to point out the difference in syntax. The bracketed :global(.any-global-class) did not worked for me, but :global .any-global-class worked. – Muhammad Kamal Oct 23 '21 at 16:12
0

You can create another display.css.

Aman Juman
  • 29
  • 2
  • 2
    As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 20 '22 at 12:41
0

Sorry, I am late to answer this question. To solve this issue you need to let scss know you are exporting these classes or variable names for use to another main module. an example structure:

src
- app
  -- page.module.scss
- scss
 -- _helper.scss

Now if you want _helper.scss to be used inside page.module.scss you need to add :export as an upper class to let it know this is normal styling to any tag/element.

something like this:

:export {

  :global() {
    .slick-track {
      display: flex;
    }
  }
}
Yogeswar
  • 19
  • 3