Replace tailwind.macro by twin.macro

Author: HiDeoo

babel-plugin-macros.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   styledComponents: {},
-  tailwind: {
-    styled: 'styled-components',
+  twin: {
+    autoCssProp: true,
+    preset: 'styled-components',
   },
 }

package.json

@@ -88,8 +88,8 @@
     "react-window": "1.8.5",
     "styled-components": "5.1.1",
     "styled-tools": "1.7.2",
-    "tailwind.macro": "1.0.0-alpha.10",
     "tailwindcss": "1.4.6",
+    "twin.macro": "1.7.0",
     "typescript": "3.9.5",
     "wait-on": "5.0.1",
     "wretch": "1.7.2"

src/@types/tailwind.macro/index.d.ts

@@ -0,0 +1,18 @@
+import 'twin.macro'
+
+import styledComponent, { css as CSSProperty, CSSProp } from 'styled-components'
+
+declare module 'twin.macro' {
+  const css: typeof CSSProperty
+  const styled: typeof styledComponent
+}
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends DOMAttributes<T> {
+    css?: CSSProp
+  }
+}
+
+interface SVGProps<T> extends SVGAttributes<T> {
+  css?: CSSProp
+}

src/@types/twin.macro/index.d.ts

@@ -1,8 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import React, { useEffect } from 'react'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { getDestination } from '../destinations'
 import { getIpcRenderer, IpcRendererEvent } from '../main/ipc'
@@ -34,10 +33,7 @@ const Wrapper = styled.div`
   background-color: ${theme('window.background')};
 `
 
-const Main = styled.div`
-  ${tw`flex-1 flex h-full overflow-y-hidden`}
-`
-
+const Main = tw.div`flex-1 flex h-full overflow-y-hidden`
 const Content = tw.div`h-full flex-1 overflow-y-auto flex flex-col`
 
 const App: React.FC = () => {

src/components/App.tsx

@@ -1,8 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import React from 'react'
-import styled from 'styled-components/macro'
 import { ifProp, theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { useApp } from '../store'
 import { Panel } from '../store/app'

src/components/AppSideBar.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import styled from 'styled-components/macro'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 const StyledButton = styled.button`
   &:focus {

src/components/Button.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import styled from 'styled-components/macro'
 import { ifProp, theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 const Wrapper = styled.label<WrapperProps>`
   ${tw`block flex items-center relative`}
@@ -22,7 +21,10 @@ const Wrapper = styled.label<WrapperProps>`
   `}
 `
 
-const Input = tw.input`mr-3 invisible`
+const Input = styled.input`
+  ${tw`mr-3 invisible`}
+`
+
 const Label = tw.span`cursor-pointer`
 
 const CheckMark = styled.span`

src/components/Checkbox.tsx

@@ -1,8 +1,7 @@
 import { lighten } from 'polished'
 import React from 'react'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import Select from './Select'
 import Svg from './Svg'

src/components/ColorSelect.tsx

@@ -1,7 +1,5 @@
-import 'styled-components/macro'
-
 import React, { useEffect, useState } from 'react'
-import tw from 'tailwind.macro'
+import tw from 'twin.macro'
 
 import { getDestination } from '../destinations'
 import { getIpcRenderer } from '../main/ipc'

src/components/DeleteModal.tsx

@@ -1,7 +1,6 @@
 import { observer } from 'mobx-react-lite'
 import React, { useCallback, useEffect, useState } from 'react'
-import styled from 'styled-components/macro'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { getDestination } from '../destinations'
 import type { DestinationId, ShareOptions, ShareOptionValue } from '../destinations/DestinationBase'

src/components/Editor.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import styled from 'styled-components/macro'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import ToolBar, { ToolbarLockedProps } from './ToolBar'
 

src/components/EditorInfoBar.tsx

@@ -1,8 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import React from 'react'
 import { Tools } from 'react-sketch2'
-import styled from 'styled-components/macro'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { getDestination } from '../destinations'
 import type { DestinationId, ShareOptions, ShareOptionSetter } from '../destinations/DestinationBase'

src/components/EditorToolBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components/macro'
+import { styled } from 'twin.macro'
 
 const Wrapper = styled.span.attrs({ className: 'icon' })`
   font-family: 'SF Pro Display';

src/components/Icon.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react'
 import { SelectionCreatedEvent, SketchField, Tools } from 'react-sketch2'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { useShortcut } from '../utils/keyboard'
 import { usePrevious } from '../utils/react'

src/components/ImageEditor.tsx

@@ -1,8 +1,6 @@
-import 'styled-components/macro'
-
 import { observer } from 'mobx-react-lite'
 import React from 'react'
-import tw from 'tailwind.macro'
+import tw from 'twin.macro'
 
 import { useHistory } from '../store'
 import { useShortcut } from '../utils/keyboard'

src/components/Library.tsx

@@ -3,9 +3,8 @@ import { stripUnit } from 'polished'
 import React from 'react'
 import AutoSizer from 'react-virtualized-auto-sizer'
 import { FixedSizeGrid, GridChildComponentProps } from 'react-window'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { useHistory } from '../store'
 import type { HistoryEntry, SelectEntry } from '../store/history'

src/components/LibraryGrid.tsx

@@ -1,9 +1,8 @@
 import filesize from 'filesize'
 import React from 'react'
 import { CSSTransition } from 'react-transition-group'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { getDestination } from '../destinations'
 import { getIpcRenderer } from '../main/ipc'

src/components/LibraryPanel.tsx

@@ -1,6 +1,6 @@
-import styled, { keyframes } from 'styled-components/macro'
+import { keyframes } from 'styled-components/macro'
 import { ifProp, theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 const LoadingBarAnimation = keyframes`
   0% {

src/components/LoadingBar.tsx

@@ -1,9 +1,8 @@
 import React, { useCallback, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { CSSTransition } from 'react-transition-group'
-import styled from 'styled-components/macro'
 import { ifProp, theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { useShortcut } from '../utils/keyboard'
 import { useOnClickOutside, usePortal } from '../utils/react'

src/components/Modal.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import styled from 'styled-components/macro'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { getPathComponents } from '../utils/string'
 import Icon, { IconSymbol } from './Icon'

src/components/Path.tsx

@@ -1,8 +1,7 @@
 import { useSelect, UseSelectStateChange } from 'downshift'
 import React from 'react'
-import styled from 'styled-components/macro'
 import { ifProp, theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import Icon, { IconSymbol } from './Icon'
 

src/components/Select.tsx

@@ -1,8 +1,6 @@
-import 'styled-components/macro'
-
 import { observer } from 'mobx-react-lite'
 import React from 'react'
-import tw from 'tailwind.macro'
+import tw from 'twin.macro'
 
 import { getDestinations } from '../destinations'
 import { getIpcRenderer } from '../main/ipc'

src/components/Settings.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import styled from 'styled-components/macro'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import type { DestinationSettingSetter, DestinationSettingsGetter } from '../destinations/DestinationBase'
 import { Button, Group } from './SettingsUi'

src/components/SettingsPanel.tsx

@@ -1,8 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import React from 'react'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { useApp } from '../store'
 import { SettingsPanelId } from '../store/app'

src/components/SettingsSideBar.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import Button from './Button'
 import Path, { PathProps } from './Path'

src/components/SettingsUi.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { parseShortcut } from '../utils/keyboard'
 import type { ButtonProps } from './Button'

src/components/Shortcut.tsx

@@ -1,8 +1,7 @@
 import clsx from 'clsx'
 import React from 'react'
-import styled from 'styled-components/macro'
 import { ifProp } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import Button from './Button'
 

src/components/SideBar.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import styled from 'styled-components/macro'
 import { prop } from 'styled-tools'
+import { styled } from 'twin.macro'
 
 const Wrapper = styled.div<StyleProps>`
   svg {

src/components/Svg.tsx

@@ -1,8 +1,7 @@
 import { observer } from 'mobx-react-lite'
 import React, { useState } from 'react'
-import styled from 'styled-components/macro'
 import { ifProp, theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import { getIpcRenderer } from '../main/ipc'
 import { useApp } from '../store'

src/components/TitleBar.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import Button, { ButtonProps } from './Button'
 import Icon, { IconSymbol } from './Icon'

src/components/TitleBarButton.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
-import styled from 'styled-components/macro'
 import { ifProp, theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import type { DestinationSettingsGetter, ShareOptions, ShareOptionSetter } from '../destinations/DestinationBase'
 import type Select from './Select'

src/components/ToolBar.tsx

@@ -1,7 +1,6 @@
 import React, { useCallback } from 'react'
-import styled from 'styled-components/macro'
 import { theme } from 'styled-tools'
-import tw from 'tailwind.macro'
+import tw, { styled } from 'twin.macro'
 
 import Button, { ButtonProps } from './Button'
 import Icon, { IconSymbol } from './Icon'

src/components/ToolBarButton.tsx

@@ -1,8 +1,4 @@
-// Even tho `_types` looks unused, it is used to provide TS typings for the `css` prop through styled-components.
-// eslint-disable-next-line
-import * as _types from 'styled-components/cssprop'
-
-import './styles.css'
+import 'tailwindcss/dist/base.min.css'
 
 import React from 'react'
 import ReactDOM from 'react-dom'

src/index.tsx

@@ -1,7 +1,7 @@
 import { action, computed, observable } from 'mobx'
 import { ignore } from 'mobx-sync'
 
-import { GeneralSettingsConfiguration } from '../components/GeneralSettings'
+// import { GeneralSettingsConfiguration } from '../components/GeneralSettings'
 import { ShortcutsSettingConfiguration } from '../components/ShortcutsSettings'
 
 /**