refactor： using `css` instead of `scss` (#168)

* refactor： using `css` instead of `scss`

 remove dependency `scss`

* fix: progress bar display

* fix: `className` error

package.json

@@ -30,7 +30,6 @@
     "electron-builder": "^24.6.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "sass": "^1.66.1",
     "typescript": "^5.1.6",
     "vite": "^4.4.9",
     "vite-plugin-electron": "^0.13.0-beta.3",

src/App.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 import Update from '@/components/update'
 import logoVite from './assets/logo-vite.svg'
 import logoElectron from './assets/logo-electron.svg'
-import './App.scss'
+import './App.css'
 
 console.log('[App.tsx]', `Hello world from Electron ${process.versions.electron}!`)
 

src/components/update/Modal/index.tsx

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 import { createPortal } from 'react-dom'
-import styles from './modal.module.scss'
+import './modal.css'
 
 const ModalTemplate: React.FC<React.PropsWithChildren<{
   title?: ReactNode
@@ -23,14 +23,14 @@ const ModalTemplate: React.FC<React.PropsWithChildren<{
   } = props
 
   return (
-    <div className={styles.modal}>
+    <div className='update-modal'>
-      <div className='modal-mask' />
+      <div className='update-modal__mask' />
-      <div className='modal-warp'>
+      <div className='update-modal__warp'>
-        <div className='modal-content' style={{ width }}>
+        <div className='update-modal__content' style={{ width }}>
-          <div className='modal-header'>
+          <div className='content__header'>
-            <div className='modal-header-text'>{title}</div>
+            <div className='content__header-text'>{title}</div>
             <span
-              className='modal-close'
+              className='update-modal--close'
               onClick={onCancel}
             >
               <svg
@@ -42,9 +42,9 @@ const ModalTemplate: React.FC<React.PropsWithChildren<{
               </svg>
             </span>
           </div>
-          <div className='modal-body'>{children}</div>
+          <div className='content__body'>{children}</div>
           {typeof footer !== 'undefined' ? (
-            <div className='modal-footer'>
+            <div className='content__footer'>
               <button onClick={onCancel}>{cancelText}</button>
               <button onClick={onOk}>{okText}</button>
             </div>

src/components/update/Modal/modal.css

@@ -0,0 +1,87 @@
+.update-modal {
+  --primary-color: rgb(224, 30, 90);
+
+  .update-modal__mask {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 9;
+    background: rgba(0, 0, 0, 0.45);
+  }
+
+  .update-modal__warp {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 19;
+  }
+
+  .update-modal__content {
+    box-shadow: 0 0 10px -4px rgb(130, 86, 208);
+    overflow: hidden;
+    border-radius: 4px;
+
+    .content__header {
+      display: flex;
+      line-height: 38px;
+      background-color: var(--primary-color);
+
+      .content__header-text {
+        font-weight: bold;
+        width: 0;
+        flex-grow: 1;
+      }
+    }
+
+    .update-modal--close {
+      width: 30px;
+      height: 30px;
+      margin: 4px;
+      line-height: 34px;
+      text-align: center;
+      cursor: pointer;
+
+      svg {
+        width: 17px;
+        height: 17px;
+      }
+    }
+
+    .content__body {
+      padding: 10px;
+      background-color: #fff;
+      color: #333;
+    }
+
+    .content__footer {
+      padding: 10px;
+      background-color: #fff;
+      display: flex;
+      justify-content: end;
+
+      button {
+        padding: 7px 11px;
+        background-color: var(--primary-color);
+        font-size: 14px;
+        margin-left: 10px;
+
+        &:first-child {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .icon {
+    padding: 0 15px;
+    width: 20px;
+    fill: currentColor;
+
+    &:hover {
+      color: rgba(0, 0, 0, 0.4);
+    }
+  }
+}

src/components/update/Modal/modal.module.scss

@@ -1,89 +0,0 @@
-.modal {
-  --primary-color: rgb(224, 30, 90);
-
-  :global {
-    .modal-mask {
-      width: 100vw;
-      height: 100vh;
-      position: fixed;
-      left: 0;
-      top: 0;
-      z-index: 9;
-      background: rgba(0, 0, 0, 0.45);
-    }
-
-    .modal-warp {
-      position: fixed;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      z-index: 19;
-    }
-
-    .modal-content {
-      box-shadow: 0 0 10px -4px rgb(130, 86, 208);
-      overflow: hidden;
-      border-radius: 4px;
-
-      .modal-header {
-        display: flex;
-        line-height: 38px;
-        background-color: var(--primary-color);
-
-        .modal-header-text {
-          font-weight: bold;
-          width: 0;
-          flex-grow: 1;
-        }
-      }
-
-      .modal-close {
-        width: 30px;
-        height: 30px;
-        margin: 4px;
-        line-height: 34px;
-        text-align: center;
-        cursor: pointer;
-
-        svg {
-          width: 17px;
-          height: 17px;
-        }
-      }
-
-      .modal-body {
-        padding: 10px;
-        background-color: #fff;
-        color: #333;
-      }
-
-      .modal-footer {
-        padding: 10px;
-        background-color: #fff;
-        display: flex;
-        justify-content: end;
-
-        button {
-          padding: 7px 11px;
-          background-color: var(--primary-color);
-          font-size: 14px;
-          margin-left: 10px;
-
-          &:first-child {
-            margin-left: 0;
-          }
-        }
-      }
-    }
-
-    .icon {
-      padding: 0 15px;
-      width: 20px;
-      fill: currentColor;
-
-      &:hover {
-        color: rgba(0, 0, 0, 0.4);
-      }
-    }
-  }
-}

src/components/update/Progress/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styles from './progress.module.scss'
+import './progress.css'
 
 const Progress: React.FC<React.PropsWithChildren<{
   percent?: number
@@ -7,14 +7,14 @@ const Progress: React.FC<React.PropsWithChildren<{
   const { percent = 0 } = props
 
   return (
-    <div className={styles.progress}>
+    <div className='update-progress'>
-      <div className='progress-pr'>
+      <div className='update-progress-pr'>
         <div
-          className='progress-rate'
+          className='update-progress-rate'
-          style={{ width: `${percent}%` }}
+          style={{ width: `${3 * percent}px` }}
         />
       </div>
-      <span className='progress-num'>{(percent ?? 0).toString().substring(0,4)}%</span>
+      <span className='update-progress-num'>{(percent ?? 0).toString().substring(0, 4)}%</span>
     </div>
   )
 }

src/components/update/Progress/progress.css

@@ -0,0 +1,21 @@
+.update-progress {
+  display: flex;
+  align-items: center;
+
+  .update-progress-pr {
+    border: 1px solid #000;
+    border-radius: 3px;
+    height: 6px;
+    width: 300px;
+  }
+
+  .update-progress-rate {
+    height: 6px;
+    border-radius: 3px;
+    background-image: linear-gradient(to right, rgb(130, 86, 208) 0%, var(--primary-color) 100%)
+  }
+
+  .update-progress-num {
+    margin: 0 10px;
+  }
+}

src/components/update/Progress/progress.module.scss

@@ -1,23 +0,0 @@
-.progress {
-  display: flex;
-  align-items: center;
-
-  :global {
-    .progress-pr {
-      border: 1px solid #000;
-      border-radius: 3px;
-      height: 6px;
-      width: 200px;
-    }
-
-    .progress-rate {
-      height: 6px;
-      border-radius: 3px;
-      background-image: linear-gradient(to right, rgb(130, 86, 208) 0%, var(--primary-color) 100%)
-    }
-
-    .progress-num {
-      margin: 0 10px;
-    }
-  }
-}

src/components/update/index.tsx

@@ -3,7 +3,7 @@ import type { ProgressInfo } from 'electron-updater'
 import { useCallback, useEffect, useState } from 'react'
 import Modal from '@/components/update/Modal'
 import Progress from '@/components/update/Progress'
-import styles from './update.module.scss'
+import './update.css'
 
 const Update = () => {
   const [checking, setChecking] = useState(false)
@@ -98,21 +98,21 @@ const Update = () => {
         onOk={modalBtn?.onOk}
         footer={updateAvailable ? /* hide footer */null : undefined}
       >
-        <div className={styles.modalslot}>
+        <div className='modal-slot'>
           {updateError
             ? (
-              <div className='update-error'>
+              <div>
                 <p>Error downloading the latest version.</p>
                 <p>{updateError.message}</p>
               </div>
             ) : updateAvailable
               ? (
-                <div className='can-available'>
+                <div>
                   <div>The last version is: v{versionInfo?.newVersion}</div>
-                  <div className='new-version-target'>v{versionInfo?.version} -&gt; v{versionInfo?.newVersion}</div>
+                  <div className='new-version__target'>v{versionInfo?.version} -&gt; v{versionInfo?.newVersion}</div>
-                  <div className='update-progress'>
+                  <div className='update__progress'>
-                    <div className='progress-title'>Update progress:</div>
+                    <div className='progress__title'>Update progress:</div>
-                    <div className='progress-bar'>
+                    <div className='progress__bar'>
                       <Progress percent={progressInfo?.percent} ></Progress>
                     </div>
                   </div>

src/components/update/update.css

@@ -0,0 +1,24 @@
+.modal-slot {
+  .update-progress {
+    display: flex;
+  }
+
+  .new-version__target,
+  .update__progress {
+    margin-left: 40px;
+  }
+
+  .progress__title {
+    margin-right: 10px;
+  }
+
+  .progress__bar {
+    width: 0;
+    flex-grow: 1;
+  }
+
+  .can-not-available {
+    padding: 20px;
+    text-align: center;
+  }
+}

src/components/update/update.module.scss

@@ -1,31 +0,0 @@
-.modalslot {
-  // display: flex;
-  // align-items: center;
-  // justify-content: center;
-
-  :global {
-    .update-progress {
-      display: flex;
-    }
-
-    .progress-title {
-      margin-right: 10px;
-    }
-
-    .progress-bar {
-      width: 0;
-      flex-grow: 1;
-    }
-
-    .can-available {
-      .new-version-target,.update-progress {
-        margin-left: 40px;
-      }
-    }
-
-    .can-not-available {
-      padding: 20px;
-      text-align: center;
-    }
-  }
-}

src/main.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App'
 import './samples/node-api'
-import './index.scss'
+import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>