[WIP] Remove vite-inline-css plugin

package.json

@@ -211,7 +211,6 @@
     "vite-plugin-checker": "^0.4.6",
     "vite-plugin-environment": "^1.1.1",
     "vite-plugin-fonts": "^0.4.0",
-    "vite-plugin-inline-css-modules": "^0.0.4",
     "vite-plugin-windicss": "^1.8.4",
     "vitest": "^0.14.2",
     "windicss": "^3.5.4"

src/renderer/App.scss

@@ -37,5 +37,28 @@ div.pre {
     font-family: "Space Mono", monospace;
 }
 
+.wb-icon-btn {
+  @apply p-3 hover:bg-contrast/20 active:bg-contrast/30 rounded-full transition duration-100;
+}
+
+.account-view {
+  @apply w-full h-full border-collapse overflow-auto text-xs;
+
+  & th:not(:global(.text-center)) {
+    @apply text-left;
+  }
+
+  & th svg {
+    @apply inline-block;
+  }
+}
+.chip {
+  @apply bg-surface-100 border-2 border-surface-300/50 w-min p-1 px-2 rounded-full select-none cursor-pointer bg-opacity-10 transition duration-100 hover:bg-surface-300 whitespace-nowrap;
+
+  &-active {
+    @apply bg-primary-base;
+  }
+}
+
 // Import all of bootstrap, this isn't an exercise in minimisation
 // @import "bootstrap/scss/bootstrap";

src/renderer/components/ProgramChangeView.tsx

@@ -6,7 +6,6 @@ import { useEffect, useState } from 'react';
 import { Button } from 'react-bootstrap';
 import { NavLink } from 'react-router-dom';
 import { toast } from 'react-toastify';
-import { css } from 'vite-plugin-inline-css-modules';
 import {
   accountsActions,
   selectAccountsListState,
@@ -47,19 +46,6 @@ interface PinnedAccountMap {
   [pubKey: string]: boolean;
 }
 
-const classes = css`
-  .account-view {
-    @apply w-full h-full border-collapse overflow-auto text-xs;
-    & th:not(:global(.text-center)) {
-      @apply text-left;
-    }
-
-    & th svg {
-      @apply inline-block;
-    }
-  }
-`;
-
 function ProgramChangeView() {
   const dispatch = useAppDispatch();
   const { net, status } = useAppSelector(selectValidatorNetworkState);
@@ -313,7 +299,7 @@ function ProgramChangeView() {
       </span>
       <div className="flex-1 block min-h-0 overflow-auto">
         {displayList.length > 0 ? (
-          <table className={classes['account-view']}>
+          <table className="account-view">
             <thead>
               <tr className="bg-surface-400">
                 <th className="text-center">

src/renderer/components/base/Chip.tsx

@@ -1,15 +1,3 @@
-import { css } from 'vite-plugin-inline-css-modules';
-
-const classes = css`
-  .chip {
-    @apply bg-surface-100 border-2 border-surface-300/50 w-min p-1 px-2 rounded-full select-none cursor-pointer bg-opacity-10 transition duration-100 hover:bg-surface-300 whitespace-nowrap;
-
-    &.active {
-      @apply bg-primary-base;
-    }
-  }
-`;
-
 const Chip: React.FC<
   React.DetailedHTMLProps<
     React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -20,7 +8,7 @@ const Chip: React.FC<
 > = ({ children, active, ...rest }) => {
   return (
     <button
-      className={`${classes.chip} ${active ? classes.active : undefined}`}
+      className={`chip ${active && 'chip-active'}`}
       type="button"
       {...rest}
     >

src/renderer/components/base/IconButton.tsx

@@ -1,16 +1,3 @@
-import classNames from 'classnames';
-import { css } from 'vite-plugin-inline-css-modules';
-
-const classes = css`
-  .btn {
-    @apply p-3 hover:bg-contrast/20 active:bg-contrast/30 rounded-full transition duration-100;
-
-    &.dense {
-      @apply p-1;
-    }
-  }
-`;
-
 const IconButton: React.FC<
   {
     dense?: boolean;
@@ -20,15 +7,7 @@ const IconButton: React.FC<
   >
 > = ({ children, className, dense, ...rest }) => {
   return (
-    <button
-      type="button"
-      className={classNames(
-        classes.btn,
-        dense ? classes.dense : undefined,
-        className
-      )}
-      {...rest}
-    >
+    <button type="button" className={`wb-icon-btn ${dense && 'p-1'}`} {...rest}>
       {children}
     </button>
   );

src/renderer/vite.config.ts

@@ -5,7 +5,6 @@ import IconsResolver from 'unplugin-icons/resolver';
 import Icons from 'unplugin-icons/vite';
 import { defineConfig } from 'vite';
 import ViteFonts from 'vite-plugin-fonts';
-import InlineCSSModules from 'vite-plugin-inline-css-modules';
 import WindiCSS from 'vite-plugin-windicss';
 import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfill';
 import checker from 'vite-plugin-checker';
@@ -48,7 +47,6 @@ export default defineConfig({
         families: ['Roboto:wght@400;500;700', 'Space Mono:wght@400'],
       },
     }),
-    InlineCSSModules(),
     Icons({
       compiler: 'jsx',
       jsx: 'react',