diff --git a/.changeset/plenty-cheetahs-battle.md b/.changeset/plenty-cheetahs-battle.md new file mode 100644 index 00000000..66ad9658 --- /dev/null +++ b/.changeset/plenty-cheetahs-battle.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/react": patch +--- + +convert css diff --git a/.changeset/strong-beers-mate.md b/.changeset/strong-beers-mate.md new file mode 100644 index 00000000..109be2f3 --- /dev/null +++ b/.changeset/strong-beers-mate.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +convert css diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap index 296cd53f..fadc317d 100644 --- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment-2.snap +++ b/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
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap b/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap index 6bd09285..f8baf38e 100644 --- a/libs/extractor/src/snapshots/extractor__tests__css_props_destructuring_assignment.snap +++ b/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
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap index a035cc80..c32e5588 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-2.snap +++ b/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;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap index bc8a8814..7db397be 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-3.snap +++ b/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;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap index f9307be1..0ea144a3 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-4.snap +++ b/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;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap index 9269ed82..ab239b60 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-5.snap +++ b/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;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap index 38d9f610..33d29187 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-6.snap +++ b/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
;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n
;\n", } diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap index ffcff171..0deadd6f 100644 --- a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props.snap +++ b/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;\n", + code: "import \"@devup-ui/core/devup-ui.css\";\n;\n", } diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs index 3a4f6735..9b64cb77 100644 --- a/libs/extractor/src/visit.rs +++ b/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::>(); + + 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::>() + .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::>(); - - 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::>() - .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); } } } diff --git a/packages/react/src/utils/__tests__/css.test.ts b/packages/react/src/utils/__tests__/css.test.ts index 5aa0c9bf..33eb87dd 100644 --- a/packages/react/src/utils/__tests__/css.test.ts +++ b/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') }) }) diff --git a/packages/react/src/utils/css.ts b/packages/react/src/utils/css.ts index 3a819358..420d1f26 100644 --- a/packages/react/src/utils/css.ts +++ b/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') } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 584bc4f0..fddaccbf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -335,6 +335,25 @@ importers: specifier: ^3.0.4 version: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(happy-dom@16.7.2)(terser@5.37.0) + packages/sheet: + dependencies: + '@devup-ui/wasm': + specifier: workspace:* + version: link:../../bindings/devup-ui-wasm + devDependencies: + typescript: + specifier: ^5.7.3 + version: 5.7.3 + vite: + specifier: ^6 + version: 6.0.11(@types/node@22.10.10)(terser@5.37.0) + vite-plugin-dts: + specifier: ^4.5.0 + version: 4.5.0(@types/node@22.10.10)(rollup@4.31.0)(typescript@5.7.3)(vite@6.0.11(@types/node@22.10.10)(terser@5.37.0)) + vitest: + specifier: ^3.0.4 + version: 3.0.4(@types/debug@4.1.12)(@types/node@22.10.10)(happy-dom@16.7.2)(terser@5.37.0) + packages/vite-plugin: dependencies: '@devup-ui/wasm':