Reference global class names from within a css module

Question

Picture a more traditional web application that is slowly introducing a React component in one page that is complex enough to need it.

We're developing this new UI with Webpack, and we're using css modules for all the new css that the new UI needs. But we still need to reuse some css that's global and provided in the app via a traditional css stylesheet linked in the html.

Therefore we need in our css modules to occasionally write rules that refer to a css class in the global namespace, not a class that's locally scoped to it and therefore converted to a more gem-like long css class name when the app is run:

.container {
  // rules for container
}
.container.pull-right {
  // rules for when the container element also has the pull-right class
}

In the above example, container is meant to be a css class that the css module will contextualize to the particular component using this module.

But pull-right is a class that exist in a css file available in the page, but not processed by css modules or Webpack. Therefore we need a way (a syntax probably) to tell css modules "hey, leave pull-right as is in your output. Do not mess with it or try to BEM the s**t out of it".

I imagine something like this should exist, but I haven't been able to find it so far by googling around.

Answer 1

To refer to a globally declared class name inside :local scoped css modules you should use :global switch:

  .container {
    // rules for container
  }

  .container:global(.pull-right) {
    // rules for when the container element also has the pull-right class
  }

More detailed explanation in css-modules documentation.