diff --git a/.changeset/config.json b/.changeset/config.json
index 00158883..afef0099 100644
--- 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
new file mode 100644
index 00000000..b07f1433
--- /dev/null
+++ 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
new file mode 100644
index 00000000..75a514a5
--- /dev/null
+++ b/.changeset/loud-carrots-remain.md
@@ -0,0 +1,5 @@
+---
+"@devup-ui/webpack-plugin": patch
+---
+
+Fix collecting css
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 94817cac..9895d4f7 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -66,3 +66,4 @@ jobs:
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+ if: github.ref == 'refs/heads/main'
diff --git a/apps/landing/devup.json b/apps/landing/devup.json
index ab490c09..e7680c3a 100644
--- 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
index 80543566..a6b38098 100644
--- a/apps/landing/src/app/layout.tsx
+++ b/apps/landing/src/app/layout.tsx
@@ -16,6 +16,11 @@ export default function RootLayout({
}>) {
return (
+
+
+
{children}
diff --git a/libs/sheet/src/lib.rs b/libs/sheet/src/lib.rs
index dc0015f0..852c4077 100644
--- 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::>()
.join("");
diff --git a/libs/sheet/src/theme.rs b/libs/sheet/src/theme.rs
index b0aeed3b..5dd094aa 100644
--- 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,
@@ -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,
- pub typography: HashMap>,
+ pub typography: BTreeMap>,
}
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::>::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
index 54e8d85a..3b59117c 100644
--- a/packages/webpack-plugin/package.json
+++ b/packages/webpack-plugin/package.json
@@ -21,6 +21,10 @@
"./loader": {
"import": "./dist/loader.js",
"require": "./dist/loader.cjs"
+ },
+ "./css-loader": {
+ "import": "./dist/css-loader.js",
+ "require": "./dist/css-loader.cjs"
}
},
"files": [
diff --git a/packages/webpack-plugin/src/__tests__/css-loader.test.ts b/packages/webpack-plugin/src/__tests__/css-loader.test.ts
new file mode 100644
index 00000000..f6f9709e
--- /dev/null
+++ b/packages/webpack-plugin/src/__tests__/css-loader.test.ts
@@ -0,0 +1,16 @@
+import { getCss } from '@devup-ui/wasm'
+
+import devupUICssLoader from '../css-loader'
+
+vi.mock('@devup-ui/wasm')
+
+describe('devupUICssLoader', () => {
+ it('should invoke callback', () => {
+ vi.mocked(getCss).mockReturnValue('css')
+ const callback = vi.fn()
+ devupUICssLoader.bind({
+ callback,
+ } as any)(Buffer.from(''), '')
+ expect(callback).toBeCalledWith(null, 'css')
+ })
+})
diff --git a/packages/webpack-plugin/src/css-loader.ts b/packages/webpack-plugin/src/css-loader.ts
new file mode 100644
index 00000000..e9778e02
--- /dev/null
+++ 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
index c9007385..20848fc0 100644
--- 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
index 8bac6680..e8774018 100644
--- 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',