feat: use tailwindcss with sass & styled-components

Author: abhijithvijayan

.babelrc

@@ -4,7 +4,7 @@
       // Latest stable ECMAScript features
       "@babel/preset-env",
       {
-        "useBuiltIns": "entry",
+        "useBuiltIns": false,
         // Do not transform modules to CJS
         "modules": false,
         "targets": {
@@ -20,15 +20,23 @@
   ],
   "plugins": [
     ["@babel/plugin-proposal-class-properties"],
-    ["@babel/plugin-transform-destructuring", { "useBuiltIns": true }],
-    ["@babel/plugin-proposal-object-rest-spread", { "useBuiltIns": true }],
+    ["@babel/plugin-transform-destructuring", {
+      "useBuiltIns": true
+    }],
+    ["@babel/plugin-proposal-object-rest-spread", {
+      "useBuiltIns": true
+    }],
     [
       // Polyfills the runtime needed for async/await and generators
       "@babel/plugin-transform-runtime",
       {
         "helpers": false,
         "regenerator": true
       }
-    ]
+    ],
+    // Support for twin.macro
+    "babel-plugin-macros",
+    // https://git.io/JJUrL
+    "@babel/plugin-transform-react-jsx"
   ]
 }

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) Abhijith Vijayan <[email protected]> (abhijithvijayan.in)
+Copyright (c) Abhijith Vijayan <[email protected]> (abhijithvijayan.in)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

babel-plugin-macros.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  twin: {
+    preset: 'styled-components',
+    config: './tailwind.config.js',
+    autoCssProp: true, // This adds the css prop when it's needed
+  },
+};

package.json

@@ -7,7 +7,7 @@
     "yarn": ">= 1.0.0"
   },
   "repository": "https://github.com/abhijithvijayan/kutt-extension.git",
-  "author": "abhijithvijayan <[email protected]>",
+  "author": "abhijithvijayan <[email protected]>",
   "scripts": {
     "dev:chrome": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=chrome webpack --watch",
     "dev:firefox": "cross-env NODE_ENV=development cross-env TARGET_BROWSER=firefox webpack --watch",
@@ -20,9 +20,7 @@
     "lint:fix": "eslint . --ext .ts,.tsx --fix"
   },
   "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
+    "hooks": {}
   },
   "lint-staged": {
     "*.{ts,tsx}": [
@@ -46,11 +44,12 @@
     "formik": "^2.1.4",
     "lodash.isequal": "^4.5.0",
     "qrcode.react": "^1.0.0",
-    "react": "^16.13.0",
+    "react": "^16.13.1",
     "react-copy-to-clipboard": "^5.0.2",
-    "react-dom": "^16.13.0",
+    "react-dom": "^16.13.1",
+    "styled-components": "^5.1.1",
+    "twin.macro": "^1.4.1",
     "unicorn.log": "^1.7.0",
-    "webext-base-css": "^1.0.0",
     "webextension-polyfill-ts": "^0.13.0"
   },
   "devDependencies": {
@@ -60,6 +59,7 @@
     "@babel/plugin-proposal-class-properties": "^7.8.3",
     "@babel/plugin-proposal-object-rest-spread": "^7.8.3",
     "@babel/plugin-transform-destructuring": "^7.8.8",
+    "@babel/plugin-transform-react-jsx": "^7.10.4",
     "@babel/plugin-transform-runtime": "^7.8.3",
     "@babel/preset-env": "^7.8.7",
     "@babel/preset-react": "^7.8.3",
@@ -69,6 +69,7 @@
     "@types/react": "^16.9.23",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.5",
+    "@types/styled-components": "^5.1.0",
     "@types/webpack": "^4.41.7",
     "@typescript-eslint/eslint-plugin": "^2.28.0",
     "@typescript-eslint/parser": "^2.28.0",
@@ -97,6 +98,9 @@
     "postcss-loader": "^3.0.0",
     "prettier": "^2.0.4",
     "resolve-url-loader": "^3.1.1",
+    "sass-extract": "^2.1.0",
+    "sass-extract-js": "^0.4.0",
+    "sass-extract-loader": "^1.1.0",
     "sass-loader": "^8.0.2",
     "terser-webpack-plugin": "^2.3.5",
     "typescript": "^3.8.3",
@@ -107,4 +111,4 @@
     "wext-manifest-webpack-plugin": "^1.1.1",
     "zip-webpack-plugin": "^3.0.0"
   }
-}
+}

source/Options/OptionsForm.tsx

@@ -1,4 +1,5 @@
 import React, {useEffect} from 'react';
+import 'twin.macro';
 import {
   withFormik,
   Field,
@@ -72,7 +73,12 @@ const InnerForm: React.FC<FormikProps<OptionsFormValuesProperties>> = (
           component={TextField}
           label="API Key"
         />
-        <button type="submit" className="btn-primary" disabled={isSubmitting}>
+        <button
+          tw="bg-white text-gray-800 font-bold rounded border-b-2 border-green-500 hover:border-green-600 hover:bg-green-500 hover:text-white shadow-md py-2 px-6 inline-flex items-center"
+          type="submit"
+          disabled={isSubmitting}
+        >
+          <span tw="mr-2">Validate</span>
           {/* eslint-disable-next-line no-nested-ternary */}
           {isSubmitting ? (
             <Icon name="spinner" className="icon" />
@@ -83,7 +89,6 @@ const InnerForm: React.FC<FormikProps<OptionsFormValuesProperties>> = (
           ) : (
             <Icon name="zap" className="icon" />
           )}
-          Validate
         </button>
       </div>
 

source/Options/index.tsx

@@ -1,8 +1,19 @@
-import React from 'react';
+import {ThemeProvider} from 'styled-components';
 import ReactDOM from 'react-dom';
+import React from 'react';
 
-import './styles.scss';
+// Common styles
+import '../styles/main.scss';
 
 import Options from './Options';
 
-ReactDOM.render(<Options />, document.getElementById('options-root'));
+// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved,  @typescript-eslint/no-var-requires
+const theme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../styles/base/_variables.scss');
+// Require sass variables using sass-extract-loader and specify the plugin
+
+ReactDOM.render(
+  <ThemeProvider theme={theme}>
+    <Options />
+  </ThemeProvider>,
+  document.getElementById('options-root')
+);

source/Options/styles.scss

@@ -1,9 +1,7 @@
-@import "../styles/fonts";
-@import "../styles/reset";
-@import "../styles/variables";
-@import "../styles/components";
-
-@import "~webext-base-css/webext-base.css";
+@import "../styles/base/fonts";
+@import "../styles/base/reset";
+@import "../styles/base/variables";
+@import "../styles/base/components";
 
 body {
   color: $black;

source/Popup/Header.tsx

@@ -1,4 +1,5 @@
 import React, {useState} from 'react';
+import 'twin.macro';
 
 import Icon from '../components/Icon';
 import messageUtil from '../util/mesageUtil';
@@ -100,7 +101,7 @@ const Header: React.FC<HeaderProperties> = ({
 
   return (
     <>
-      <header id="header">
+      <header id="header" tw="p-4">
         <div className="logo__holder">
           <img src="assets/logo.png" alt="logo" />
         </div>

source/Popup/Popup.tsx

@@ -12,7 +12,6 @@ import Loader from '../components/Loader';
 import PopupForm from './PopupForm';
 import PopupHeader from './Header';
 
-import './styles.scss';
 import {openExtOptionsPage, isValidUrl} from '../util/tabs';
 
 type HostProperties = {

source/Popup/index.tsx

@@ -1,6 +1,21 @@
+import {ThemeProvider} from 'styled-components';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
+// Common styles
+import '../styles/main.scss';
+
+import './styles.scss';
+
 import Popup from './Popup';
 
-ReactDOM.render(<Popup />, document.getElementById('popup-root'));
+// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved,  @typescript-eslint/no-var-requires
+const theme = require('sass-extract-loader?{"plugins": ["sass-extract-js"]}!../styles/base/_variables.scss');
+// Require sass variables using sass-extract-loader and specify the plugin
+
+ReactDOM.render(
+  <ThemeProvider theme={theme}>
+    <Popup />
+  </ThemeProvider>,
+  document.getElementById('popup-root')
+);

source/Popup/styles.scss

@@ -1,15 +1,14 @@
-@import "../styles/fonts";
-@import "../styles/reset";
-@import "../styles/variables";
-@import "../styles/components";
+@import "../styles/base/fonts";
+@import "../styles/base/reset";
+@import "../styles/base/variables";
+@import "../styles/base/components";
 
 body {
   color: $black;
 }
 
 
 #header {
-  padding: 15px;
   display: flex;
   justify-content: space-between;
   align-items: center;

source/styles/_reset.scss

@@ -0,0 +1,10 @@
+@import '~advanced-css-reset/dist/reset.css';
+
+// Add your custom reset rules here
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  outline: 0;
+}

source/styles/_components.scss renamed to source/styles/base/_components.scss

@@ -5,8 +5,7 @@ $grey-white: #f3f3f3;
 $white: #ffffff;
 
 // **** fonts ****
-$font-nunito: "Nunito",
-sans-serif;
+
 
 // font weights
 $thin: 100;

source/styles/_fonts.scss renamed to source/styles/base/_fonts.scss

@@ -0,0 +1,6 @@
+@import '~tailwindcss/dist/base.min.css';
+
+@import "base/fonts";
+@import "base/variables";
+@import "base/components";
+@import "base/reset";

source/styles/base/_reset.scss

@@ -0,0 +1,8 @@
+module.exports = {
+  purge: [],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}