Convert css

.changeset/plenty-cheetahs-battle.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/react": patch
+---
+
+convert css

.changeset/strong-beers-mate.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/wasm": patch
+---
+
+convert css

libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap

@@ -50,5 +50,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<div className={css(`d3 d4 ${a ? \"d0 d1\" : \"d2\"}`)} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d3 d4 ${a ? \"d0 d1\" : \"d2\"}`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap

@@ -32,5 +32,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<div className={css(`d2 ${a ? \"d0\" : \"d1\"}`)} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={`d2 ${a ? \"d0\" : \"d1\"}`} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap

@@ -10,5 +10,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css as c } from \"@devup-ui/core\";\n<Box className={c`d0`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"d0\"} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap

@@ -23,5 +23,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<Box className={css(\"d0 d1\")} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"d0 d1\"} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap

@@ -14,5 +14,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css as c } from \"@devup-ui/core\";\n<Box className={c(\"d0\")} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"d0\"} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap

@@ -31,5 +31,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<Box className={css(\"d0 d1\")} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"d0 d1\"} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap

@@ -23,5 +23,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<div className={css(a ? \"d0\" : \"d1\")} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<div className={a ? \"d0\" : \"d1\"} />;\n",
 }

libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap

@@ -10,5 +10,5 @@ ExtractOutput {
             },
         ),
     ],
-    code: "import \"@devup-ui/core/devup-ui.css\";\nimport { css } from \"@devup-ui/core\";\n<Box className={css`d0`} />;\n",
+    code: "import \"@devup-ui/core/devup-ui.css\";\n<Box className={\"d0\"} />;\n",
 }

libs/extractor/src/visit.rs

@@ -14,12 +14,13 @@ use oxc_ast::ast::JSXAttributeName::Identifier;
 use oxc_ast::ast::{
     Argument, BindingPatternKind, CallExpression, Expression, ImportDeclaration,
     ImportOrExportKind, JSXElement, JSXElementName, Program, PropertyKey, Statement,
-    TaggedTemplateExpression, TemplateElementValue, VariableDeclarator, WithClause,
+    VariableDeclarator, WithClause,
 };
 use oxc_ast::visit::walk_mut::{
-    walk_call_expression, walk_import_declaration, walk_jsx_element, walk_program,
-    walk_tagged_template_expression, walk_variable_declarator,
+    walk_call_expression, walk_expression, walk_import_declaration, walk_jsx_element, walk_program,
+    walk_variable_declarator,
 };
+
 use oxc_ast::{AstBuilder, VisitMut};
 use oxc_span::SPAN;
 use std::collections::{HashMap, HashSet};
@@ -81,6 +82,65 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
             }
         }
     }
+    fn visit_expression(&mut self, it: &mut Expression<'a>) {
+        walk_expression(self, it);
+        if let Expression::CallExpression(call) = it {
+            if let Expression::Identifier(ident) = &call.callee {
+                if self.css_imports.contains_key(ident.name.as_str()) && call.arguments.len() == 1 {
+                    match extract_style_from_expression(
+                        &self.ast,
+                        None,
+                        call.arguments[0].to_expression_mut(),
+                        0,
+                        None,
+                    ) {
+                        ExtractResult::ExtractStyle(styles)
+                        | ExtractResult::ExtractStyleWithChangeTag(styles, _) => {
+                            let class_name = gen_class_names(&self.ast, &styles);
+                            let mut styles = styles
+                                .into_iter()
+                                .flat_map(|ex| ex.extract())
+                                .collect::<Vec<_>>();
+
+                            self.styles.append(&mut styles);
+                            if let Some(cls) = class_name {
+                                *it = cls;
+                            } else {
+                                *it = Expression::StringLiteral(self.ast.alloc_string_literal(
+                                    SPAN,
+                                    "".to_string(),
+                                    None,
+                                ));
+                            }
+                        }
+                        _ => {}
+                    }
+                }
+            }
+        } else if let Expression::TaggedTemplateExpression(tag) = it {
+            if let Expression::Identifier(ident) = &tag.tag {
+                if self.css_imports.contains_key(ident.name.as_str()) {
+                    let css_str = tag
+                        .quasi
+                        .quasis
+                        .iter()
+                        .map(|quasi| quasi.value.raw.as_str())
+                        .collect::<Vec<&str>>()
+                        .join("");
+                    let css = ExtractStyleValue::Css(ExtractCss {
+                        css: css_str.trim().to_string(),
+                    });
+
+                    if let StyleProperty::ClassName(cls) = css.extract() {
+                        *it = Expression::StringLiteral(
+                            self.ast.alloc_string_literal(SPAN, cls, None),
+                        );
+                    }
+                    self.styles.push(css);
+                }
+            }
+        }
+    }
     fn visit_call_expression(&mut self, it: &mut CallExpression<'a>) {
         let jsx = if let Expression::Identifier(ident) = &it.callee {
             self.jsx_imports
@@ -164,71 +224,8 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                 }
             }
         }
-        if let Expression::Identifier(ident) = &it.callee {
-            if self.css_imports.contains_key(ident.name.as_str()) && it.arguments.len() == 1 {
-                match extract_style_from_expression(
-                    &self.ast,
-                    None,
-                    it.arguments[0].to_expression_mut(),
-                    0,
-                    None,
-                ) {
-                    ExtractResult::ExtractStyle(styles)
-                    | ExtractResult::ExtractStyleWithChangeTag(styles, _) => {
-                        let class_name = gen_class_names(&self.ast, &styles);
-                        let mut styles = styles
-                            .into_iter()
-                            .flat_map(|ex| ex.extract())
-                            .collect::<Vec<_>>();
-
-                        self.styles.append(&mut styles);
-                        if let Some(cls) = class_name {
-                            it.arguments[0] = Argument::from(cls);
-                        } else {
-                            it.arguments.pop();
-                        }
-                    }
-                    _ => {}
-                }
-            }
-        }
         walk_call_expression(self, it);
     }
-    fn visit_tagged_template_expression(&mut self, it: &mut TaggedTemplateExpression<'a>) {
-        if let Expression::Identifier(ident) = &it.tag {
-            if !self.css_imports.contains_key(ident.name.as_str()) {
-                walk_tagged_template_expression(self, it);
-                return;
-            }
-
-            let css_str = it
-                .quasi
-                .quasis
-                .iter()
-                .map(|quasi| quasi.value.raw.as_str())
-                .collect::<Vec<&str>>()
-                .join("");
-            let css = ExtractStyleValue::Css(ExtractCss {
-                css: css_str.trim().to_string(),
-            });
-
-            if let StyleProperty::ClassName(cls) = css.extract() {
-                let mut ve = oxc_allocator::Vec::new_in(self.ast.allocator);
-                ve.push(self.ast.template_element(
-                    SPAN,
-                    false,
-                    TemplateElementValue {
-                        cooked: None,
-                        raw: self.ast.atom(cls.as_str()),
-                    },
-                ));
-                it.quasi.quasis = ve;
-            }
-            self.styles.push(css);
-            return;
-        }
-        walk_tagged_template_expression(self, it);
-    }
     fn visit_jsx_element(&mut self, elem: &mut JSXElement<'a>) {
         walk_jsx_element(self, elem);
         // after run to convert css literal
@@ -395,6 +392,7 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> {
                         } else if import.imported.to_string() == "css" {
                             self.css_imports
                                 .insert(import.local.to_string(), it.source.value.to_string());
+                            specifiers.remove(i);
                         }
                     }
                 }

packages/react/src/utils/__tests__/css.test.ts

@@ -1,9 +1,11 @@
 import { css } from '../css'
 
 describe('css', () => {
-  it('should return className', async () => {
-    expect(css`virtual-css`).toEqual('virtual-css')
-    expect(css('class name' as any)).toEqual('class name')
-    expect(css()).toEqual('')
+  it('should return className', () => {
+    expect(() => css`virtual-css`).toThrowError('Cannot run on the runtime')
+    expect(() => css('class name' as any)).toThrowError(
+      'Cannot run on the runtime',
+    )
+    expect(() => css()).toThrowError('Cannot run on the runtime')
   })
 })

packages/react/src/utils/css.ts

@@ -6,11 +6,8 @@ export function css(strings: TemplateStringsArray): string
 export function css(): string
 
 export function css(
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   strings?: TemplateStringsArray | (DevupCommonProps & DevupSelectorProps),
 ): string {
-  if (typeof strings === 'undefined') return ''
-  if (Array.isArray(strings)) {
-    return strings.join('')
-  }
-  return strings as string
+  throw new Error('Cannot run on the runtime')
 }