Repository: styled-components/babel-plugin-styled-components (js)

Issue:
`css` prop produces broken CSS when used with a plain string literal
Hello! :wave:

I noticed that with `babel-plugin-styled-components@1.9.3`, using strings with the `css` prop produces invalid CSS:

![image](https://user-images.githubusercontent.com/4206232/49782593-b761ca00-fccb-11e8-9ff2-f67df1cfb5e8.png)

This invalid CSS appears to be the same as the invalid CSS produced by the bug in issue #186.

Here is the JSX that causes the issue:

```jsx
      <div className="layout-container">
        <main>{children}</main>
        <footer css="color: #999">&copy; slice 2018</footer>
      </div>
```

On the other hand, when using template strings:

```jsx
      <div className="layout-container">
        <main>{children}</main>
        <footer
          css={`
            color: #999;
          `}
        >
          &copy; slice 2018
        </footer>
      </div>
```

or objects:

```jsx
      <div className="layout-container">
        <main>{children}</main>
        <footer css={{ color: '#999' }}>&copy; slice 2018</footer>
      </div>
```

It works fine! Plain strings don't work, though. It might have something to do with the curly braces -- they're omitted when using plain string literals, which *might* have something to do with the bug. 😄 Just a guess, though!

Pull request:
Fix css prop string support
Closes #194, just needed to replicate the fix from #192 for this instance too

Patch:
diff --git a/src/visitors/transpileCssProp.js b/src/visitors/transpileCssProp.js
index c41891b..8cc96ea 100644
--- a/src/visitors/transpileCssProp.js
+++ b/src/visitors/transpileCssProp.js
@@ -46,7 +46,12 @@ export default t => (path, state) => {
 
   if (t.isStringLiteral(path.node.value)) {
     css = t.templateLiteral(
-      [t.templateElement({ raw: path.node.value.value }, true)],
+      [
+        t.templateElement(
+          { raw: path.node.value.value, cooked: path.node.value.value },
+          true
+        ),
+      ],
       []
     )
   } else if (t.isJSXExpressionContainer(path.node.value)) {


Test patch:
diff --git a/test/__snapshots__/index.test.js.snap b/test/__snapshots__/index.test.js.snap
index 5b535f9..170cfb8 100644
--- a/test/__snapshots__/index.test.js.snap
+++ b/test/__snapshots__/index.test.js.snap
@@ -369,7 +369,7 @@ exports[`fixtures should transpile css prop 1`] = `
 "\\"use strict\\";
 
 function _templateObject17() {
-  var data = _taggedTemplateLiteral([void 0], [\\"flex: 1\\"]);
+  var data = _taggedTemplateLiteral([\\"flex: 1\\"]);
 
   _templateObject17 = function _templateObject17() {
     return data;
@@ -379,7 +379,7 @@ function _templateObject17() {
 }
 
 function _templateObject16() {
-  var data = _taggedTemplateLiteral([void 0], [\\"flex: 1\\"]);
+  var data = _taggedTemplateLiteral([\\"flex: 1\\"]);
 
   _templateObject16 = function _templateObject16() {
     return data;
@@ -449,7 +449,7 @@ function _templateObject10() {
 }
 
 function _templateObject9() {
-  var data = _taggedTemplateLiteral([void 0], [\\"flex: 1\\"]);
+  var data = _taggedTemplateLiteral([\\"flex: 1\\"]);
 
   _templateObject9 = function _templateObject9() {
     return data;
@@ -469,7 +469,7 @@ function _templateObject8() {
 }
 
 function _templateObject7() {
-  var data = _taggedTemplateLiteral([void 0], [\\"flex: 1;\\"]);
+  var data = _taggedTemplateLiteral([\\"flex: 1;\\"]);
 
   _templateObject7 = function _templateObject7() {
     return data;
@@ -499,7 +499,7 @@ function _templateObject5() {
 }
 
 function _templateObject4() {
-  var data = _taggedTemplateLiteral([void 0], [\\"flex: 1;\\"]);
+  var data = _taggedTemplateLiteral([\\"flex: 1;\\"]);
 
   _templateObject4 = function _templateObject4() {
     return data;