Add glamor support

emotion-js · May 28, 2017 · 0f44f10 · 0f44f10
1 parent 2e84558
commit 0f44f10
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 189 deletions.
diff --git a/README.md b/README.md
@@ -44,3 +44,31 @@ const Name = ({ color, name }) => <h1 className={css`color: ${color};`}>{name}</
 
 **Similar to importing React when using jsx, `import css from 'glam'` must be at the top of your source files.**
 
+## `emotion/glamor`
+
+```bash
+npm install -S glamor
+```
+
+**.babelrc**
+```json
+{
+  "plugins": [
+    "emotion/glamor",
+  ]
+}
+```
+
+```jsx harmony
+const Name = ({ color, name }) => <h1 css={{ color: 'red' }}>{name}</h1>
+```
+
+is converted to
+
+```jsx harmony
+const Name = ({ color, name }) => <h1 {...css({color: 'red' })}>{name}</h1>
+```
+
+
+**Similar to importing React when using jsx, `import {css} from 'glamor'` must be at the top of your source files.**
+
diff --git a/src/glamor/__tests__/.babelrc b/src/glamor/__tests__/.babelrc
@@ -6,6 +6,5 @@
   ],
   "plugins": [
     ["../babel.js"],
-    ['glam/babel', { sync: true } ],
   ]
 }
diff --git a/src/glamor/__tests__/__snapshots__/index.js.snap b/src/glamor/__tests__/__snapshots__/index.js.snap
@@ -1,50 +1,89 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`emotion/glam babel StringLiteral css prop value 1`] = `"<div className={css\`color: brown;\`}></div>;"`;
+exports[`emotion/glamor babel basic 1`] = `"<div className=\\"a\\" {...css({ color: 'brown' })}></div>;"`;
 
-exports[`emotion/glam babel basic 1`] = `"<div className={\\"a\\" + \\" \\" + css\`color: brown;\`}></div>;"`;
+exports[`emotion/glamor babel className as expression 1`] = `"<div className={props.className} {...css({ color: 'brown' })}></div>;"`;
 
-exports[`emotion/glam babel className as expression 1`] = `"<div className={variable + \\" \\" + css\`color: brown;\`}></div>;"`;
+exports[`emotion/glamor babel className as expression string 1`] = `"<div className={\`test__class\`} {...css({ color: 'brown' })} this={\`hello\`}></div>;"`;
 
-exports[`emotion/glam babel className as expression string 1`] = `"<div className={\`test__class\` + \\" \\" + css\`color: brown;\`} this={\`hello\`}></div>;"`;
+exports[`emotion/glamor babel css empty 1`] = `"<div {...css({})}></div>;"`;
 
-exports[`emotion/glam babel css empty 1`] = `"<div className={css\`\`}></div>;"`;
+exports[`emotion/glamor babel emptyClassName 1`] = `"<div className=\\"\\" {...css({ color: 'brown' })}></div>;"`;
 
-exports[`emotion/glam babel emptyClassName 1`] = `"<div className={\\"\\" + \\" \\" + css\`color: brown;\`}></div>;"`;
+exports[`emotion/glamor babel no className 1`] = `"<div {...css({ color: 'brown' })}></div>;"`;
 
-exports[`emotion/glam babel no css attr 1`] = `"<div></div>;"`;
+exports[`emotion/glamor babel no css attr 1`] = `"<div></div>;"`;
 
-exports[`emotion/glam babel noClassName 1`] = `"<div className={css\`color: brown;\`}></div>;"`;
+exports[`emotion/glamor babel wrong value type 1`] = `"<div {...css(5)}></div>;"`;
+
+exports[`emotion/glamor real basic 1`] = `
+.css-1ezp9xe,
+[data-css-1ezp9xe] {
+  color: red;
+}
 
-exports[`emotion/glam real basic 1`] = `
 <p
-  className="css-jk0pkr"
+  data-css-1ezp9xe=""
 >
   hello world
 </p>
 `;
 
-exports[`emotion/glam real kitchen sink 1`] = `
+exports[`emotion/glamor real kitchen sink 1`] = `
+.css-icjsl7,
+[data-css-icjsl7] {
+  color: blue;
+}
+
+.css-gvvg5g,
+[data-css-gvvg5g] {
+  color: gray;
+}
+
+.css-16ywyew,
+[data-css-16ywyew] {
+  border: 1px solid blue;
+}
+
+.css-1cqgl9p,
+[data-css-1cqgl9p] {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+@media (min-width: 420px) {
+  .css-198yaui,
+  [data-css-198yaui] {
+    font-size: 48px;
+  }
+}
+
 <div
-  className="css__legacy-stuff css-1170hdn vars-k1238z frag-15qcrjv frag-mdk64u"
+  className="css__legacy-stuff"
+  data-css-icjsl7=""
 >
   <h1
-    className="css-wjhr0q vars-11t1jtz frag-1wh34bm vars-telb2o"
+    data-css-198yaui=""
   >
     BOOM
   </h1>
   <p
-    className="test_class1 css-14jcta0"
+    className="test_class1"
+    data-css-gvvg5g=""
   >
     Hello
   </p>
   <p
-    className="test_class1 test___class45 css-1gdxe9e"
+    className="test_class1 test___class45"
+    data-css-16ywyew=""
   >
     World
   </p>
   <p
-    className="css-1g8ltio vars-bs2yjn"
+    data-css-1cqgl9p=""
   >
     hello world
   </p>

diff --git a/src/glamor/__tests__/index.js b/src/glamor/__tests__/index.js
@@ -3,14 +3,18 @@
 import React from 'react'
 import renderer from 'react-test-renderer'
 import plugin from '../babel'
-import css, {fragment} from 'glam'
+import { matcher, serializer } from 'jest-glamor-react'
+import { css } from 'glamor'
+
+expect.addSnapshotSerializer(serializer)
+expect.extend(matcher)
 
 const babel = require('babel-core')
 
-describe('emotion/glam', () => {
+describe('emotion/glamor', () => {
   describe('babel', () => {
     test('basic', () => {
-      const basic = '(<div className="a" css={`color: brown;`}></div>)'
+      const basic = `(<div className="a" css={{ color: 'brown' }}></div>)`
       const {code} = babel.transform(basic, {plugins: [plugin]})
       expect(code).toMatchSnapshot()
     })
@@ -22,43 +26,38 @@ describe('emotion/glam', () => {
     })
 
     test('css empty', () => {
-      const basic = '(<div css=""></div>)'
+      const basic = '(<div css={{}}></div>)'
       const {code} = babel.transform(basic, {plugins: [plugin]})
       expect(code).toMatchSnapshot()
     })
 
     test('wrong value type', () => {
       const basic = '(<div css={5}></div>)'
-      expect(() => babel.transform(basic, {plugins: [plugin]})).toThrow()
-    })
-
-    test('StringLiteral css prop value', () => {
-      const basic = `<div css="color: brown;"></div>`
       const {code} = babel.transform(basic, {plugins: [plugin]})
       expect(code).toMatchSnapshot()
     })
 
-    test('noClassName', () => {
-      const basic = '(<div css={`color: brown;`}></div>)'
+    test('no className', () => {
+      const basic = `(<div css={{ color: 'brown' }}></div>)`
       const {code} = babel.transform(basic, {plugins: [plugin]})
       expect(code).toMatchSnapshot()
     })
 
     test('emptyClassName', () => {
-      const basic = '(<div className="" css={`color: brown;`}></div>)'
+      const basic = `(<div className="" css={{ color: 'brown' }}></div>)`
       const {code} = babel.transform(basic, {plugins: [plugin]})
       expect(code).toMatchSnapshot()
     })
 
     test('className as expression', () => {
-      const basic = '(<div className={variable} css={`color: brown;`}></div>)'
+      const basic = `(<div className={props.className} css={{ color: 'brown' }}></div>)`
       const {code} = babel.transform(basic, {plugins: [plugin]})
       expect(code).toMatchSnapshot()
     })
 
     test('className as expression string', () => {
       const basic =
-        '(<div className={`test__class\`} css={`color: brown;`} this={`hello\`}></div>)'
+        "(<div className={`test__class\`} css={{ color: 'brown'}} this={`hello\`}></div>)"
       const {code} = babel.transform(basic, {plugins: [plugin]})
       expect(code).toMatchSnapshot()
     })
@@ -68,90 +67,38 @@ describe('emotion/glam', () => {
     test('basic', () => {
       const tree = renderer
         .create(
-          <p css={`color: red;`}>
+          <p css={{color: 'red'}}>
             hello world
           </p>
         )
         .toJSON()
 
-      expect(tree).toMatchSnapshot()
+      expect(tree).toMatchSnapshotWithGlamor()
     })
 
-    // test('string expression', () => {
-    //   const tree = renderer
-    //     .create(
-    //       <p css={'color: red;'}>
-    //         hello world
-    //       </p>
-    //     )
-    //     .toJSON()
-    //
-    //   expect(tree).toMatchSnapshot()
-    // })
-
     test('kitchen sink', () => {
-      const props = {online: false, error: false, radius: 5}
-      const huge = 100
-      const tiny = 6
-
-      const bold = fragment`
-        display: flex;
-        font-weight: bold;`
-
-      const big = fragment`
-        @apply ${bold};
-        font-size: ${huge}`
-
-      const small = fragment`
-        font-size: ${tiny}`
-
-      const flexCenter = fragment`
-        display: flex;
-        justify-content: center;
-        align-items: center`
-
       const tree = renderer
         .create(
-          <div
-            className="css__legacy-stuff"
-            css={`
-              @apply ${bold}
-              @apply ${flexCenter};
-             `}
-          >
-            <h1
-              css={`
-                @apply ${props.error ? big : small};
-                color: red
-              `}
-            >
+          <div className="css__legacy-stuff" css={{color: 'blue'}}>
+            <h1 css={{'@media(min-width: 420px)': {fontSize: 48}}}>
               BOOM
             </h1>
-            <p className="test_class1" css={`color: blue;`}>Hello</p>
+            <p className="test_class1" css={{color: 'gray'}}>Hello</p>
             <p
               className="test_class1 test___class45"
-              css={`display: inline-flex`}
+              css={{border: '1px solid blue'}}
             >
               World
             </p>
-            <p
-              css={`
-                color: red;
-                border-radius: ${props.radius};
-                &:hover {
-                  font-weight: bold;
-                  color: ${props.online ? 'green' : 'gray'};
-                }
-              `}
-            >
+            <p css={{display: 'flex'}}>
               hello world
             </p>
 
           </div>
         )
         .toJSON()
 
-      expect(tree).toMatchSnapshot()
+      expect(tree).toMatchSnapshotWithGlamor()
     })
   })
 })
diff --git a/src/glamor/__tests__/index.js.css b/src/glamor/__tests__/index.js.css