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.