I'll explain this when I'm sober .. or revert it

Signed-off-by: Sangam Kumar <[email protected]>

.env

@@ -1 +0,0 @@
-PURGE_CSS=true

.env.development

@@ -1 +0,0 @@
-PURGE_CSS=false

babel.config.js

@@ -9,9 +9,9 @@ module.exports = {
           components: './src/components',
           utils: './src/utils',
           posts: './src/posts',
-          styles: './src/styles'
-        }
-      }
-    ]
-  ]
+          styles: './src/styles',
+        },
+      },
+    ],
+  ],
 };

next.config.js

@@ -2,6 +2,6 @@ const path = require('path');
 
 module.exports = {
   sassOptions: {
-    includePaths: [path.join(__dirname, 'styles')]
-  }
+    includePaths: [path.join(__dirname, 'styles')],
+  },
 };

package.json

@@ -1,19 +1,22 @@
 {
-  "name": "portfolio",
+  "name": "sangam.dev",
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 3535",
     "build": "next build",
     "start": "next start",
-    "lint": "eslint --ext=js --fix src && stylelint src/styles/*.scss",
-    "precommit": "yarn lint"
+    "lint": "eslint --ext js --fix src && stylelint src/styles/*.scss"
+  },
+  "engineStrict": true,
+  "engines": {
+    "node": ">=12"
   },
   "dependencies": {
-    "@fullhuman/postcss-purgecss": "3.0.0",
+    "autoprefixer": "^10.0.2",
     "next": "10.0.0",
+    "next-svgr": "0.0.2",
     "postcss-preset-env": "6.7.0",
-    "prop-types": "15.7.2",
     "react": "17.0.1",
     "react-dom": "17.0.1",
     "sass": "1.29.0",
@@ -34,8 +37,15 @@
     "eslint-plugin-prettier": "3.0.1",
     "eslint-plugin-react": "7.14.2",
     "eslint-plugin-react-hooks": "1.4.0",
+    "husky": "4.3.0",
     "prettier": "1.16.4",
+    "pretty-quick": "3.1.0",
     "stylelint": "13.7.2",
     "stylelint-config-standard": "20.0.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint && pretty-quick --staged"
+    }
   }
 }

postcss.config.js

@@ -1,17 +1,3 @@
-const path = require('path');
-
-const purgecssConfig = [
-  '@fullhuman/postcss-purgecss',
-  {
-    content: [path.join(__dirname, 'src', '**', '*.{js,jsx}')],
-    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
-  }
-];
-
 module.exports = {
-  plugins: [
-    'tailwindcss',
-    'postcss-preset-env',
-    ...(process.env.PURGE_CSS ? [purgecssConfig] : [])
-  ]
+  plugins: ['postcss-preset-env', 'tailwindcss', 'autoprefixer'],
 };

prettier.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  trailingComma: 'es5',
+  tabWidth: 2,
+  semi: true,
+  singleQuote: true,
+};

src/components/Header.js

@@ -17,7 +17,7 @@ function Header() {
             style={{
               borderRight: '1px solid',
               marginRight: '18px',
-              zIndex: 9999
+              zIndex: 9999,
             }}
           >
             <ul className="flex items-center justify-start max-w-full mx-auto my-0 py-0 px-5 text-base list-none">

src/components/SiteHead.js

@@ -1,5 +1,4 @@
 import Head from 'next/head';
-import PropTypes from 'prop-types';
 
 function MyHead(props) {
   const { pageName, children } = props;
@@ -22,14 +21,9 @@ function MyHead(props) {
   );
 }
 
-MyHead.propTypes = {
-  pageName: PropTypes.string,
-  children: PropTypes.element
-};
-
 MyHead.defaultProps = {
   pageName: 'Home',
-  children: null
+  children: null,
 };
 
 export default MyHead;

src/styles/index.scss

@@ -1,11 +1,5 @@
-/* purgecss start ignore */
-@tailwind base;
-@tailwind components;
+@import './tailwind.scss';
 
-/* purgecss end ignore */
-@tailwind utilities;
-
-/* purgecss start ignore */
 .theme-light {
   --color-primary: theme('colors.blue.700');
   --color-primary-hover: theme('colors.blue.800');
@@ -88,15 +82,16 @@ html {
 body {
   margin: 0;
   padding: 0;
-  font-family: DM Mono, -apple-system, BlinkMacSystemFont, roboto, segoe ui, Helvetica, Arial, sans-serif;
+  font-family: DM Mono, -apple-system, BlinkMacSystemFont, roboto, segoe ui,
+    Helvetica, Arial, sans-serif;
   font-display: auto;
   font-size: 1rem;
   line-height: 1.54;
   background-color: #fff;
   color: #222;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
-  font-feature-settings: "liga", "tnum", "case", "calt", "zero", "ss01", "locl";
+  font-feature-settings: 'liga', 'tnum', 'case', 'calt', 'zero', 'ss01', 'locl';
   -webkit-overflow-scrolling: touch;
   -webkit-text-size-adjust: 100%;
   display: flex;
@@ -145,5 +140,3 @@ body {
     opacity: 0;
   }
 }
-
-/* purgecss end ignore */

src/styles/tailwind.scss

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

stylelint.config.js

@@ -4,11 +4,11 @@ module.exports = {
     'at-rule-no-unknown': [
       true,
       {
-        ignoreAtRules: ['extends', 'tailwind']
-      }
+        ignoreAtRules: ['extends', 'tailwind'],
+      },
     ],
     'block-no-empty': null,
     'custom-property-empty-line-before': null,
-    'unit-allowed-list': ['em', 'rem', 's', 'px', '%', 'vh']
-  }
+    'unit-allowed-list': ['em', 'rem', 's', 'px', '%', 'vh'],
+  },
 };

tailwind.config.js

@@ -1,9 +1,14 @@
 const { fontFamily } = require('tailwindcss/defaultTheme');
 
 module.exports = {
+  purge: {
+    mode: 'layers',
+    layers: ['components', 'utilities'],
+    content: ['./src/**/*.js'],
+  },
   theme: {
     fontFamily: {
-      mono: ['DM Mono', fontFamily.mono]
+      mono: ['DM Mono', fontFamily.mono],
     },
     extend: {
       colors: {
@@ -29,21 +34,21 @@ module.exports = {
         heading: 'var(--color-heading)',
         'heading-muted': 'var(--color-heading-muted)',
         body: 'var(--color-body)',
-        'body-muted': 'var(--color-body-muted)'
+        'body-muted': 'var(--color-body-muted)',
       },
       width: {
-        'max-content': 'max-content'
-      }
+        'max-content': 'max-content',
+      },
     },
     minWidth: {
-      '1/3': '33%'
-    }
+      '1/3': '33%',
+    },
   },
   variants: {
     textColor: ['responsive', 'hover', 'focus', 'visited', 'group-hover'],
     textDecoration: ['hover', 'focus', 'group-hover'],
     opacity: ['responsive', 'hover', 'focus', 'group-hover'],
-    borderWidth: ['responsive', 'hover', 'focus']
+    borderWidth: ['responsive', 'hover', 'focus'],
   },
-  plugins: []
+  plugins: [],
 };