Merge pull request #505 from dev-five-git/styled

Styled

Author: owjs3901

.changepacks/changepack_log_cT_D5XrKS3_JJG5rRlqgb.json

@@ -0,0 +1,8 @@
+{
+  "changes": {
+    "bindings/devup-ui-wasm/package.json": "Patch",
+    "packages/react/package.json": "Patch"
+  },
+  "note": "Implement styled",
+  "date": "2025-12-02T15:06:28.741744300Z"
+}

Cargo.lock

@@ -1,14 +1,21 @@
 'use client'
 
-import { Box, css, Text } from '@devup-ui/react'
+import { Box, css, styled, Text } from '@devup-ui/react'
 import { useState } from 'react'
+const color = 'yellow'
+
+const StyledFooter = styled.footer<{ type: '1' | '2' }>`
+  background-color: ${color};
+  color: ${(props) => (props.type === '1' ? 'red' : 'white')};
+`
 
 export default function HomePage() {
   const [color, setColor] = useState('yellow')
   const [enabled, setEnabled] = useState(false)
 
   return (
     <div>
+      <StyledFooter type="2">IMPLEMENTATION~</StyledFooter>
       <p
         style={{
           backgroundColor: 'blue',

apps/next/src/app/page.tsx

@@ -4,13 +4,13 @@ version = "0.1.0"
 edition = "2024"
 
 [dependencies]
-oxc_parser = "0.99.0"
-oxc_syntax = "0.99.0"
-oxc_span = "0.99.0"
-oxc_allocator = "0.99.0"
-oxc_ast = "0.99.0"
-oxc_ast_visit = "0.99.0"
-oxc_codegen = "0.99.0"
+oxc_parser = "0.101.0"
+oxc_syntax = "0.101.0"
+oxc_span = "0.101.0"
+oxc_allocator = "0.101.0"
+oxc_ast = "0.101.0"
+oxc_ast_visit = "0.101.0"
+oxc_codegen = "0.101.0"
 css = { path = "../css" }
 phf = "0.13"
 strum = "0.27.2"

libs/extractor/Cargo.toml

@@ -21,17 +21,17 @@ pub enum ExportVariableKind {
 
 impl ExportVariableKind {
     /// Convert the kind to a tag
-    pub fn to_tag(&self) -> Result<&str, &str> {
+    pub fn to_tag(&self) -> &str {
         match self {
             ExportVariableKind::Center
             | ExportVariableKind::VStack
             | ExportVariableKind::Grid
             | ExportVariableKind::Flex
-            | ExportVariableKind::Box => Ok("div"),
-            ExportVariableKind::Text => Ok("span"),
-            ExportVariableKind::Image => Ok("img"),
-            ExportVariableKind::Button => Ok("button"),
-            ExportVariableKind::Input => Ok("input"),
+            | ExportVariableKind::Box => "div",
+            ExportVariableKind::Text => "span",
+            ExportVariableKind::Image => "img",
+            ExportVariableKind::Button => "button",
+            ExportVariableKind::Input => "input",
         }
     }
 }
@@ -151,15 +151,15 @@ mod tests {
 
     #[test]
     fn test_to_tag() {
-        assert_eq!(ExportVariableKind::Box.to_tag(), Ok("div"));
-        assert_eq!(ExportVariableKind::Text.to_tag(), Ok("span"));
-        assert_eq!(ExportVariableKind::Image.to_tag(), Ok("img"));
-        assert_eq!(ExportVariableKind::Button.to_tag(), Ok("button"));
-        assert_eq!(ExportVariableKind::Input.to_tag(), Ok("input"));
-        assert_eq!(ExportVariableKind::Flex.to_tag(), Ok("div"));
-        assert_eq!(ExportVariableKind::VStack.to_tag(), Ok("div"));
-        assert_eq!(ExportVariableKind::Center.to_tag(), Ok("div"));
-        assert_eq!(ExportVariableKind::Grid.to_tag(), Ok("div"));
+        assert_eq!(ExportVariableKind::Box.to_tag(), "div");
+        assert_eq!(ExportVariableKind::Text.to_tag(), "span");
+        assert_eq!(ExportVariableKind::Image.to_tag(), "img");
+        assert_eq!(ExportVariableKind::Button.to_tag(), "button");
+        assert_eq!(ExportVariableKind::Input.to_tag(), "input");
+        assert_eq!(ExportVariableKind::Flex.to_tag(), "div");
+        assert_eq!(ExportVariableKind::VStack.to_tag(), "div");
+        assert_eq!(ExportVariableKind::Center.to_tag(), "div");
+        assert_eq!(ExportVariableKind::Grid.to_tag(), "div");
     }
 
     #[test]