Web: CSS child-selector rule from withUnistyles component leaks into plain View sharing the same style #1198

Description

On web, when two StyleSheet.create entries both contain flex: 1, they appear to share the same hash. The .HASH > * { flex: 1 } rule injected for a withUnistyles wrapper ends up applying to direct children of an unrelated plain View that uses a different stylesheet entry also containing flex: 1.

The result: a height: 40 separator inside that View expands to fill all available space instead of staying 40 px tall.

Minimal reproduction

https://github.com/thomascoumau/unistyle-css-rule-repro

yarn install && yarn web

The left panel shows the broken separator; the right panel shows the workaround.

What is observed

Given:

// index.tsx
const styles = StyleSheet.create({
  flex1: { flex: 1 },
  // ...
});

// BugPanel.tsx
const styles = StyleSheet.create({
  flex: { flex: 1 },
  separatorBug: { height: 1, backgroundColor: "red" },
  // ...
});

And this tree:

const WrappedView = withUnistyles(View);

// index.tsx — injects .HASH > * { flex: 1 }
<WrappedView style={styles.flex1}>
  <BugPanel />
</WrappedView>

// BugPanel.tsx — plain View with a different stylesheet entry, also flex: 1
<View style={styles.flex}>
  <View style={styles.box} />
  <View style={styles.separatorBug} />   {/* height: 1, should be a thin line */}
  <View style={styles.box} />
</View>

The separator expands to fill the remaining space. Inspecting the DOM shows the .HASH > * { flex: 1 } rule applying to the children of <View style={styles.flex}>.

Workaround

Replacing the plain <View style={styles.flex}> with <WrappedView style={styles.flex}> in BugPanel fixes the issue — the separator stays 40 px.

A better workaround is to use a _classname inside the stylesheet used by the withUnistyle component to prevent the hash to be shared

Environment