[Bug] Small typo in cardBodyStyle.jsx Line 39

[ericsolberg]

Version

1.7.0

Reproduction link

hupe1980/gatsby-plugin-material-ui#31

Steps to reproduce

Please note that you have a small typo on line 39 of cardbodystyle.jsx ... the 'h1, h2, h3' subselector is missing the '&'.

For some reason this didn't show up during development. I'm using Gatsby and it only showed up when I'm using the gatsby-plugin-material-ui plugin, and then do a production build. It complained of an invalid word in CSS, and through process of elimination, I figured out the error was on this line of code...

  cardBodyColor: {
    borderRadius: '6px',
    '&': {
      'h1, h2, h3': { // <- Line 39 should be '& h1, h2, 3'
        '& small': {
          color: 'rgba(' + hexToRgb(whiteColor) + ', 0.8)'
        }
      }
    }
  }

What is expected?

The subselector should start with '&'

What is actually happening?

There's no '&'

---

Solution

Add an ampersand to line 39

cardBodyColor: {
    borderRadius: '6px',
    '&': {
      '& h1, h2, h3': { // <- fixed
        '& small': {
          color: 'rgba(' + hexToRgb(whiteColor) + ', 0.8)'
        }
      }
    }
  }

Additional comments

If this fix is incorrect, please let me know!

[einazare]

Hello there, @ericsolberg ,

Thank you for your interest in working with our product and for sharing with us this bug.
I believe in one of the material-ui updates, they've made some changes on the way jss is compiled to css, since that line worked some versions back.
Anyway, your fix works beautifully. Once again thank you.

Best,
Manu