✨ add twin.macro in Playground

.eslintrc

@@ -32,6 +32,12 @@
     "simple-import-sort"
   ],
   "rules": {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "varsIgnorePattern": "React|tw|css"
+      }
+    ],
     "arrow-body-style": [
       2,
       "as-needed"
@@ -109,12 +115,7 @@
         "allowTaggedTemplates": true
       }
     ],
-    "no-unused-vars": [
-      "error",
-      {
-        "varsIgnorePattern": "React|tw"
-      }
-    ],
+    "no-unused-vars": 0,
     "prefer-const": [
       "error",
       {

.vscode/settings.json

@@ -1,5 +1,6 @@
 {
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": false
-  }
+    "source.fixAll.eslint": true
+  },
+  "eslint.enable": true
 }

playground/.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    "babel-plugin-macros"
+  ]
+}

playground/babel-plugin-macros.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  twin: {
+    config: './tailwind.config.js',
+    styled: '@emotion/styled',
+    format: 'auto',
+    hasSuggestions: true,
+    debug: false,
+  },
+};

playground/package.json

@@ -3,20 +3,26 @@
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
-    "dev": "next",
-    "build": "next build",
+    "tailwind:build": "tailwind build styles/tailwind.css -o styles/base.css -c ./tailwind.config.js",
+    "dev": "yarn run tailwind:build && next",
+    "build": "yarn run tailwind:build && next build",
     "start": "next start",
     "type-check": "tsc"
   },
   "dependencies": {
+    "@emotion/core": "^10.0.28",
+    "@emotion/styled": "^10.0.27",
     "next": "latest",
     "react": "^16.12.0",
-    "react-dom": "^16.12.0"
+    "react-dom": "^16.12.0",
+    "tailwindcss": "^1.6.2",
+    "twin.macro": "^1.7.0"
   },
   "devDependencies": {
     "@types/node": "^12.12.21",
     "@types/react": "^16.9.16",
     "@types/react-dom": "^16.9.4",
+    "babel-plugin-macros": "^2.8.0",
     "typescript": "3.7.3"
   },
   "license": "MIT"

playground/pages/_app.tsx

@@ -0,0 +1,15 @@
+import React, { ReactType } from 'react';
+
+import '../styles/base.css';
+
+interface AppProps {
+  Component: ReactType;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  pageProps: any;
+}
+
+const MyApp = ({ Component, pageProps }: AppProps): JSX.Element => (
+  <Component {...pageProps} />
+);
+
+export default MyApp;

playground/pages/index.tsx

@@ -1,4 +1,7 @@
+/** @jsx jsx */
 import React from 'react';
+import { jsx } from '@emotion/core';
+import tw from 'twin.macro';
 
 import type { TypeA } from '../types';
 
@@ -7,7 +10,7 @@ const Example: TypeA = {
 };
 
 const Home = (): JSX.Element => (
-  <div style={{ display: 'flex', justifyContent: 'center' }}>
+  <div>
     <h1>
       <p>{Example.name}</p>
     </h1>