feat: use twin.macro (#12)

Author: mattrothenberg

.babelrc

@@ -0,0 +1,20 @@
+{
+  "plugins": [
+    "babel-plugin-macros",
+    [
+      "@emotion/babel-plugin-jsx-pragmatic",
+      {
+        "export": "jsx",
+        "import": "__cssprop",
+        "module": "@emotion/react"
+      }
+    ],
+    [
+      "@babel/plugin-transform-react-jsx",
+      {
+        "pragma": "__cssprop",
+        "pragmaFrag": "React.Fragment"
+      }
+    ]
+  ]
+}

babel-plugin-macros.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  twin: {
+    preset: 'emotion',
+  },
+};

example/.npmignore

@@ -1,3 +1,6 @@
 node_modules
 .cache
-dist
+dist
+.babelrc
+babel-plugin-macros.config.js
+types/twin.d.ts

example/index.tsx

@@ -1,4 +1,5 @@
 import 'react-app-polyfill/ie11';
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { Grid } from '../.';
@@ -43,10 +44,28 @@ const App = () => {
   }, [dataUrl, overrideDataUrl]);
 
   return (
-    <div className="relative h-full flex flex-col">
-      <div className="p-4 mb-2 flex flex-col">
+    <div
+      style={{
+        position: 'relative',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+      }}
+    >
+      <div
+        style={{
+          padding: 16,
+          marginBottom: 8,
+          display: 'flex',
+          flexDirection: 'column',
+        }}
+      >
         <select
-          className="p-4 mb-2"
+          style={{
+            padding: 16,
+            marginBottom: 8,
+            background: '#f4f4f4',
+          }}
           value={dataUrl}
           onChange={e => setDataUrl(e.target.value)}
         >
@@ -60,14 +79,19 @@ const App = () => {
 
         {!dataUrl && (
           <input
-            className="block p-4 mt-2"
+            style={{
+              display: 'block',
+              padding: 16,
+              marginBottom: 8,
+              background: '#f4f4f4',
+            }}
             value={localOverrideDataUrl}
             onChange={e => setLocalOverrideDataUrl(e.target.value)}
           />
         )}
       </div>
 
-      <div className="flex-1">{!isLoading && <Grid data={data} />}</div>
+      <div style={{ flex: '1 1 0%' }}>{!isLoading && <Grid data={data} />}</div>
     </div>
   );
 };

example/package.json

@@ -19,6 +19,7 @@
     "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
   },
   "devDependencies": {
+    "@babel/core": "^7.14.6",
     "@types/react": "^16.9.11",
     "@types/react-dom": "^16.8.4",
     "parcel": "^1.12.4",