Logo with initials

How to work with external classes in CSS Modules

CSS modules are scoped to their own files. This has limitations in 2 cases:

  1. A plugin or a markdown processor adds an external class to one of your HTML elements, and you want to target it within a CSS module.
  2. You want to modify a rule when an external prefix has been added (with a dark mode, for example).

Here’s what you have to do:

External class

CSS Modules gives you the :global prefix to allow you to target selectors that were created outside the module.

.nav {
  :global {
    a.active {
      font-weight: 450;
    }
  }
}

In the example above, the active class was added elsewhere and will remain as active, whereas my nav selector will be turned into a scoped, unique name like nav__2yrn8.

Internal prefix

You can also face the opposite problem. You want to modify the rules created in your CSS module when a prefix is present.

This is commonplace when implementing a “dark mode”, and a dark prefix/class is added to the HTML document.

In this case, you’ll also use the global selector, but a bit differently.

:global(.dark) .nav {
  border: 1px solid rgba(255, 255, 255, 0.7);
}

In the example above, you modify the rules defined within your module when they are preceded by an external dark class.