Switch to CSS modules from Emotion

.yarnrc.yml

@@ -5,3 +5,6 @@ packageExtensions:
   "@parcel/node-resolver-core@*":
     dependencies:
       "@parcel/core": 2.12.0
+  "@parcel/workers@*":
+    dependencies:
+      "@parcel/core": 2.12.0

main.go

@@ -30,18 +30,23 @@ var w webview.WebView
 var html string
 var overrideUrl = ""
 
+//go:embed dist/index.css
+var css string
+
 //go:embed dist/index.js
 var js string
 
-// ParseToJsString takes a string and escapes slashes and double-quotes,
-// and converts it to a string that can be passed to JavaScript.
+// ParseToJsString takes a string, escapes slashes and double-quotes, adds newlines for multi-line
+// strings and wraps it in double-quotes, allowing it to be passed to JavaScript.
 func ParseToJsString(s string) string {
-	return "\"" + strings.ReplaceAll(strings.ReplaceAll(s, "\\", "\\\\"), "\"", "\\\"") + "\""
+	split := strings.Split(s, "\n")
+	result := `"` + strings.ReplaceAll(strings.ReplaceAll(split[0], `\`, `\\`), `"`, `\"`) + `"`
+	for _, line := range split[1:] {
+		result += ` + "\n` + strings.ReplaceAll(strings.ReplaceAll(line, `\`, `\\`), `"`, `\"`) + `"`
+	}
+	return result
 }
 
-// SetFile sets the value of the file variable in both Go and React.
-// func SetFile(value string) {file = value;w.Eval("setFileReact(" + ParseToJsString(value) + ")")}
-
 func main() {
 	if len(os.Args) >= 2 && (os.Args[1] == "-v" || os.Args[1] == "--version") {
 		println("imprint version v" + version)
@@ -76,11 +81,14 @@ func main() {
 	w.SetSize(420, 210, webview.HintNone)
 	w.SetTitle("Imprint " + version)
 
-	// Bind variables.
-	// w.Bind("setFileGo", func(newFile string) {file = newFile})
-
-	// Bind a function to initiate React via webview.Eval.
-	w.Bind("initiateReact", func() { w.Eval(js) })
+	// Bind a function to inject JavaScript and CSS via webview.Eval.
+	w.Bind("initiate", func() {
+		w.Eval(`// inject <style> tag
+const style = document.createElement('style')
+style.textContent = ` + ParseToJsString(css) + `
+document.head.appendChild(style)`)
+		w.Eval(js)
+	})
 
 	// Bind a function to request refresh of devices attached.
 	w.Bind("refreshDevices", func() {
@@ -210,7 +218,7 @@ func main() {
 		w.Navigate(overrideUrl)
 	} else {
 		w.Navigate("data:text/html," + strings.ReplaceAll(html,
-			"<script type=\"module\" src=\"./index.tsx\" />", "<script>initiateReact()</script>"))
+			"<script type=\"module\" src=\"./index.tsx\" />", "<script>initiate()</script>"))
 	}
 	w.Run()
 }

package.json

@@ -17,17 +17,12 @@
   },
   "packageManager": "[email protected]",
   "dependencies": {
-    "@emotion/react": "^11.13.3",
-    "@emotion/styled": "^11.13.0",
-    "@mui/material": "^6.1.6",
-    "@swc/helpers": "^0.5.13",
     "jsbi": "^4.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@emotion/babel-plugin": "^11.12.0",
+    "@parcel/transformer-sass": "2.12.0",
     "@tsconfig/vite-react": "^3.0.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",

renderer/App.module.scss

@@ -0,0 +1,32 @@
+.container {
+  padding: 8px;
+}
+
+.select-image-container {
+  display: flex;
+  padding-bottom: 0.4em;
+}
+
+.select-device-container {
+  display: flex;
+  padding-bottom: 0.4em;
+  padding-top: 0.4em;
+}
+
+.flash-progress-container {
+  display: flex;
+  align-items: center;
+  padding-top: 0.4em;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.refresh-button {
+  min-width: 69px;
+}
+
+.spacer {
+  width: 5px;
+}

renderer/App.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
-import { css } from '@emotion/react'
 import JSBI from 'jsbi'
 import Dialog from './Dialog'
+import * as styles from './App.module.scss'
 
 const App = (): JSX.Element => {
   const [file, setFile] = useState('')
@@ -57,39 +57,16 @@ const App = (): JSX.Element => {
           error={dialog.startsWith('Error: ')}
         />
       )}
-      <div
-        css={css`
-          padding: 8;
-        `}
-      >
+      <div className={styles.container}>
         <span>Step 1: Enter the path to the file.</span>
-        <div
-          css={css`
-            display: flex;
-            padding-bottom: 0.4em;
-          `}
-        >
-          <textarea
-            css={css`
-              width: 100%;
-            `}
-            value={file}
-            onChange={onFileInputChange}
-          />
+        <div className={styles['select-image-container']}>
+          <textarea className={styles['full-width']} value={file} onChange={onFileInputChange} />
           <button onClick={() => globalThis.promptForFile()}>Select ISO</button>
         </div>
         <span>Step 2: Select the device to flash the ISO to.</span>
-        <div
-          css={css`
-            display: flex;
-            padding-bottom: 0.4em;
-            padding-top: 0.4em;
-          `}
-        >
+        <div className={styles['select-device-container']}>
           <select
-            css={css`
-              width: 100%;
-            `}
+            className={styles['full-width']}
             value={selectedDevice}
             onChange={e => setSelectedDevice(e.target.value)}
           >
@@ -99,31 +76,16 @@ const App = (): JSX.Element => {
               </option>
             ))}
           </select>
-          <button
-            onClick={() => globalThis.refreshDevices()}
-            css={css`
-              min-width: 69px;
-            `}
-          >
+          <button onClick={() => globalThis.refreshDevices()} className={styles['refresh-button']}>
             Refresh
           </button>
         </div>
         <span>Step 3: Click the button below to begin flashing.</span>
-        <div
-          css={css`
-            display: flex;
-            align-items: center;
-            padding-top: 0.4em;
-          `}
-        >
+        <div className={styles['flash-progress-container']}>
           <button onClick={onFlashButtonClick}>
             {confirm ? 'Confirm?' : inProgress ? 'Cancel' : 'Flash'}
           </button>
-          <div
-            css={css`
-              width: 5;
-            `}
-          />
+          <div className={styles.spacer} />
           {inProgress && (
             <span>
               Progress: {progressPercent.toString()}% | Speed: {speed}

renderer/Dialog.module.scss

@@ -0,0 +1,39 @@
+.dialog {
+  background-color: rgba(0, 0, 0, 0.4);
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  z-index: 1;
+}
+
+.dialog-contents {
+  background-color: white;
+  justify-content: flex-start;
+  flex-direction: column;
+  max-height: 180px;
+  max-width: 270px;
+  display: flex;
+  padding: 8px;
+  height: 80%;
+  width: 60%;
+}
+
+.header {
+  margin: 0px;
+  color: black;
+}
+
+.error {
+  color: #ff5555;
+}
+
+.flex-spacer {
+  flex: 1;
+}
+
+.dismiss-button {
+  align-self: center;
+}

renderer/Dialog.tsx

@@ -1,56 +1,19 @@
-import { css } from '@emotion/react'
+import * as styles from './Dialog.module.scss'
 
 const Dialog = (props: {
   handleDismiss: () => void
   message: string
   error: boolean
 }): JSX.Element => {
   return (
-    <div
-      css={css`
-        background-color: rgba(0, 0, 0, 0.4);
-        justify-content: center;
-        align-items: center;
-        position: fixed;
-        display: flex;
-        height: 100%;
-        width: 100%;
-        z-index: 1;
-      `}
-    >
-      <div
-        css={css`
-          background-color: white;
-          justify-content: flex-start;
-          flex-direction: column;
-          max-height: 180px;
-          max-width: 270px;
-          display: flex;
-          padding: 8px;
-          height: 80%;
-          width: 60%;
-        `}
-      >
-        <h2
-          css={css`
-            color: ${props.error ? '#ff5555' : 'black'};
-            margin: 0px;
-          `}
-        >
+    <div className={styles.dialog}>
+      <div className={styles['dialog-contents']}>
+        <h2 className={`${styles.header} ${props.error ? styles.error : ''}`}>
           {props.error ? 'Error' : 'Message'}
         </h2>
         <p>{props.message}</p>
-        <div
-          css={css`
-            flex: 1;
-          `}
-        />
-        <button
-          css={css`
-            align-self: center;
-          `}
-          onClick={props.handleDismiss}
-        >
+        <div className={styles['flex-spacer']} />
+        <button className={styles['dismiss-button']} onClick={props.handleDismiss}>
           Dismiss
         </button>
       </div>

renderer/global.d.ts

@@ -0,0 +1 @@
+declare module '*.scss'

renderer/index.tsx

@@ -18,7 +18,6 @@ declare global {
   var setSelectedDeviceReact: (selectedDevice: string) => void
 } /* eslint-enable no-var */
 
-// TODO: Use SWC Emotion plugin in future once Parcel reads .swcrc files...
 const el = document.getElementById('app')
 if (el !== null) {
   createRoot(el).render(<App />)

tsconfig.json

@@ -1,7 +1,4 @@
 {
   "extends": "@tsconfig/vite-react",
-  "compilerOptions": {
-    "jsxImportSource": "@emotion/react"
-  },
-  "include": ["renderer/**/*", "renderer/index.d.ts"]
+  "include": ["renderer/**/*", "renderer/global.d.ts"]
 }