chore: improve DX (#365)

* chore: use standard CSS extension

* chore: remove parcel references

* chore: install Prettier plugin for Tailwind

* chore: format with Prettier plugin for Tailwind

* chore: don't ignore config files

---------

Co-authored-by: Stephan Meijer <stephan.meijer@gmail.com>

Author: nickserv

.eslintrc.js

@@ -1,4 +1,5 @@
 module.exports = {
+  ignorePatterns: ['!**/*'],
   parser: '@typescript-eslint/parser',
   extends: [
     'eslint:recommended',

.gitignore

@@ -1,8 +1,4 @@
-.rts2_cache*
-.cache
-.parcel-cache
 cypress/videos
-
 dist/
 node_modules/
 

.lintstagedrc.js

@@ -3,7 +3,7 @@ module.exports = {
     `eslint --quiet --fix ${files.join(' ')}`,
     `jest --passWithNoTests`,
   ],
-  '**/*.{md,js,json,yml,html,css,pcss}': (files) => [
+  '**/*.{md,js,json,yml,html,css}': (files) => [
     `prettier --write ${files.join(' ')}`,
   ],
 };

devtools/src/devtools/components/MenuBar.js

@@ -15,7 +15,7 @@ import { getSettings, setSettings } from '../lib/settings';
 
 function MenuBar({ cssPath, suggestion }) {
   return (
-    <div className="h-8 p-2 border-b space-x-4 flex">
+    <div className="border-b flex h-8 space-x-4 p-2">
       <button
         className="focus:outline-none"
         title="select element"

devtools/src/devtools/pane.js

@@ -24,7 +24,7 @@ function Panel() {
   };
 
   return (
-    <div className="bg-white p-2 w-screen h-screen">
+    <div className="h-screen w-screen bg-white p-2">
       {result && <Result result={result} dispatch={dispatch} />}
     </div>
   );

devtools/src/devtools/panel.js

@@ -47,14 +47,14 @@ function Panel() {
   );
 
   return (
-    <div className="bg-white w-screen h-screen flex flex-col">
-      <div className="flex-none w-full">
+    <div className="flex h-screen w-screen flex-col bg-white">
+      <div className="w-full flex-none">
         <MenuBar
           cssPath={result.elements?.[0]?.cssPath}
           suggestion={result.expression}
         />
       </div>
-      <div className="grid relative p-2 gap-4 flex-auto grid-cols-1 md:grid-cols-2 grid-equal-cells overflow-hidden">
+      <div className="grid-equal-cells relative grid flex-auto grid-cols-1 gap-4 overflow-hidden p-2 md:grid-cols-2">
         <div className="relative">
           <Query
             query={''}

package-lock.json

@@ -101,6 +101,7 @@
     "postcss-import": "^15.1.0",
     "postcss-modules": "^6.0.0",
     "prettier": "^2.2.1",
+    "prettier-plugin-tailwindcss": "^0.3.0",
     "react-test-renderer": "^16.14.0",
     "rimraf": "^5.0.1",
     "tailwindcss": "^1.9.6",

package.json

@@ -19,18 +19,18 @@ function EventRecord({ index, style, data }) {
 
   return (
     <div
-      className={`w-full h-8 flex items-center text-sm ${
+      className={`flex h-8 w-full items-center text-sm ${
         index % 2 ? 'bg-gray-100' : ''
       }`}
       style={style}
     >
-      <div className="p-2 flex-none w-16">{id}</div>
+      <div className="w-16 flex-none p-2">{id}</div>
 
-      <div className="p-2 flex-none w-32">{type}</div>
-      <div className="p-2 flex-none w-32">{name}</div>
+      <div className="w-32 flex-none p-2">{type}</div>
+      <div className="w-32 flex-none p-2">{name}</div>
 
-      <div className="p-2 flex-none w-40">{element}</div>
-      <div className="p-2 flex-auto whitespace-no-wrap">{selector}</div>
+      <div className="w-40 flex-none p-2">{element}</div>
+      <div className="whitespace-no-wrap flex-auto p-2">{selector}</div>
     </div>
   );
 }
@@ -56,21 +56,21 @@ function DomEvents() {
       .join('\n');
 
   return (
-    <div className="editor p-4 h-56 flex-auto overflow-hidden">
-      <div className="h-full w-full flex flex-col">
-        <div className="h-8 flex items-center w-full text-sm font-bold">
+    <div className="editor h-56 flex-auto overflow-hidden p-4">
+      <div className="flex h-full w-full flex-col">
+        <div className="flex h-8 w-full items-center text-sm font-bold">
           <div
-            className="p-2 w-16 cursor-pointer flex justify-between items-center"
+            className="flex w-16 cursor-pointer items-center justify-between p-2"
             onClick={changeSortDirection}
           >
             # {getSortIcon()}
           </div>
 
-          <div className="p-2 w-32 ">type</div>
-          <div className="p-2 w-32 ">name</div>
+          <div className="w-32 p-2 ">type</div>
+          <div className="w-32 p-2 ">name</div>
 
-          <div className="p-2 w-40 ">element</div>
-          <div className="flex-auto p-2 flex justify-between">
+          <div className="w-40 p-2 ">element</div>
+          <div className="flex flex-auto justify-between p-2">
             <span>selector</span>
             <div>
               <CopyButton
@@ -85,9 +85,9 @@ function DomEvents() {
           </div>
         </div>
 
-        <div className="flex-auto relative overflow-hidden">
+        <div className="relative flex-auto overflow-hidden">
           {buffer.current.length === 0 ? (
-            <div className="flex w-full h-full opacity-50 items-end justify-center">
+            <div className="flex h-full w-full items-end justify-center opacity-50">
               <EmptyStreetImg height="80%" />
             </div>
           ) : (

src/components/DomEvents.js

@@ -100,56 +100,56 @@ function getQueryHints(cm) {
 
 // copy/edit from: https://stackoverflow.com/a/33908969/913810
 const NON_TRIGGER_KEYS = {
-  '8': 'backspace',
-  '9': 'tab',
-  '13': 'enter',
-  '16': 'shift',
-  '17': 'ctrl',
-  '18': 'alt',
-  '19': 'pause',
-  '20': 'capslock',
-  '27': 'escape',
-  '32': 'space', // added
-  '33': 'pageup',
-  '34': 'pagedown',
-  '35': 'end',
-  '36': 'home',
-  '37': 'left',
-  '38': 'up',
-  '39': 'right',
-  '40': 'down',
-  '45': 'insert',
-  '46': 'delete',
-  '91': 'left window key',
-  '92': 'right window key',
-  '93': 'select',
-  '107': 'add',
-  '109': 'subtract',
-  '110': 'decimal point',
-  '111': 'divide',
-  '112': 'f1',
-  '113': 'f2',
-  '114': 'f3',
-  '115': 'f4',
-  '116': 'f5',
-  '117': 'f6',
-  '118': 'f7',
-  '119': 'f8',
-  '120': 'f9',
-  '121': 'f10',
-  '122': 'f11',
-  '123': 'f12',
-  '144': 'numlock',
-  '145': 'scrolllock',
-  '186': 'semicolon',
-  '187': 'equalsign',
-  '188': 'comma',
-  '189': 'dash',
+  8: 'backspace',
+  9: 'tab',
+  13: 'enter',
+  16: 'shift',
+  17: 'ctrl',
+  18: 'alt',
+  19: 'pause',
+  20: 'capslock',
+  27: 'escape',
+  32: 'space', // added
+  33: 'pageup',
+  34: 'pagedown',
+  35: 'end',
+  36: 'home',
+  37: 'left',
+  38: 'up',
+  39: 'right',
+  40: 'down',
+  45: 'insert',
+  46: 'delete',
+  91: 'left window key',
+  92: 'right window key',
+  93: 'select',
+  107: 'add',
+  109: 'subtract',
+  110: 'decimal point',
+  111: 'divide',
+  112: 'f1',
+  113: 'f2',
+  114: 'f3',
+  115: 'f4',
+  116: 'f5',
+  117: 'f6',
+  118: 'f7',
+  119: 'f8',
+  120: 'f9',
+  121: 'f10',
+  122: 'f11',
+  123: 'f12',
+  144: 'numlock',
+  145: 'scrolllock',
+  186: 'semicolon',
+  187: 'equalsign',
+  188: 'comma',
+  189: 'dash',
   // '190': 'period',
-  '191': 'slash',
-  '192': 'graveaccent',
-  '220': 'backslash',
-  '222': 'quote',
+  191: 'slash',
+  192: 'graveaccent',
+  220: 'backslash',
+  222: 'quote',
 };
 
 function formatValue(cm) {
@@ -297,7 +297,7 @@ function Editor(props) {
   }, [onChange]);
 
   return (
-    <div className="w-full h-full">
+    <div className="h-full w-full">
       <textarea ref={elem} />
     </div>
   );

src/components/Editor.js

@@ -35,14 +35,14 @@ function Embed({ dispatch, dirty, gistId, gistVersion }) {
   const canAddPane = panes.length < 3;
 
   const loader = (
-    <div className="flex space-x-4 items-center border rounded w-full py-2 px-3 bg-white text-gray-800 leading-tight">
+    <div className="border rounded flex w-full items-center space-x-4 bg-white px-3 py-2 leading-tight text-gray-800">
       <SyncIcon size={12} className="spinner" />
       <span>one sec...</span>
     </div>
   );
 
   return (
-    <div className="settings text-sm pb-2">
+    <div className="settings pb-2 text-sm">
       <div className="space-y-6">
         <section className="flex flex-col space-y-4">
           <div className="flex items-center justify-between">
@@ -61,11 +61,11 @@ function Embed({ dispatch, dirty, gistId, gistVersion }) {
           </div>
 
           {/* overflow-hidden is required hide the hidden preview panel */}
-          <div className="bg-gray-200 px-4 pb-4 -mx-4 overflow-hidden">
-            <div className="px-4 gap-4 grid grid-flow-col py-1">
+          <div className="-mx-4 overflow-hidden bg-gray-200 px-4 pb-4">
+            <div className="grid grid-flow-col gap-4 px-4 py-1">
               {panes.map((selected, idx) => (
                 <div key={idx} className="flex items-center justify-between">
-                  <div className="text-left space-x-2">
+                  <div className="space-x-2 text-left">
                     {possiblePanes.map((name) => (
                       <TabButton
                         key={name}
@@ -132,8 +132,8 @@ function Embed({ dispatch, dirty, gistId, gistVersion }) {
             {dirty ? (
               loader
             ) : (
-              <div className="w-full flex space-x-4">
-                <code className="p-4 rounded bg-gray-200 text-gray-800 font-mono text-xs">
+              <div className="flex w-full space-x-4">
+                <code className="rounded bg-gray-200 p-4 font-mono text-xs text-gray-800">
                   {embedCode}
                 </code>
                 <CopyButton text={embedCode} />