Handle placeholder strings

[andrewb]

This PR wraps placeholder strings in CSS comments before processing. After the CSS has been processed the placeholders are unwrapped. This is similar to the approach in styled-jsx-plugin-sass.

This allows the following to be processed:

    <style jsx>{`
      div {
        color: red;
        ${style}
      }
    `}</style>

Without this change the above code throws CssSyntaxError: <css input>:3:3: Unknown word.

[giuseppeg]

I made a mistake and never meant to use expression here. It should be %%styled-jsx-placeholder-(\d+)%%
Can you revert to the original version and just replace expression- with placeholder-?

[andrewb]

Thanks @giuseppeg. Updated as requested.

[ryanfitzer]

I think this needs to be revisited. Currently, PostCSS removes all comments from the processed css:

PostCSS cleans values from comments by design.

So, since that comment is over a year before this PR, I'm a bit confused about the goal for this PR. I can understand why it fixed the CssSyntaxError issue, but it makes it so template literals are no longer able to be used ("dynamic css") as the value of a css property.