no-undef-class with :global

[eddiemoore]

If you have a global class that you only want something applied when it is a child of another class.

/* fails */
.holder :global .Select {}

If .holder doesn't have a class of it's own, it says that .holder is unused. To get it to pass we need to change .holder to have css applied otherwise it has an error of no-undef-class with .holder

/* passes */
.holder { display: block; }
.holder :global .Select {}

[atfzl]

It is happening because i am removing all the selectors with pseudoclass :global.

To get around this problem just use it like this:

.holder {
  :global .Select {}
}

[mnowotnik]

Your fix cannot solve the following case:

:global(.Select) {
  .holder {}
}

However, there is workaround:

.holder {}
:global(.Select) {
  .holder {}
}

[jch254]

Is there any updates on this? The only workaround that worked for my use case was to define empty classes for all of the classes that have a :global selector as a child. The nested suggestion does not work with vanilla CSS.