core: create a chained selector with :global

The current global selector creates a style that is a parent selector

':global(.parent)': {
  color: 'red',
},

.parent .fztiaq5 {
  color: red;
}

The above will work with

<div class="parent">
  <div class=" .fztiaq5" />
</div>

How can one created a chained class selector with Griffel ?

.same-element.fztiaq5 {
  color: red;
}

<div class=".same-element .fztiaq5" />

[layershifter]

After spending some time and thinking about I came to following conclusion: there is no need in this feature as it’s already there.

For example, you can’t create .foo.f1lw17ff, but you can .f1lw17ff.foo (no difference from CSS perspective):

 makeStyles({
  root: {
    '&.foo': { color: 'red' }
  },
});

There is a problem with elements as we produce an invalid selector:

makeStyles({
  root: {
    '&body': { color: 'red' }
  },
})

.f115m9dlbody { /* 🤯 */
  color: red;
}

I created a separate issue for it (#222).

[ling1726]

👀