修正生成的CSS Variables引导符号错误问题。

color-module/src/schemes/material_design_3/surface.rs

@@ -84,43 +84,43 @@ impl M3SurfaceSet {
     pub fn to_css_variables(&self, prefix: &str) -> Vec<String> {
         let mut css_variables = Vec::new();
 
-        css_variables.push(format!("--color-{}-surface: ${};", prefix, self.root));
+        css_variables.push(format!("--color-{}-surface: #{};", prefix, self.root));
-        css_variables.push(format!("--color-{}-surface-dim: ${};", prefix, self.dim));
+        css_variables.push(format!("--color-{}-surface-dim: #{};", prefix, self.dim));
         css_variables.push(format!(
-            "--color-{}-surface-bright: ${};",
+            "--color-{}-surface-bright: #{};",
             prefix, self.bright
         ));
         css_variables.push(format!(
-            "--color-{}-surface-container: ${};",
+            "--color-{}-surface-container: #{};",
             prefix, self.container
         ));
         css_variables.push(format!(
-            "--color-{}-surface-container-lowest: ${};",
+            "--color-{}-surface-container-lowest: #{};",
             prefix, self.container_lowest
         ));
         css_variables.push(format!(
-            "--color-{}-surface-container-low: ${};",
+            "--color-{}-surface-container-low: #{};",
             prefix, self.container_low
         ));
         css_variables.push(format!(
-            "--color-{}-surface-container-high: ${};",
+            "--color-{}-surface-container-high: #{};",
             prefix, self.container_high
         ));
         css_variables.push(format!(
-            "--color-{}-surface-container-highest: ${};",
+            "--color-{}-surface-container-highest: #{};",
             prefix, self.container_highest
         ));
-        css_variables.push(format!("--color-{}-on-surface: ${};", prefix, self.on_root));
+        css_variables.push(format!("--color-{}-on-surface: #{};", prefix, self.on_root));
         css_variables.push(format!(
-            "--color-{}-on-surface-variant: ${};",
+            "--color-{}-on-surface-variant: #{};",
             prefix, self.on_root_variant
         ));
         css_variables.push(format!(
-            "--color-{}-inverse-surface: ${};",
+            "--color-{}-inverse-surface: #{};",
             prefix, self.inverse
         ));
         css_variables.push(format!(
-            "--color-{}-inverse-on-surface: ${};",
+            "--color-{}-inverse-on-surface: #{};",
             prefix, self.on_inverse
         ));
 
@@ -130,43 +130,43 @@ impl M3SurfaceSet {
     pub fn to_scss_variables(&self, prefix: &str) -> Vec<String> {
         let mut scss_variables = Vec::new();
 
-        scss_variables.push(format!("$color-{}-surface: ${};", prefix, self.root));
+        scss_variables.push(format!("$color-{}-surface: #{};", prefix, self.root));
-        scss_variables.push(format!("$color-{}-surface-dim: ${};", prefix, self.dim));
+        scss_variables.push(format!("$color-{}-surface-dim: #{};", prefix, self.dim));
         scss_variables.push(format!(
-            "$color-{}-surface-bright: ${};",
+            "$color-{}-surface-bright: #{};",
             prefix, self.bright
         ));
         scss_variables.push(format!(
-            "$color-{}-surface-container: ${};",
+            "$color-{}-surface-container: #{};",
             prefix, self.container
         ));
         scss_variables.push(format!(
-            "$color-{}-surface-container-lowest: ${};",
+            "$color-{}-surface-container-lowest: #{};",
             prefix, self.container_lowest
         ));
         scss_variables.push(format!(
-            "$color-{}-surface-container-low: ${};",
+            "$color-{}-surface-container-low: #{};",
             prefix, self.container_low
         ));
         scss_variables.push(format!(
-            "$color-{}-surface-container-high: ${};",
+            "$color-{}-surface-container-high: #{};",
             prefix, self.container_high
         ));
         scss_variables.push(format!(
-            "$color-{}-surface-container-highest: ${};",
+            "$color-{}-surface-container-highest: #{};",
             prefix, self.container_highest
         ));
-        scss_variables.push(format!("$color-{}-on-surface: ${};", prefix, self.on_root));
+        scss_variables.push(format!("$color-{}-on-surface: #{};", prefix, self.on_root));
         scss_variables.push(format!(
-            "$color-{}-on-surface-variant: ${};",
+            "$color-{}-on-surface-variant: #{};",
             prefix, self.on_root_variant
         ));
         scss_variables.push(format!(
-            "$color-{}-inverse-surface: ${};",
+            "$color-{}-inverse-surface: #{};",
             prefix, self.inverse
         ));
         scss_variables.push(format!(
-            "$color-{}-inverse-on-surface: ${};",
+            "$color-{}-inverse-on-surface: #{};",
             prefix, self.on_inverse
         ));
 

src/ColorFunctionContext.tsx

@@ -42,7 +42,6 @@ export function ColorFunctionProvider({ children }: WasmProviderProps) {
         try {
           await init();
           setWasmInstance(funcs);
-          console.debug('[Load WASM]', 'Loaded');
         } catch (e) {
           console.error('[Load WASM]', e);
           setError(e);

src/pages/CardsDetail.tsx

@@ -6,6 +6,7 @@ import { HSegmentedControl } from '../components/HSegmentedControl';
 import { ScrollArea } from '../components/ScrollArea';
 import { ColorDescription } from '../models';
 import { ColorCard } from '../page-components/cards-detail/ColorCard';
+import { mapToObject } from '../utls';
 import styles from './CardsDetail.module.css';
 
 type ColorModes = 'hex' | 'rgb' | 'hsl' | 'lab' | 'oklch';
@@ -20,7 +21,11 @@ export function CardsDetail({ mainTag }: CardsDetailProps) {
       return [];
     }
     try {
-      const embededCategories = colorFn.color_categories() as { label: string; value: string }[];
+      const embededCategories = colorFn.color_categories().map(mapToObject) as {
+        label: string;
+        value: string;
+      }[];
+      console.debug('[Fetch color categories]', embededCategories);
       return embededCategories.filter((cate) => !isEqual(cate.value, 'unknown'));
     } catch (e) {
       console.error('[Fetch color categories]', e);

vite.config.ts

@@ -10,4 +10,7 @@ export default defineConfig({
       cssModules: true,
     },
   },
+  optimizeDeps: {
+    exclude: ['color-module'],
+  },
 });