Repository: tkh44/emotion
Pull request #224 (2017-08-02 17:31:03)

Handle case where css float property is converted to `cssFloat` by autoprefixer camelCase function

codecov-io: # [Codecov](https://codecov.io/gh/tkh44/emotion/pull/224?src=pr&el=h1) Report
> :exclamation: No coverage uploaded for pull request base (`master@57af90c`). [Click here to learn what that means](https://docs.codecov.io/docs/error-reference#section-missing-base-commit).
> The diff coverage is `100%`.

[![Impacted file tree graph](https://codecov.io/gh/tkh44/emotion/pull/224/graphs/tree.svg?token=B1bWuYNE2t&height=150&width=650&src=pr)](https://codecov.io/gh/tkh44/emotion/pull/224?src=pr&el=tree)

```diff
@@            Coverage Diff            @@
##             master     #224   +/-   ##
=========================================
  Coverage          ?   90.41%           
=========================================
  Files             ?       22           
  Lines             ?      981           
  Branches          ?      267           
=========================================
  Hits              ?      887           
  Misses            ?       76           
  Partials          ?       18
```


| [Impacted Files](https://codecov.io/gh/tkh44/emotion/pull/224?src=pr&el=tree) | Coverage Δ | |
|---|---|---|
| [src/ast-object.js](https://codecov.io/gh/tkh44/emotion/pull/224?src=pr&el=tree#diff-c3JjL2FzdC1vYmplY3QuanM=) | `89.2% <100%> (ø)` | |

------

[Continue to review full report at Codecov](https://codecov.io/gh/tkh44/emotion/pull/224?src=pr&el=continue).
> **Legend** - [Click here to learn more](https://docs.codecov.io/docs/codecov-delta)
> `Δ = absolute <relative> (impact)`, `ø = not affected`, `? = missing data`
> Powered by [Codecov](https://codecov.io/gh/tkh44/emotion/pull/224?src=pr&el=footer). Last update [57af90c...23957f3](https://codecov.io/gh/tkh44/emotion/pull/224?src=pr&el=lastupdated). Read the [comment docs](https://docs.codecov.io/docs/pull-request-comments).


Patch:
diff --git a/src/ast-object.js b/src/ast-object.js
index 89e1ed11..33d3adf2 100644
--- a/src/ast-object.js
+++ b/src/ast-object.js
@@ -57,9 +57,8 @@ function prefixAst (args, t) {
         return properties.push(
           t.objectProperty(key, prefixedValue, property.computed)
         )
-
-        // literal value or array of literal values
       } else if (
+        // literal value or array of literal values
         isLiteral(property.value) ||
         (t.isArrayExpression(property.value) &&
           property.value.elements.every(isLiteral))
@@ -140,7 +139,7 @@ export default class ASTObject {
     return {
       computed: false,
       composes: key === 'composes',
-      ast: t.stringLiteral(key)
+      ast: t.stringLiteral(key === 'cssFloat' ? 'float' : key)
     }
   }
 


Test patch:
diff --git a/test/__snapshots__/css.test.js.snap b/test/__snapshots__/css.test.js.snap
index f8cbe132..077731ba 100644
--- a/test/__snapshots__/css.test.js.snap
+++ b/test/__snapshots__/css.test.js.snap
@@ -118,6 +118,16 @@ exports[`css css variables 1`] = `
 />
 `;
 
+exports[`css float property 1`] = `
+.glamor-0 {
+  float: left;
+}
+
+<div
+  className="glamor-0"
+/>
+`;
+
 exports[`css flushes correctly 1`] = `
 .glamor-0 {
   display: -webkit-box;
@@ -159,6 +169,7 @@ exports[`css handles more than 10 dynamic properties 1`] = `
 
 exports[`css handles objects 1`] = `
 .glamor-0 {
+  float: left;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
diff --git a/test/__snapshots__/react.test.js.snap b/test/__snapshots__/react.test.js.snap
index 2fd3ddcf..63b42115 100644
--- a/test/__snapshots__/react.test.js.snap
+++ b/test/__snapshots__/react.test.js.snap
@@ -411,7 +411,7 @@ exports[`styled nested 1`] = `
 
 exports[`styled no dynamic 1`] = `
 .glamor-1 {
-  font-size: 12px;
+  float: left;
 }
 
 <h1
diff --git a/test/babel/__snapshots__/css.test.js.snap b/test/babel/__snapshots__/css.test.js.snap
index 6b5a8824..979887fb 100644
--- a/test/babel/__snapshots__/css.test.js.snap
+++ b/test/babel/__snapshots__/css.test.js.snap
@@ -281,6 +281,15 @@ exports[`babel css inline css random expression 1`] = `
 });"
 `;
 
+exports[`babel css inline css with float property 1`] = `
+"
+/*#__PURE__*/css([], [], function createEmotionStyledRules() {
+  return [{
+    \\"float\\": \\"left\\"
+  }];
+});"
+`;
+
 exports[`babel css inline interpolation in selector 1`] = `
 "
 const cls2 = /*#__PURE__*/css([], [className], function createEmotionStyledRules(x0) {
@@ -323,6 +332,7 @@ exports[`babel css inline nested expanded properties 1`] = `
 exports[`babel css inline object with a bunch of stuff 1`] = `
 "
 const cls2 = css({
+  'float': 'left',
   'display': '-webkit-box; display: -ms-flexbox; display: flex',
   'WebkitBoxFlex': '1',
   'msFlex': '1',
diff --git a/test/babel/css.test.js b/test/babel/css.test.js
index 22223542..25a7f771 100644
--- a/test/babel/css.test.js
+++ b/test/babel/css.test.js
@@ -27,6 +27,17 @@ describe('babel css', () => {
       expect(code).toMatchSnapshot()
     })
 
+    test('css with float property', () => {
+      const basic = `
+        css\`
+          float: left;
+      \``
+      const {code} = babel.transform(basic, {
+        plugins: [[plugin]]
+      })
+      expect(code).toMatchSnapshot()
+    })
+
     test('css random expression', () => {
       const basic = `css\`
         font-size: 20px;
@@ -234,6 +245,7 @@ describe('babel css', () => {
     test('object with a bunch of stuff', () => {
       const basic = `
       const cls2 = css({
+        float: 'left',
         display: 'flex',
         flex: 1,
         alignItems: \`\${'center'}\`
diff --git a/test/css.test.js b/test/css.test.js
index 13750f23..2bbfe902 100644
--- a/test/css.test.js
+++ b/test/css.test.js
@@ -7,6 +7,15 @@ import { sheet, css, flush } from '../src/index'
 expect.addSnapshotSerializer(serializer(sheet))
 
 describe('css', () => {
+  test('float property', () => {
+    const cls1 = css`
+      float: left
+    `
+
+    const tree = renderer.create(<div className={cls1}/>).toJSON()
+    expect(tree).toMatchSnapshot()
+  })
+
   test('handles more than 10 dynamic properties', () => {
     const cls1 = css`
       text-decoration: ${'underline'};
@@ -63,6 +72,7 @@ describe('css', () => {
 
   test('handles objects', () => {
     const cls1 = css({
+      float: 'left',
       display: 'flex',
       color: `${'blue'}`,
       fontSize: `${'20px'}`,
diff --git a/test/react.test.js b/test/react.test.js
index c92048a5..d3e1078c 100644
--- a/test/react.test.js
+++ b/test/react.test.js
@@ -14,7 +14,7 @@ expect.addSnapshotSerializer(serializer(sheet))
 
 describe('styled', () => {
   test('no dynamic', () => {
-    const H1 = styled.h1`font-size: 12px;`
+    const H1 = styled.h1`float: left;`
 
     const tree = renderer.create(<H1>hello world</H1>).toJSON()