Radium to emotion

example/src/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import {
   Appear, BlockQuote, Cite, CodePane, ComponentPlayground, Deck, Fill,
   Heading, Image, Layout, Link, ListItem, List, Markdown, MarkdownSlides, Quote, Slide, SlideSet,
-  TableBody, TableHeader, TableHeaderItem, TableItem, TableRow, Table, Text
+  TableBody, TableHeader, TableHeaderItem, TableItem, TableRow, Table, Text, S
 } from '../../src';
 
 import preloader from '../../src/utils/preloader';

package.json

@@ -17,7 +17,8 @@
     "lint": "eslint src *.js",
     "deploy": "npm run build:dist && surge -p .",
     "start": "node server.js",
-    "test": "jest --verbose"
+    "test": "jest --verbose",
+    "test-debug": "node --inspect-brk ./node_modules/jest/bin/jest.js --runInBand"
   },
   "author": "",
   "license": "MIT",

src/components/__snapshots__/block-quote.test.js.snap

@@ -2,16 +2,24 @@
 
 exports[`<BlockQuote /> should render correctly. 1`] = `
 <BlockQuote>
-  <blockquote
+  <Styled(blockquote)
     className={undefined}
-    data-radium={true}
-    style={
-      Object {
-        "fontStyle": "oblique",
-      }
+    styles={
+      Array [
+        Object {
+          "fontStyle": "oblique",
+        },
+        Object {},
+        Object {},
+        undefined,
+      ]
     }
   >
-    Some Quote
-  </blockquote>
+    <blockquote
+      className="css-1220ekt"
+    >
+      Some Quote
+    </blockquote>
+  </Styled(blockquote)>
 </BlockQuote>
 `;

src/components/__snapshots__/cite.test.js.snap

@@ -2,17 +2,25 @@
 
 exports[`<Cite /> should render correctly. 1`] = `
 <Cite>
-  <cite
+  <Styled(cite)
     className={undefined}
-    data-radium={true}
-    style={
-      Object {
-        "color": "#ee0",
-      }
+    styles={
+      Array [
+        Object {
+          "color": "#ee0",
+        },
+        Object {},
+        Object {},
+        undefined,
+      ]
     }
   >
-    - 
-    Someone
-  </cite>
+    <cite
+      className="css-1j6fsf6"
+    >
+      - 
+      Someone
+    </cite>
+  </Styled(cite)>
 </Cite>
 `;

src/components/__snapshots__/code-pane.test.js.snap

@@ -14,29 +14,56 @@ exports[`<CodePane /> should render correctly. 1`] = `
       );
     "
 >
-  <pre
+  <Styled(pre)
     className={undefined}
-    data-radium={true}
-    style={Object {}}
+    styles={
+      Array [
+        Object {},
+        Object {},
+        undefined,
+      ]
+    }
   >
-    <code
-      className="language-jsx"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "
-              const myButton = (
-                &lt;CustomButton
-                  style={{ background: '#f00' }}
-                  onClick={this.action}
-                &gt;
-                 Click Me
-                &lt;/CustomButton&gt;
-              );
-            ",
+    <pre
+      className="css-0"
+    >
+      <Styled(code)
+        className="language-jsx"
+        dangerouslySetInnerHTML={
+          Object {
+            "__html": "
+                const myButton = (
+                  &lt;CustomButton
+                    style={{ background: '#f00' }}
+                    onClick={this.action}
+                  &gt;
+                   Click Me
+                  &lt;/CustomButton&gt;
+                );
+              ",
+          }
         }
-      }
-      style={undefined}
-    />
-  </pre>
+        styles={undefined}
+      >
+        <code
+          className="language-jsx css-0"
+          dangerouslySetInnerHTML={
+            Object {
+              "__html": "
+                  const myButton = (
+                    &lt;CustomButton
+                      style={{ background: '#f00' }}
+                      onClick={this.action}
+                    &gt;
+                     Click Me
+                    &lt;/CustomButton&gt;
+                  );
+                ",
+            }
+          }
+        />
+      </Styled(code)>
+    </pre>
+  </Styled(pre)>
 </CodePane>
 `;

src/components/__snapshots__/code.test.js.snap

@@ -2,19 +2,31 @@
 
 exports[`<Code /> should render correctly. 1`] = `
 <Code>
-  <code
+  <Styled(code)
     className={undefined}
     dangerouslySetInnerHTML={
       Object {
         "__html": "const [a, ...b] = [1, 2, 3, 4]",
       }
     }
-    data-radium={true}
-    style={
-      Object {
-        "fontWeight": 500,
-      }
+    styles={
+      Array [
+        Object {
+          "fontWeight": 500,
+        },
+        Object {},
+        undefined,
+      ]
     }
-  />
+  >
+    <code
+      className="css-10rvbm3"
+      dangerouslySetInnerHTML={
+        Object {
+          "__html": "const [a, ...b] = [1, 2, 3, 4]",
+        }
+      }
+    />
+  </Styled(code)>
 </Code>
 `;

src/components/__snapshots__/controls.test.js.snap

@@ -7,12 +7,9 @@ exports[`<Controls /> should render correctly. 1`] = `
   onPrev={[Function]}
   totalSlides={5}
 >
-  <div
-    data-radium={true}
-  >
+  <div>
     <button
-      data-radium={true}
-      key=".$prev"
+      key="prev"
       onClick={[Function]}
       style={
         Object {
@@ -34,8 +31,7 @@ exports[`<Controls /> should render correctly. 1`] = `
       </svg>
     </button>
     <button
-      data-radium={true}
-      key=".$next"
+      key="next"
       onClick={[Function]}
       style={
         Object {

src/components/__snapshots__/fullscreen.test.js.snap

@@ -2,28 +2,22 @@
 
 exports[`<Fullscreen /> should render correctly. 1`] = `
 <Fullscreen>
-  <svg
-    data-radium={true}
-    height="30px"
-    onClick={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    style={
-      Object {
-        "bottom": 20,
-        "cursor": "pointer",
-        "opacity": 0,
-        "position": "absolute",
-        "right": 20,
-        "transition": "300ms opacity ease",
-      }
-    }
-    viewBox="0 0 512 512"
-    width="30px"
-  >
-    <path
-      d="M73.143,329.143H0V512h182.857v-73.143H73.143V329.143z M0,182.857h73.143V73.143h109.715V0H0V182.857z M438.857,438.857 H329.143V512H512V329.143h-73.143V438.857z M329.143,0v73.143h109.715v109.715H512V0H329.143z"
-    />
-  </svg>
+  <Styled(div)>
+    <div
+      className="css-1j4mcul"
+    >
+      <svg
+        height="30px"
+        onClick={[Function]}
+        style={undefined}
+        viewBox="0 0 512 512"
+        width="30px"
+      >
+        <path
+          d="M73.143,329.143H0V512h182.857v-73.143H73.143V329.143z M0,182.857h73.143V73.143h109.715V0H0V182.857z M438.857,438.857 H329.143V512H512V329.143h-73.143V438.857z M329.143,0v73.143h109.715v109.715H512V0H329.143z"
+        />
+      </svg>
+    </div>
+  </Styled(div)>
 </Fullscreen>
 `;

src/components/__snapshots__/heading.test.js.snap

@@ -5,18 +5,26 @@ exports[`<Heading /> should render correctly. 1`] = `
   lineHeight={1}
   size={2}
 >
-  <h2
+  <Styled(h2)
     className={undefined}
-    data-radium={true}
-    style={
+    lineHeight={1}
+    styles={
       Object {
-        "color": "#ff0",
-        "lineHeight": 1,
+        "base": Object {},
+        "context": Object {
+          "color": "#ff0",
+        },
+        "typeface": Object {},
+        "user": undefined,
       }
     }
   >
-    Hi There!
-  </h2>
+    <h2
+      className="css-xb8aa1"
+    >
+      Hi There!
+    </h2>
+  </Styled(h2)>
 </Heading>
 `;
 
@@ -26,33 +34,39 @@ exports[`<Heading /> should render the fit configuration correctly. 1`] = `
   lineHeight={1}
   size={1}
 >
-  <div
+  <Styled(div)
     className={undefined}
-    data-radium={true}
-    style={
+    height={0}
+    innerRef={[Function]}
+    styles={
       Object {
-        "display": "block",
-        "height": 0,
-        "width": "100%",
+        "base": Object {},
+        "context": undefined,
       }
     }
   >
-    <span
-      data-radium={true}
-      style={
-        Object {
-          "display": "block",
-          "fontSize": 16,
-          "lineHeight": 1,
-          "margin": "0",
-          "padding": "0",
-          "transform": "scale(NaN)",
-          "transformOrigin": "center top",
-        }
-      }
+    <div
+      className="css-1449yoq"
+      height={0}
     >
-      This Header Fits!
-    </span>
-  </div>
+      <Styled(span)
+        innerRef={[Function]}
+        lineHeight={1}
+        scale={NaN}
+        styles={
+          Object {
+            "typeface": Object {},
+            "user": undefined,
+          }
+        }
+      >
+        <span
+          className="css-piqx9m"
+        >
+          This Header Fits!
+        </span>
+      </Styled(span)>
+    </div>
+  </Styled(div)>
 </Heading>
 `;