What does :global (colon global) do?

Question

In some SCSS files, I see the following:

:global {   /* ... */ } 

I don't know if it is an SCSS feature or a CSS feature. I tried searching about it but couldn't find any good results at first sight.

Answer 1

This operator is used in CSS Modules. Modular CSS uses a CSS Modules compiler to scope CSS styles within their respective modules (e.g., React component).

Here's an example from a React module (in the file ErrorMessaging.less for the ErrorMessaging.jsx React component):

:global(.ocssContainer) {   .ui_column {     padding-left: 0;   } } 

This gets compiled into:

  .ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ErrorMessaging__ui_column--3uMUS {     padding-left: 0;   } 

But now I add a :global modifier onto .ui_column:

:global(.ocssContainer) {   :global(.ui_column) {     padding-left: 0;   } } 

And this is what it compiles to:

  .ErrorMessaging__alertContainer--1I-Cz .ocssContainer .ui_column {     padding-left: 0;   } 

Now .ui_column can apply to any child element with that style, including in a child React component, and not just .ui_column elements that are part of the ErrorMessaging React component.