Merge pull request #248 from dev-five-git/keyframes

Keyframes

Author: owjs3901

.changeset/breezy-ghosts-kiss.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/reset-css": major
+---
+
+reset css

.changeset/yummy-brooms-appear.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+Implement keyframe

Cargo.lock

@@ -15,6 +15,6 @@ export default withMDX(
       pageExtensions: ['js', 'jsx', 'md', 'mdx', 'ts', 'tsx'],
       output: 'export',
     },
-    { include: ['@devup-ui/components'] },
+    { include: ['@devup-ui/components', '@devup-ui/reset-css'] },
   ),
 )

apps/landing/next.config.ts

@@ -13,6 +13,7 @@
   "dependencies": {
     "@devup-ui/components": "workspace:*",
     "@devup-ui/react": "workspace:*",
+    "@devup-ui/reset-css": "workspace:*",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
     "@next/mdx": "^15.3.5",
@@ -24,8 +25,7 @@
     "react-dom": "^19.1.0",
     "react-markdown": "^10.1.0",
     "react-syntax-highlighter": "^15.6.1",
-    "remark-gfm": "^4.0.1",
-    "sanitize.css": "^13.0.0"
+    "remark-gfm": "^4.0.1"
   },
   "devDependencies": {
     "@devup-ui/next-plugin": "workspace:*",

apps/landing/package.json

@@ -1,11 +1,18 @@
 'use client'
 
-import './StarButton.css'
-
-import { Center, css, Flex, Image, Text } from '@devup-ui/react'
+import { Center, css, Flex, Image, keyframes, Text } from '@devup-ui/react'
 import Link from 'next/link'
 import { useEffect, useState } from 'react'
 
+const spin = keyframes({
+  '0%': {
+    transform: 'rotate(0deg)',
+  },
+  '100%': {
+    transform: 'rotate(360deg)',
+  },
+})
+
 export default function StarButton() {
   const [starCount, setStarCount] = useState<number | null>(null)
 
@@ -88,7 +95,8 @@ export default function StarButton() {
           {starCount === null ? (
             <Image
               alt="Loading"
-              animation="spin 1s linear infinite"
+              animation="1s linear infinite"
+              animationName={spin}
               boxSize="20px"
               src="/spinner.svg"
             />

apps/landing/src/app/StarButton.css

@@ -1,6 +1,5 @@
-import 'sanitize.css'
-
 import { css, globalCss, ThemeScript } from '@devup-ui/react'
+import { resetCss } from '@devup-ui/reset-css'
 import type { Metadata } from 'next'
 
 import { Footer } from '../components/Footer'
@@ -24,6 +23,8 @@ export const metadata: Metadata = {
   },
 }
 
+resetCss()
+
 globalCss({
   imports: ['https://cdn.jsdelivr.net/gh/joungkyun/font-d2coding/d2coding.css'],
   table: {

apps/landing/src/app/StarButton.tsx

@@ -1,6 +1,8 @@
 use css::class_map::{get_class_map, set_class_map};
+use extractor::extract_style::ExtractStyleProperty;
 use extractor::extract_style::extract_style_value::ExtractStyleValue;
-use extractor::{ExtractOption, StyleProperty, extract};
+use extractor::extract_style::style_property::StyleProperty;
+use extractor::{ExtractOption, extract};
 use once_cell::sync::Lazy;
 use sheet::StyleSheet;
 use std::collections::HashSet;
@@ -90,6 +92,32 @@ impl Output {
                         collected = true;
                     }
                 }
+
+                ExtractStyleValue::Keyframes(keyframes) => {
+                    if sheet.add_keyframes(
+                        &keyframes.extract().to_string(),
+                        keyframes
+                            .keyframes
+                            .iter()
+                            .map(|(key, value)| {
+                                (
+                                    key.clone(),
+                                    value
+                                        .iter()
+                                        .map(|style| {
+                                            (
+                                                style.property().to_string(),
+                                                style.value().to_string(),
+                                            )
+                                        })
+                                        .collect::<Vec<(String, String)>>(),
+                                )
+                            })
+                            .collect(),
+                    ) {
+                        collected = true;
+                    }
+                }
                 ExtractStyleValue::Css(cs) => {
                     if sheet.add_css(&cs.file, &cs.css) {
                         collected = true;

apps/landing/src/app/layout.tsx

@@ -19,3 +19,31 @@ pub fn set_class_map(map: HashMap<String, i32>) {
 pub fn get_class_map() -> HashMap<String, i32> {
     GLOBAL_CLASS_MAP.lock().unwrap().clone()
 }
+
+#[cfg(test)]
+mod tests {
+    use serial_test::serial;
+
+    use super::*;
+
+    #[test]
+    #[serial]
+    fn test_set_and_get_class_map() {
+        let mut test_map = HashMap::new();
+        test_map.insert("test-key".to_string(), 42);
+        set_class_map(test_map.clone());
+        let got = get_class_map();
+        assert_eq!(got.get("test-key"), Some(&42));
+    }
+
+    #[test]
+    #[serial]
+    fn test_reset_class_map() {
+        let mut test_map = HashMap::new();
+        test_map.insert("reset-key".to_string(), 1);
+        set_class_map(test_map);
+        reset_class_map();
+        let got = get_class_map();
+        assert!(got.is_empty());
+    }
+}