Random object interpolations

[emmatown]

What:

Allow random object interpolations.

const styles = { backgroundColor: 'hotpink' }

const Div = styled.div`
  background-color: yellow;
  ${styles};
`

Why:

Using polished, etc...

How:

Change the way random interpolations work. Random interpolations have a key like this

`$${indexOfInterpolation}`

and the value is whatever was interpolated.

I changed replacePlaceholdersWithExpressions so things where the whole thing is a single interpolation the value is replaced with the expression so that objects aren't cast to strings.

Checklist:

• Documentation
• Tests
• Code complete

This also changes from postcss-safe-parser/lib/safe-parser to postcss/lib/parser. This basically means semicolons are required and errors with code frames are thrown if they're not there. (The code frames look pretty weird since there is one from postcss and another from babel)

We could support interpolating regular classes anywhere but IMO regular classes should be interpolated in composes because otherwise specificity won't make sense. e.g. the color of this class with be green.

const cls = css`
  color: green;
  ${'class-that-has-color-hotpink'};
`

I added back the error for composes on nested selectors since we can't do anything if a regular class is interpolated on a nested selector and people can use random interpolations where they would want composes on a nested selector.

[codecov-io]

Codecov Report

Merging #221 into master will increase coverage by 0.02%.
The diff coverage is 95.65%.

@@            Coverage Diff            @@
##           master    #221      +/-   ##
=========================================
+ Coverage   90.38%   90.4%   +0.02%     
=========================================
  Files          22      22              
  Lines         967     980      +13     
  Branches      260     266       +6     
=========================================
+ Hits          874     886      +12     
- Misses         75      76       +1     
  Partials       18      18

Impacted Files	Coverage Δ
test/extract/extract.test.emotion.css	100% <ø> (ø)	⬆️
src/babel.js	97.74% <100%> (-0.02%)	⬇️
src/parser.js	95% <100%> (+0.4%)	⬆️
src/ast-object.js	89.13% <100%> (+0.4%)	⬆️
src/index.js	94.11% <90.9%> (-0.31%)	⬇️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update ebff44b...00e75df. Read the comment docs.