Plugin style merge issues: Rules appear to be getting overwritten by 2nd class not merged into rules from 1st class

Demo of a problem I am seeing.

I created a plugin for sidebar styling it is incomplete but I was seeing something that surprised me. I am not certain this is a bug, but it’s not doing what I expected, though possibly my expectations may be faulty.

Styles from two classes appear to be getting over written for a given style rule path “> *” rather than merged, so the 2nd classes styles for that path are replace the rules from the first class styles.

https://codesandbox.io/s/cra-tailwind-emotion-starter-demo-possible-style-not-merging-bug-twinmacro-tf4vk

I found if i use the rule .with-sidebar__rightAlternate the styles merge but its kind of cheating by adding > *:first-child so it doesn’t match the rule > * used in .with-sidebar.

The plugin creating the styles.

function sidebarPlugin({ addUtilities }) {
  addUtilities({
    [`.with-sidebar > *`]: {
      display: 'flex',
      flexWrap: 'wrap'
    }
  })
  addUtilities({
    [`.with-sidebar__right > *`]: {
      flexDirection: 'row-reverse'
    }
  })
  addUtilities({
    [`.with-sidebar > * > *`]: {
      flexGrow: 1
    }
  })
  // last-child is always not-sidebar
  addUtilities({
    [`.with-sidebar > * > *:last-child`]: {
      flexBasis: 0,
      flexGrow: 999,
      minWidth: `calc(50%)`
    }

  addUtilities({
    [`.with-sidebar__rightAlternate > *:first-child`]: {
      flexDirection: 'row-reverse'
    }
  })
  })
}

Styles rules from different classes not merging.

twwith-sidebar with-sidebar__right styles This shows style “> *” has lost the flex and wrap settings from with-sidebar. Which ever class name is last overwrites the first, it does not merge.

{
  "> *": {
    "flex-direction": "row-reverse"
  },
  "> * > *": {
    "flex-grow": "1"
  },
  "> * > *:last-child": {
    "flex-basis": "0",
    "flex-grow": "999",
    "min-width": "calc(50%)"
  }
}

twwith-sidebar__right with-sidebar styles This shows style “> *” has lost the styles from with-sidebar__right. Which ever class name is last overwrites the first, it does not merge.

{
  "> *": {
    "display": "flex",
    "flex-wrap": "wrap"
  },
  "> * > *": {
    "flex-grow": "1"
  },
  "> * > *:last-child": {
    "flex-basis": "0",
    "flex-grow": "999",
    "min-width": "calc(50%)"
  }
}

twwith-sidebar styles

{
  "> *": {
    "display": "flex",
    "flex-wrap": "wrap"
  },
  "> * > *": {
    "flex-grow": "1"
  },
  "> * > *:last-child": {
    "flex-basis": "0",
    "flex-grow": "999",
    "min-width": "calc(50%)"
  }
}

twwith-sidebar__right styles

{
  "> *": {
    "flex-direction": "row-reverse"
  }
}

[rluiten]

Awesome work thank you.

[ben-rogerson]

This should be fixed in v1.0.0 🎉