enhance(styles):继续调整PostCSS的转换过程。

package.json

@@ -37,9 +37,8 @@
     "eslint": "^8.45.0",
     "lost": "^9.0.2",
     "postcss": "^8.4.31",
-    "postcss-advanced-variables": "^3.0.1",
     "postcss-color-mod-function": "^3.0.3",
-    "postcss-css-variables": "^0.19.0",
+    "postcss-custom-properties": "^13.3.3",
     "postcss-import": "^15.1.0",
     "postcss-preset-env": "^9.2.0",
     "postcss-scss": "^4.0.9",

postcss.config.js

@@ -2,15 +2,15 @@
 export default {
   syntax: "postcss-scss",
   plugins: {
+    "postcss-custom-properties": {},
     "postcss-import": {},
     "postcss-preset-env": {
       stage: 2,
     },
-    precss: {},
-    "postcss-css-variables": {},
     "postcss-color-mod-function": {},
     "postcss-utilities": {},
     lost: {},
+    precss: {},
     cssnano: {},
   },
 };

src/App.css

@@ -1,7 +0,0 @@
-.logo.vite:hover {
-  filter: drop-shadow(0 0 2em #747bff);
-}
-
-.logo.solid:hover {
-  filter: drop-shadow(0 0 2em #2f5d90);
-}

src/App.jsx

@@ -1,57 +0,0 @@
-import { invoke } from "@tauri-apps/api/tauri";
-import { createSignal } from "solid-js";
-import "./App.css";
-import logo from "./assets/logo.svg";
-import WindowMoveHandler from "./components/WindowMoveHandler/WindowMoveHandler";
-
-function App() {
-  const [greetMsg, setGreetMsg] = createSignal("");
-  const [name, setName] = createSignal("");
-
-  async function greet() {
-    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-    setGreetMsg(await invoke("greet", { name: name() }));
-  }
-
-  return (
-    <>
-      <WindowMoveHandler />
-      <div class="container">
-        <h1>Welcome to Tauri!</h1>
-
-        <div class="row">
-          <a href="https://vitejs.dev" target="_blank">
-            <img src="/vite.svg" class="logo vite" alt="Vite logo" />
-          </a>
-          <a href="https://tauri.app" target="_blank">
-            <img src="/tauri.svg" class="logo tauri" alt="Tauri logo" />
-          </a>
-          <a href="https://solidjs.com" target="_blank">
-            <img src={logo} class="logo solid" alt="Solid logo" />
-          </a>
-        </div>
-
-        <p>Click on the Tauri, Vite, and Solid logos to learn more.</p>
-
-        <form
-          class="row"
-          onSubmit={(e) => {
-            e.preventDefault();
-            greet();
-          }}
-        >
-          <input
-            id="greet-input"
-            onChange={(e) => setName(e.currentTarget.value)}
-            placeholder="Enter a name..."
-          />
-          <button type="submit">Greet</button>
-        </form>
-
-        <p>{greetMsg()}</p>
-      </div>
-    </>
-  );
-}
-
-export default App;

src/BootLayout.jsx

@@ -1,10 +0,0 @@
-import WindowMoveHandler from "./components/WindowMoveHandler/WindowMoveHandler";
-
-export default function BootLayout(props) {
-  return (
-    <>
-      <WindowMoveHandler />
-      {props.children}
-    </>
-  );
-}

src/components/Spacer/Spacer.jsx

@@ -0,0 +1,5 @@
+import classes from "./Spacer.module.css";
+
+export default function Spacer() {
+  return <div class={classes.Spacer}></div>;
+}

src/components/Spacer/Spacer.module.css

@@ -0,0 +1,3 @@
+.spacer {
+  flex: 1;
+}

src/index.jsx

@@ -2,7 +2,7 @@
 import { render } from "solid-js/web";
 
 import { Router } from "@solidjs/router";
-import BootLayout from "./BootLayout";
+import BootLayout from "./layout/BootLayout";
 import "./styles.css";
 
 render(

src/layout/BootLayout.jsx

@@ -0,0 +1,12 @@
+import { prop } from "ramda";
+import WindowMoveHandler from "../components/WindowMoveHandler/WindowMoveHandler";
+import classes from "./BootLayout.module.css";
+
+export default function BootLayout(props) {
+  return (
+    <>
+      <WindowMoveHandler />
+      <div class={prop("layout-container", classes)}>{props.children}</div>
+    </>
+  );
+}

src/layout/BootLayout.module.css

@@ -0,0 +1,7 @@
+@import "../mixins.css";
+
+.layout-container {
+  @include flex(row, flex-start, stretch);
+  @util size(100%, 100%);
+  @util padding(var(--spacing-s));
+}

src/mixins.css

@@ -3,3 +3,16 @@
     @content;
   }
 }
+
+@mixin flex(
+  $direction: row,
+  $justify: flex-start,
+  $align: flex-start,
+  $gap: 0
+) {
+  display: flex;
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align;
+  gap: $gap;
+}

src/styles.css

@@ -29,16 +29,16 @@
   -webkit-text-size-adjust: 100%;
 }
 
+body {
+  background-color: rgba(219, 219, 219, 0.05);
+  @include dark-mode {
+    background-color: rgba(36, 36, 36, 0.05);
+  }
+}
+
 body,
 #root {
   @util size(100vw, 100vh);
   overflow: hidden;
   user-select: none;
 }
-
-/* @media (prefers-color-scheme: dark) {
-  :root {
-    color: var(--color-dark-fg);
-    background-color: var(--color-dark-bg);
-  }
-} */