Media query rules spread out of class scope

[whirmill]

From v1.2.0 if i define a class that describes the common components styles and a modifier class with a media query within it that describes a particular behavior for a subset of that components, once bound together to a component the media query is spread even to the components that references the base class only

[xymostech]

@whirmill I think I vaguely understand what you're saying, but could you provide some code to make it clearer what's going on?

[whirmill]

I'ts a bit tricky to explain but I'll try to make it clearer:

const breakpoints = {
  extraSmall: '30em', // 480px
  smaller: '40em', // 640px
  small: '48em', // 768px
  medium: '60em', // 960px
  large: '80em', // 1280px
  extraLarge: '100em' // 1600px
}

const breakTo = (breakpoint) => `@media screen and (min-width: ${breakpoints[breakpoint]})`
const unit = (str) => str.replace(/([\.\d]+)(.*)/, '$2')
const number = (str) => Number(str.replace(/([\.\d]+)(.*)/, '$1'))

export default ({ spacings }) => {

  const inputWidth = {
    default: `${number(spacings.default) * 42}${unit(spacings.default)}`,
    x2: `${number(spacings.default) * 42 * 2}${unit(spacings.default)}`,
  }

  const styles = {

    component: {
      position: 'relative',
      display: 'inline-block',
      width: '100%',
      padding: `${spacings.x2} ${spacings.default} ${spacings.default}`,
      margin: `${spacings.x2} ${spacings.x2} ${spacings.x2} 0`,

      ':nth-child(odd)': {
        marginLeft: '0'
      },

      ':nth-child(even)': {
        marginRight: '0'
      },

      [breakTo('small')]: {
        width: inputWidth.default,
        margin: `${spacings.x4} ${spacings.x2} ${spacings.x4} 0`,

        ':nth-child(even) + :last-child': {
          width: '100%',
          maxWidth: `${number(inputWidth.x2) + number(spacings.x2)}${unit(inputWidth.default)}`,
          marginRight: '0',
        },

        ':only-child': {
          width: '100%',
          maxWidth: `${number(inputWidth.x2) + number(spacings.x2)}${unit(inputWidth.default)}`,
          marginRight: '0',
        }
      }
    },

    'component--third': {
      maxWidth: `${number(inputWidth.x2) + number(spacings.x2)}${unit(inputWidth.default)}`,
      width: '100%',
      marginRight: '0',

      [breakTo('small')]: {
        width: `${(number(inputWidth.x2) + number(spacings.x2))/ 3}${unit(inputWidth.default)}`,
        marginRight: '0',
      }
    }
  }

  return styles
}

in this example I've defined an element's wrapper that in it's default state should occupy half of it's container's width

Assuming that we've got a collection of these items, if the number of these items is odd then the last item should occupy all the container's width.

Also if an item references the 'component--third' ruleset it should occupy one third of it's container's width.

Once one of these items references that particular modifier class, if another collection of that kind of items is rendered, each item inherits the 'component--third' ruleset even if none of them is bound to it.

if a full page reload is performed, the collection is rendered as desired.

I don't know if this issue is related to the media query selector or not but it was the first thing that i've noticed.

[lencioni]

@whirmill is this still an issue for you with v1.2.1?

[whirmill]

It seems that in 1.2.1 it doesn't happen anymore