feat: set post css through vite-config

Misfits-Labs · Nov 7, 2023 · ddfd840 · ddfd840
1 parent f270975
commit ddfd840
Show file tree

Hide file tree

Showing 32 changed files with 32 additions and 652 deletions.
diff --git a/index.html b/index.html
@@ -5,10 +5,10 @@
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
-    <!-- <link rel="manifest" href="/site.webmanifest"> -->
+    <link rel="manifest" href="/site.webmanifest">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Wega. Win together, Own together</title>
-    <script>
+    <!-- <script>
       // It's best to inline this in `head` to avoid FOUC (flash of unstyled content) when changing pages or themes
       if (
         localStorage.getItem('color-theme') === 'dark' ||
@@ -19,7 +19,7 @@
       } else {
         document.documentElement.classList.remove('dark');
       }
-    </script>
+    </script> -->
   </head>
   <body>
     <div id="root" style="position: relative; z-index: -10; overflow: hidden"></div>

diff --git a/postcss.config.cjs b/postcss.config.cjs
@@ -1,9 +1,8 @@
 /* eslint-disable no-undef */
 // 
 module.exports = {
- plugins: [
-  require('postcss-import'),
-  require('tailwindcss'),
-  require('autoprefixer'),
- ],
+ plugins: {
+  tailwindcss: {},
+  autoprefixer: {},
+ },
 }
diff --git a/src/assets/icons/CopyPasteIcon.tsx b/src/assets/icons/CopyPasteIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/icons/CrownIcon.tsx b/src/assets/icons/CrownIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/icons/DownloadIcon.tsx b/src/assets/icons/DownloadIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/icons/SparkleIcon.tsx b/src/assets/icons/SparkleIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SparkleIcon = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/icons/TelegramIcon.tsx b/src/assets/icons/TelegramIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react";
 
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (

diff --git a/src/assets/icons/VersusIcon.tsx b/src/assets/icons/VersusIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/icons/XIcon.tsx b/src/assets/icons/XIcon.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
     <svg

diff --git a/src/assets/images/DiceCardImg1.tsx b/src/assets/images/DiceCardImg1.tsx
diff --git a/src/assets/images/DiceCardImg2.tsx b/src/assets/images/DiceCardImg2.tsx
diff --git a/src/assets/images/GradientBannerSVG.tsx b/src/assets/images/GradientBannerSVG.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/images/Noun392.tsx b/src/assets/images/Noun392.tsx
diff --git a/src/assets/images/Noun392L.tsx b/src/assets/images/Noun392L.tsx
diff --git a/src/assets/images/Noun392R.tsx b/src/assets/images/Noun392R.tsx
diff --git a/src/assets/images/OR.tsx b/src/assets/images/OR.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/images/OwnTheYardGraphicMobile.tsx b/src/assets/images/OwnTheYardGraphicMobile.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/images/index.tsx b/src/assets/images/index.tsx
@@ -23,8 +23,3 @@ export { default as OrIcon } from './OR';
 export { default as USDCIcon } from './usdc';
 export { default as USDTIcon } from './usdt';
 export { default as MaticIcon } from './matic';
-export { default as Noun392 } from './Noun392';
-export { default as Noun392R } from './Noun392R';
-export { default as Noun392L } from './Noun392L';
-export { default as DiceGameCardImg1 } from './DiceCardImg1';
-export { default as DiceGameCardImg2 } from './DiceCardImg2';
diff --git a/src/assets/images/matic.tsx b/src/assets/images/matic.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/images/usdc.tsx b/src/assets/images/usdc.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/assets/images/usdt.tsx b/src/assets/images/usdt.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/components/Dice/images/DiceFive.tsx b/src/components/Dice/images/DiceFive.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/components/Dice/images/DiceFour.tsx b/src/components/Dice/images/DiceFour.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/components/Dice/images/DiceOne.tsx b/src/components/Dice/images/DiceOne.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/components/Dice/images/DiceSix.tsx b/src/components/Dice/images/DiceSix.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/components/Dice/images/DiceThree.tsx b/src/components/Dice/images/DiceThree.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/components/Dice/images/DiceTwo.tsx b/src/components/Dice/images/DiceTwo.tsx
@@ -1,4 +1,3 @@
-import * as React from "react"
 import { SVGProps } from "react"
 const SvgComponent = (props: SVGProps<SVGSVGElement>) => (
   <svg

diff --git a/src/components/GameCard/index.tsx b/src/components/GameCard/index.tsx
@@ -68,7 +68,7 @@ export const DiceGameCard = () => {
         className="card-orb" 
       />
       </GameCardHeader>
-      <GameCardBody className="position-inherit">
+      <GameCardBody>
       <GameCardTitle>Dice</GameCardTitle>
       <GameCardDescription>
         Roll the dice, the player with the highest number wins.
@@ -118,8 +118,8 @@ export const CoinFlipGameCard = () => {
 
   return (
    <GameCardContainer onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)} >
-    <GameCardHeader className="flex justify-center items-center relative">
-     <CoinFlipIcon width="83.002px" height="110.513px" ref={iconRef} className="translate-y-[1rem]"/>
+    <GameCardHeader tw="flex justify-center items-center relative">
+     <CoinFlipIcon width="83.002px" height="110.513px" ref={iconRef} tw="translate-y-[1rem]"/>
      <GameCardOrb 
       ref={orbRef}
       width='269px'

diff --git a/src/containers/LandingPage/index.tsx b/src/containers/LandingPage/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Helmet } from 'react-helmet-async'
 import LandingPageHeroSection from '../../components/LandingPageHeroSection';
 import LandingPageHeroSectionMobile from '../../components/LandingPageHeroSectionMobile';

diff --git a/src/containers/NavigationMobile/index.tsx b/src/containers/NavigationMobile/index.tsx
@@ -51,7 +51,7 @@ export const NavigationMobile = () => {
      <div tw="container dark:text-blanc flex items-center relative z-[756]">
        <NavigationLinksContainer tw="box-border flex w-full gap-x-[30px]">
          <BrandContainer tw="mb-[4px] py-[20px]">
-           <Brand tw="font-[32px] font-semibold" ><Link to="/">Wega<span className="font-[32px] dark:text-oranjo">.</span></Link></Brand>
+           <Brand tw="font-[32px] font-semibold" ><Link to="/">Wega<span tw="font-[32px] dark:text-oranjo">.</span></Link></Brand>
          </BrandContainer>
        </NavigationLinksContainer>
        <div tw="relative flex items-end w-[22px] z-[756]" onClick={toggleNav} ><HamburgerIcon /></div>

diff --git a/tsconfig.json b/tsconfig.json
@@ -2,17 +2,23 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "lib": ["DOM", "DOM.Iterable", "ES2020", "ESNext"],
     "module": "ESNext",
     "skipLibCheck": true,
 
     /* Bundler mode */
-    "moduleResolution": "bundler",
+    "moduleResolution": "node",
     "allowImportingTsExtensions": true,
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+
+
 
     /* Linting */
     "strict": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,27 +1,35 @@
 import { defineConfig, loadEnv } from 'vite'
 import react from '@vitejs/plugin-react'
-
+import autoprefixer from 'autoprefixer';
 // https://vitejs.dev/config/
 export default ({ mode }) => {
 
   process.env = { ...process.env, ...loadEnv(mode, process.cwd())};
   return defineConfig({
-
     optimizeDeps: {
       esbuildOptions: {
-        target: 'es2020',
+        target: 'esnext',
       },
     },
     esbuild: {
       // https://github.com/vitejs/vite/issues/8644#issuecomment-1159308803
       logOverride: { 'this-is-undefined-in-esm': 'silent' },
     },
+    css: {
+      postcss: {
+        plugins: [autoprefixer()],
+      },
+    },
     plugins: [
       react({
         babel: {
-          plugins: ['babel-plugin-macros', 'babel-plugin-styled-components']
+          plugins: [
+            'babel-plugin-macros', 
+            'babel-plugin-styled-components'
+          ]
         }
       }),
+
     ],
   })