Fix build css issue

owjs3901 · owjs3901 · commit 0de68923bbac · 2025-01-16T23:59:08.000+09:00
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -9,6 +9,7 @@
   "updateInternalDependencies": "patch",
   "ignore": [
     "*-example",
-    "*-benchmark"
+    "*-benchmark",
+    "landing"
   ]
 }
diff --git a/.changeset/eleven-days-cross.md b/.changeset/eleven-days-cross.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Optimize media and Change sorting css var
diff --git a/.changeset/loud-carrots-remain.md b/.changeset/loud-carrots-remain.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/webpack-plugin": patch
+---
+
+Fix collecting css
diff --git a/apps/landing/devup.json b/apps/landing/devup.json
@@ -49,6 +49,7 @@
         "base": "#000000",
         "negativeBase": "#FFFFFF",
         "title": "#FAFAFA",
+        "caption": "#A9A8B4",
         "shadow": "#62626240",
         "codeBg": "#2E303C",
         "cardBg": "#28272B",
diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx
@@ -16,6 +16,11 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <head>
+        <base
+          href={process.env.NODE_ENV === 'production' ? '/devup-ui' : '/'}
+        />
+      </head>
       <body>
         {children}
         <Footer />
diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs
@@ -130,7 +130,7 @@ impl StyleSheet {
             sorted_props.append(&mut select_props);
 
             let inner_css = sorted_props
-                .iter()
+                .into_iter()
                 .map(|prop| prop.extract())
                 .collect::<Vec<String>>()
                 .join("");
diff --git a/libs/sheet/src/theme.rs b/libs/sheet/src/theme.rs
@@ -1,4 +1,4 @@
-use std::collections::HashMap;
+use std::collections::{BTreeMap, HashMap};
 
 pub struct ColorTheme {
     data: HashMap<String, String>,
@@ -71,15 +71,15 @@ impl Color {
             .map(Some)
             .unwrap_or_else(|| self.themes.keys().next());
         if let Some(default_theme_key) = default_theme_key {
-            for (theme_name, theme_properties) in self.themes.iter() {
+            let mut entries: Vec<_> = self.themes.iter().collect();
+            entries.sort_by_key(|(k, _)| *k);
+            entries.reverse();
+            for (theme_name, theme_properties) in entries {
                 let theme_key = if *theme_name == *default_theme_key {
                     None
                 } else {
                     Some(theme_name)
                 };
-                if theme_properties.is_empty() {
-                    continue;
-                }
                 if let Some(theme_key) = theme_key {
                     theme_declaration
                         .push_str(format!(":root[data-theme={}]{{", theme_key).as_str());
@@ -127,7 +127,7 @@ impl Typography {
 pub struct Theme {
     pub colors: Color,
     pub break_points: Vec<u16>,
-    pub typography: HashMap<String, Vec<Typography>>,
+    pub typography: BTreeMap<String, Vec<Typography>>,
 }
 
 impl Default for Theme {
@@ -141,7 +141,7 @@ impl Theme {
         Self {
             colors: Color::new(),
             break_points: vec![0, 480, 768, 992, 1280],
-            typography: HashMap::new(),
+            typography: BTreeMap::new(),
         }
     }
 
@@ -166,6 +166,7 @@ impl Theme {
 
     pub fn to_css(&self) -> String {
         let mut css = self.colors.to_css();
+        let mut level_map = BTreeMap::<u8, Vec<String>>::new();
         for ty in self.typography.iter() {
             for t in ty.1.iter() {
                 let css_content = format!(
@@ -195,17 +196,24 @@ impl Theme {
                     continue;
                 }
                 let typo_css = format!(".typo-{}{{{}}}", ty.0, css_content);
-
-                if t.level == 0 {
-                    css.push_str(typo_css.as_str());
-                } else {
-                    let media = self
-                        .break_points
-                        .get(t.level as usize)
-                        .map(|v| format!("(min-width:{}px)", v));
-                    if let Some(media) = media {
-                        css.push_str(format!("\n@media {}{{{}}}", media, typo_css).as_str());
-                    }
+                level_map
+                    .get_mut(&t.level)
+                    .map(|v| v.push(typo_css.clone()))
+                    .unwrap_or_else(|| {
+                        level_map.insert(t.level, vec![typo_css.clone()]);
+                    });
+            }
+        }
+        for (level, css_vec) in level_map {
+            if level == 0 {
+                css.push_str(css_vec.join("").as_str());
+            } else {
+                let media = self
+                    .break_points
+                    .get(level as usize)
+                    .map(|v| format!("(min-width:{}px)", v));
+                if let Some(media) = media {
+                    css.push_str(format!("\n@media {}{{{}}}", media, css_vec.join("")).as_str());
                 }
             }
         }
@@ -227,6 +235,9 @@ mod tests {
         let mut color_theme = ColorTheme::new();
         color_theme.add_color("primary".to_string(), "#000".to_string());
         theme.add_color_theme("default".to_string(), color_theme);
+        let mut color_theme = ColorTheme::new();
+        color_theme.add_color("primary".to_string(), "#fff".to_string());
+        theme.add_color_theme("dark".to_string(), color_theme);
         theme.add_typography(
             "default".to_string(),
             vec![
@@ -248,10 +259,22 @@ mod tests {
                 ),
             ],
         );
+
+        theme.add_typography(
+            "default1".to_string(),
+            vec![Typography::new(
+                Some("Arial".to_string()),
+                Some("24px".to_string()),
+                Some("400".to_string()),
+                Some("1.5".to_string()),
+                Some("0.5".to_string()),
+                1,
+            )],
+        );
         let css = theme.to_css();
         assert_eq!(
             css,
-            ":root{--primary:#000;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}}"
+            ":root{--primary:#000;}\n:root[data-theme=dark]{--primary:#fff;}\n.typo-default{font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;letter-spacing:0.5}\n@media (min-width:480px){.typo-default{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}.typo-default1{font-family:Arial;font-size:24px;font-weight:400;line-height:1.5;letter-spacing:0.5}}"
         );
     }
 }
diff --git a/packages/webpack-plugin/package.json b/packages/webpack-plugin/package.json
@@ -21,16 +21,22 @@
     "./loader": {
       "import": "./dist/loader.js",
       "require": "./dist/loader.cjs"
+    },
+    "./css-loader": {
+      "import": "./dist/css-loader.js",
+      "require": "./dist/css-loader.cjs"
     }
   },
   "files": [
     "dist"
   ],
   "dependencies": {
-    "@devup-ui/wasm": "workspace:*"
+    "@devup-ui/wasm": "workspace:*",
+    "webpack-sources": "^3.2"
   },
   "devDependencies": {
     "vite": "^6.0.7",
+    "@types/webpack-sources": "^3.2",
     "@types/webpack": "^5.28.5",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^2.1.8",
diff --git a/packages/webpack-plugin/src/css-loader.ts b/packages/webpack-plugin/src/css-loader.ts
@@ -0,0 +1,7 @@
+import { getCss } from '@devup-ui/wasm'
+import type { RawLoaderDefinitionFunction } from 'webpack'
+
+const devupUICssLoader: RawLoaderDefinitionFunction = function () {
+  this.callback(null, getCss())
+}
+export default devupUICssLoader
diff --git a/packages/webpack-plugin/src/plugin.ts b/packages/webpack-plugin/src/plugin.ts
@@ -103,6 +103,18 @@ export class DevupUIWebpackPlugin {
     if (!existsSync(this.options.cssFile)) {
       writeFileSync(this.options.cssFile, '', { encoding: 'utf-8' })
     }
+
+    compiler.options.module.rules.push({
+      test: this.options.cssFile,
+      use: [
+        {
+          loader: createRequire(import.meta.url).resolve(
+            '@devup-ui/webpack-plugin/css-loader',
+          ),
+        },
+      ],
+    })
+
     compiler.options.module.rules.push({
       test: /\.(tsx|ts|js|mjs|jsx)$/,
       exclude: /node_modules/,
diff --git a/packages/webpack-plugin/vite.config.ts b/packages/webpack-plugin/vite.config.ts
@@ -57,6 +57,7 @@ export default defineConfig({
       entry: {
         index: 'src/index.ts',
         loader: 'src/loader.ts',
+        ['css-loader']: 'src/css-loader.ts',
       },
     },
     outDir: 'dist',
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,7 @@`
`9`	`9`	`"updateInternalDependencies": "patch",`
`10`	`10`	`"ignore": [`
`11`	`11`	`"*-example",`
`12`		`- "*-benchmark"`
	`12`	`+ "*-benchmark",`
	`13`	`+ "landing"`
`13`	`14`	`]`
`14`	`15`	`}`
-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@devup-ui/wasm": patch
 +---
++
 +Optimize media and Change sorting css var