Bugfix/media-query and selectors placeholders

[Tomekmularczyk]

It's my first public PR ever on GitHub, so if done something against common rules, made too many commits or brute forced the solution, I would like to know and I will try to fix it.

I tested the library on my local project with a component like:

const constants = Object.freeze({
  bsSM: 'screen and (min-width: 768px)',
  h6: 'h6',
});

export default (
  <span>
    <h6>sdfdsds</h6>
    <style jsx global>{`
      body {
        margin: 0;
        padding: 0;
        font-family: sans-serif;

        @media ${constants.bsSM} {
          background-color: red;
        }

        ${constants.h6} {
          font-size: 5rem;
        }
      }
    `}</style>
  </span>
);

and it seems to work fine.

[Tomekmularczyk]

I have added a test and fixed #7

[giuseppeg]

Looks fine, thanks for contributing man.
Did you test these changes in a real application with styled-jsx?

Nit pick can you remove the semicolons to keep it consistent with the other plugins?

[giuseppeg]

can you add a test for

@media (min-width: %%styled-jsx-placeholder-0%%) {}

and

@media (%%styled-jsx-placeholder-0%%) {}

[Tomekmularczyk]

@giuseppeg yes, I tried it in a real application with styled-jsx.

I have removed semicolons.

I also updated test for media queries. Unfortunately something like this:

@media (%%styled-jsx-placeholder-0%%)

is causing:

Error: media feature required in media query expression

to fix that it would probably (maybe not) require another matcher. As far I know regex is computationally heavy so this case is not worth it in my opinion. Though I can try to fix it if you want.

[giuseppeg]

@Tomekmularczyk no worries, this is perfect for now. Awesome job <3 thank you so much.
I am thinking of a way to make this process less painful for styled-jsx plugins in general so that plugins authors don't have to deal with this stuff. For now what we've got is ok though.