Fix: Multiple selectors and RTL flipping

[spmonahan]

Fixes #105

Current Behavior

When writing styles with multiple selectors and rules that will be flipped for RTL only the first selector is properly scoped to the generated class name.

import { makeStyles } from '@griffel/core';

export default makeStyles({
  root: {
    ':active,:focus-within': {
      paddingLeft: '10px'
    }
  },
});

Generates

.f14f5aie:active,
.f14f5aie:focus-within {
  padding-left: 10px;
}

.f1sheuf0:active,
// 💣💥`:focus-with` rule applies globally! 😱
:focus-within {
  padding-right: 10px;
}

New Behavior

import { makeStyles } from '@griffel/core';

export default makeStyles({
  root: {
    ':active,:focus-within': {
      paddingLeft: '10px'
    }
  },
});

Generates

.f14f5aie:active,
.f14f5aie:focus-within {
  padding-left: 10px;
}

.f1sheuf0:active,
// `:focus-within` is properly scoped 👍👍
.f1sheuf0:focus-within {
  padding-right: 10px;
}

[github-actions]

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
core makeStyles + mergeClasses (runtime)	20.267 kB 7.549 kB	20.269 kB 7.549 kB	2 B
react makeStyles + mergeClasses (runtime)	21.292 kB 7.982 kB	21.294 kB 7.98 kB	2 B -2 B

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
core makeStyles + mergeClasses (build time)	1.8 kB 861 B
react makeStaticStyles (runtime)	8.247 kB 3.595 kB
react makeStyles + mergeClasses (build time)	2.811 kB 1.275 kB

_{🤖 This report was generated against 3466692fd49ed689121bbd5638bb7072dcaa117a}

[layershifter]

Was fixed in @griffel/react@1.0.4.