Issue with :global() css-module selectors not being pure in NextJS

Question

So I'm migrating an app from CRA to NextJS and I have encountered an error for the .module.scss files of some components and pages:

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

I get this error for all the :global and :local css-module selectors. Based on what I have searched I can fix this issue by wrapping the selector in a class and editing the jsx aswell. but wouldn't that defeat it's purpose? And how is this working on the CRA version of the app and not on NextJS?

EDIT: One solution I have for this is moving :global() selectors to the global css files that are imported in _app.js but my question is that is there any way that we can have so these styles would be usable like they are right now ( :global(...) )?

Thanks. I guess I have to move these to the global scss files then. — Shyn
– Shyn, Commented Jul 26, 2021 at 14:20

brc-dd · Accepted Answer · 2021-07-31 12:42:05Z

No there isn't any solution as of yet other than overriding the webpack config itself. It was working in CRA because they probably have mode: local, while Next.js has pure.

I haven't tried overriding css-loader webpack config, so I am simply suggesting a workaround. Since, you are using SCSS, you can wrap your pseudo-global ^[1] styles like this:

.root :global {
  .foo {
    color: red;
  }
}

Now wrap your component/page in a div and set the class as styles.root on that element. Then, on all the child elements you can directly set className="foo".

import styles from "../styles/index.module.scss";

const IndexPage = () => (
  <div className={styles.root}>
    <div className="foo">This text should be red!</div>
  </div>
);

export default IndexPage;

Note that, you need to consider issues regarding specificity after this method, also this doesn't directly work with animations, you need to separate the keyframes and then make them global.

Demo Sandbox

[1]: This method doesn't make the styles truly global as the styles are still scoped. The class foo will work only when some parent has styles.root as class. This is preferrable only if you didn't intend to use your :global(.selector) from other components, and were using them just because you wanted to manipulate the class names using JS without the styles object.

If you want these to be truly global, add styles.root to document.documentElement in an useEffect hook like this:

import { useEffect } from "react";
import styles from "../styles/index.module.scss";

const IndexPage = () => {
  useEffect(() => {
    document.documentElement.classList.add(styles.root);
    return () => {
      document.documentElement.classList.remove(styles.root);
    };
  }, []);

  return (
    <div className="foo">
      This text should be red, even if you put it in another component until the
      page is same. If you want it across pages inject it in _app or _document.
    </div>
  );
};

export default IndexPage;

Demo Sandbox

PS: Injecting class to html in _app or _document is not exactly same as using a global stylesheet, as it may happen that you have multi-page application, then only the CSS of the components on a particular page will be requested because of automatic CSS code-splitting done by Next.js. If that's not the case and all your pages share same CSS, then there is no need to complicate things, just go with the conventional method of importing styles in _app.

Really appreciate the answer. I have discussed the different approaches you wrote with my colleagues.

Nick Vu · Accepted Answer · 2022-06-07 04:22:52Z

3

I had the same problem, the right writing is

.root:global {
   color:red
}

edited Jun 7, 2022 at 4:22

Nick Vu

15.6k5 gold badges29 silver badges37 bronze badges

answered Jun 6, 2022 at 19:58

user17375696

312 bronze badges

Comments

Jan · Accepted Answer · 2022-11-07 13:11:50Z

0

Another approach is to make a container, wrap it, and carry it out like follows:

import style from '../styles/style.module.css'
<div className={styles.container}>
    <p>Hello World</p>
</div>

.container p {
  font-size: 20px;
}

And yes, you only need to include your tags and conditions in the CSS file if you have a lot of them.

answered Nov 7, 2022 at 13:11

Jan

4525 silver badges9 bronze badges

Comments

Mahmoud Abd Al-Aziz · Accepted Answer · 2024-02-29 16:28:39Z

0

If you are looking for a solution to do global styles for CSS-Modules with Nextjs v14+ (Works in App-router & TurboPack) too.

add the class in the CSS file like this

:global(.my__global__class) {
  color: violet;
}

In the JSX use classname="" the normal classname not the CSS-Module one

// Wrong ❌ - Not-working

className={styles["my__global__class"]}

// Right ✅ Working

className="my__global__class"

answered Feb 29, 2024 at 16:28

Mahmoud Abd Al-Aziz

1091 silver badge5 bronze badges

Comments

link south · Accepted Answer · 2024-11-13 03:27:00Z

0

I created a plugin to solve this problem

next-disable-global-css

 const rules = config.module.rules
  .find((rule) => typeof rule.oneOf === 'object')
  ?.oneOf.filter((rule) => Array.isArray(rule.use));

  if (rules) {
    rules.forEach((rule) => {
      rule.use.forEach((moduleLoader) => {
        if (
          moduleLoader.loader?.includes('css-loader') &&
          !moduleLoader.loader.includes('postcss-loader') &&
          typeof moduleLoader.options.modules === 'object'
        ) {
          moduleLoader.options = {
            ...moduleLoader.options,
            modules: {
              ...moduleLoader.options.modules,
              mode: 'local', // Keep CSS Modules functionality
              auto: true, // Automatically detect whether to use CSS Modules
              exportGlobals: true, // Allow exporting global styles
            },
          };
        }
      });
    });
  }

  return config;

This plugin solves this problem by overwriting the webpack configuration of next.js and making the css-loader configuration mode 'local' instead of 'prue'

edited Nov 13, 2024 at 3:27

answered Oct 24, 2024 at 1:16

link south

12 bronze badges

2 Comments

Grey Over a year ago

heya! neat package, but this is a site where we answer with a solution that is not just a link to "this thing I made", could you provide an explanation of what @Shyn can do to resolve this himself, we're here to learn after all.

link south Over a year ago

This plugin solves this problem by overwriting the webpack configuration of next.js and making the css-loader configuration mode 'local' instead of 'prue'

Collectives™ on Stack Overflow

Issue with :global() css-module selectors not being pure in NextJS

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related