chore:added tailwind removed sass modified linting

.eslintrc.json

@@ -1,8 +1,15 @@
 {
  "extends": [
- "@abhijithvijayan/eslint-config/typescript",
- "@abhijithvijayan/eslint-config/node",
- "@abhijithvijayan/eslint-config/react"
+ "eslint:recommended",
+ "plugin:import/errors",
+ "plugin:import/warnings",
+ "plugin:node/recommended",
+ "plugin:prettier/recommended",
+ "plugin:react/recommended",
+ "plugin:react-hooks/recommended"
+ ],
+ "plugins": [
+ "jsx-a11y"
  ],
  "parserOptions": {
  "project": [
@@ -19,16 +26,23 @@
  "max-classes-per-file": "off",
  "node/no-missing-import": "off",
  "node/no-unpublished-import": "off",
- "node/no-unsupported-features/es-syntax": ["error", {
- "ignores": ["modules"]
- }]
+ "node/no-unsupported-features/es-syntax": [
+ "error",
+ {
+ "ignores": [
+ "modules"
+ ]
+ }
+ ]
  },
  "env": {
  "webextensions": true
  },
  "settings": {
  "node": {
- "tryExtensions": [".tsx"] // append tsx to the list as well
+ "tryExtensions": [
+ ".tsx"
+ ] // append tsx to the list as well
  }
  }
 }

.prettierrc

@@ -0,0 +1,7 @@
+{
+ "semi": true,
+ "singleQuote": true,
+ "tabWidth": 4,
+ "trailingComma": "all",
+ "endOfLine": "lf"
+ }

package.json

@@ -30,12 +30,11 @@
  "emoji-log": "^1.0.2",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
+ "tailwindcss": "^3.3.3",
  "webext-base-css": "^1.3.1",
  "webextension-polyfill-ts": "^0.25.0"
  },
  "devDependencies": {
- "@abhijithvijayan/eslint-config": "2.6.3",
- "@abhijithvijayan/eslint-config-airbnb": "^1.0.2",
  "@abhijithvijayan/tsconfig": "^1.3.0",
  "@babel/core": "^7.14.3",
  "@babel/eslint-parser": "^7.12.16",
@@ -74,8 +73,6 @@
  "postcss-loader": "^4.3.0",
  "prettier": "^2.3.0",
  "resolve-url-loader": "^3.1.3",
- "sass": "^1.53.0",
- "sass-loader": "^10.2.0",
  "terser-webpack-plugin": "^4.2.3",
  "typescript": "4.1.5",
  "webpack": "^4.46.0",

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {},
+ },
+};

source/Options/Options.tsx

@@ -1,34 +1,13 @@
 import * as React from 'react';
-
-import './styles.scss';
-
+import '../styles/index.css';
 const Options: React.FC = () => {
- return (
- <div>
- <form>
- <p>
- <label htmlFor="username">Your Name</label>
- <br />
- <input
- type="text"
- id="username"
- name="username"
- spellCheck="false"
- autoComplete="off"
- required
- />
- </p>
- <p>
- <label htmlFor="logging">
- <input type="checkbox" name="logging" /> Show the features enabled
- on each page in the console
- </label>
-
- <p>cool cool cool</p>
- </p>
- </form>
- </div>
- );
+ return (
+ <div className="w-full h-full flex flex-col justify-center items-center">
+ <form className="shadow-md m-auto w-3/4 h-3/4">
+ <input type="checkbox" name="checkbox" id="checkbox" />
+ </form>
+ </div>
+ );
 };
 
 export default Options;

source/Popup/Popup.tsx

@@ -1,55 +1,55 @@
 import * as React from 'react';
-import {browser, Tabs} from 'webextension-polyfill-ts';
+import { browser, Tabs } from 'webextension-polyfill-ts';
 
-import './styles.scss';
+import '../styles/index.css';
 
 function openWebPage(url: string): Promise<Tabs.Tab> {
- return browser.tabs.create({url});
+  return browser.tabs.create({ url });
 }
 
 const Popup: React.FC = () => {
- return (
- <section id="popup">
- <h2>WEB-EXTENSION-STARTER</h2>
- <button
- id="options__button"
- type="button"
- onClick={(): Promise<Tabs.Tab> => {
- return openWebPage('options.html');
- }}
- >
- Options Page
- </button>
- <div className="links__holder">
- <ul>
- <li>
+ return (
+ <section id="popup">
+ <h2>WEB-EXTENSION-STARTER</h2>
  <button
- type="button"
- onClick={(): Promise<Tabs.Tab> => {
- return openWebPage(
- 'https://github.com/abhijithvijayan/web-extension-starter'
- );
- }}
+ id="options__button"
+ type="button"
+ onClick={(): Promise<Tabs.Tab> => {
+ return openWebPage('options.html');
+ }}
  >
- GitHub
+  Options Page
  </button>
- </li>
- <li>
- <button
- type="button"
- onClick={(): Promise<Tabs.Tab> => {
- return openWebPage(
- 'https://www.buymeacoffee.com/abhijithvijayan'
- );
- }}
- >
- Buy Me A Coffee
- </button>
- </li>
- </ul>
- </div>
- </section>
- );
+ <div className="links__holder">
+ <ul>
+ <li>
+ <button
+ type="button"
+ onClick={(): Promise<Tabs.Tab> => {
+ return openWebPage(
+ 'https://github.com/abhijithvijayan/web-extension-starter',
+ );
+ }}
+ >
+ GitHub
+ </button>
+ </li>
+ <li>
+ <button
+ type="button"
+ onClick={(): Promise<Tabs.Tab> => {
+ return openWebPage(
+ 'https://www.buymeacoffee.com/abhijithvijayan',
+ );
+ }}
+ >
+ Buy Me A Coffee
+ </button>
+ </li>
+ </ul>
+ </div>
+ </section>
+ );
 };
 
 export default Popup;

source/styles/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

tailwind.config.js

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: ["./source/**/*.tsx"],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
+

views/options.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Options</title>
- </head>
- <body>
- <div id="options-root"></div>
- </body>
+<html lang="en" style="height: 100%">
+  <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Options</title>
+  </head>
+  <body style="height: 100%">
+  <div style="height: 100%" id="options-root"></div>
+  </body>
 </html>

views/popup.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta name="viewport" content="width=500" />
- <title>Popup</title>
- </head>
- <body>
- <div id="popup-root"></div>
- </body>
+<html lang="en" style="height: 100%">
+  <head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=500" />
+  <title>Popup</title>
+  </head>
+  <body style="height: 100%">
+  <div style="height: 100%" id="popup-root"></div>
+  </body>
 </html>