scopeBehaviour: 'global' not remove :global() decl on rule

[futurist]

When using scopeBehaviour: 'global' for below css rule:

body:global(.noselect){ user-select:none }

The :global part is not removed, which result in invalid css selector.

[madyankin]

You have to place a space before :global, like this: body :global(.noselect) { user-select:none }. Otherwise it will be processed as pseudo-class.

[futurist]

tried place a space before :global, result is same. And it's really worked when no space, if I use behaviour local

[madyankin]

Oh, I've got it. I think, it's not a good idea to use :global when it's the default behaviour. Just write body .noselect { user-select:none }.

[futurist]

It's a lib that may export to other one to test with no local names. And at the same time may included in a JS component with local names, which want keep .noselect as global.

Is it possible to keep a single copy of the source CSS? Just by switch scopeBehaviour?

[StarpTech]

I can reproduce it.

:global .page {
  padding: 20px;
}

produces this in scopeBehaviour: local scope

.page {
  padding: 20px;
}

but this in scopeBehaviour: global scope.

:global .page {
  padding: 20px;
}

[DimmDell]

Having the same issue: i have a plugin that adds :global(*someclass*) to some selectors in my postcss and these ":global"-s need to be removed later, but they don't, so styles break. Tried different combinations of parameters for modules, scopeBehaviour and autoModules, but nothing helped.

[mattxyzeth]

I was dealing with a similar issue. I noticed that the :global() was removed when used within a local class but not when used within an element selector like a or body. I removed the :global() wrapping from the class within those tags, and it compiled correctly. So it seems that if the parent is not transformed, there's no need to wrap a child in :global() if the desired result should be global.