Bubble @screen at-rules when adding styles through plugins

[benface]

I noticed that the following code in a plugin:

addComponents({
  '.test': {
    display: 'block',
    '@screen sm': {
      display: 'none',
    },
  },
});

generates the following CSS:

.test {
  display: block;
  @media (min-width: 640px) {
    display: none;
  }
}

which isn't valid. It should be:

.test {
  display: block;
}

@media (min-width: 640px) {
  .test {
    display: none;
  }
}

This change fixes that, thanks to postcss-nested's bubble option. By default, postcss-nested bubbles @media at-rules, so I think it should do it for @screen as well.

[adamwathan]

Thanks!