diff --git a/.changeset/loud-boats-count.md b/.changeset/loud-boats-count.md new file mode 100644 index 00000000..3344c8ca --- /dev/null +++ b/.changeset/loud-boats-count.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/react": patch +--- + +Support theme typing to css diff --git a/.changeset/metal-carrots-protect.md b/.changeset/metal-carrots-protect.md new file mode 100644 index 00000000..4035ade1 --- /dev/null +++ b/.changeset/metal-carrots-protect.md @@ -0,0 +1,5 @@ +--- +"@devup-ui/wasm": patch +--- + +Fix empty css call issue diff --git a/apps/landing/package.json b/apps/landing/package.json index d16eeaa5..c721048b 100644 --- a/apps/landing/package.json +++ b/apps/landing/package.json @@ -4,7 +4,7 @@ "type": "module", "private": true, "scripts": { - "dev": "next dev --turbo", + "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint" diff --git a/apps/landing/src/app/(detail)/docs/MenuItem.tsx b/apps/landing/src/app/(detail)/docs/MenuItem.tsx index 6c6d5528..07f9c87b 100644 --- a/apps/landing/src/app/(detail)/docs/MenuItem.tsx +++ b/apps/landing/src/app/(detail)/docs/MenuItem.tsx @@ -40,7 +40,7 @@ export function MenuItem(props: MenuItemProps) { bg={selected ? '$menuActive' : undefined} borderRadius="6px" gap="10px" - p="6px 10px" + p={['10px', null, '6px 10px']} > {selected && } {children} diff --git a/apps/landing/src/app/(detail)/docs/layout.tsx b/apps/landing/src/app/(detail)/docs/layout.tsx index db37239a..ec6daafd 100644 --- a/apps/landing/src/app/(detail)/docs/layout.tsx +++ b/apps/landing/src/app/(detail)/docs/layout.tsx @@ -10,9 +10,11 @@ export default function DetailLayout({ }>) { return ( <> - + - + + + {children} diff --git a/apps/landing/src/app/layout.tsx b/apps/landing/src/app/layout.tsx index 7557fc73..09edaa93 100644 --- a/apps/landing/src/app/layout.tsx +++ b/apps/landing/src/app/layout.tsx @@ -28,7 +28,7 @@ export default function RootLayout({ diff --git a/apps/landing/src/app/page.tsx b/apps/landing/src/app/page.tsx index 4edc13b5..aed38ecd 100644 --- a/apps/landing/src/app/page.tsx +++ b/apps/landing/src/app/page.tsx @@ -10,6 +10,59 @@ import { FeatureCard } from './FeatureCard' export default function HomePage() { return ( <> + + + + + + + + + + + diff --git a/apps/landing/src/components/Discord.tsx b/apps/landing/src/components/Discord.tsx index 9ccda5c2..c9833708 100644 --- a/apps/landing/src/components/Discord.tsx +++ b/apps/landing/src/components/Discord.tsx @@ -9,6 +9,8 @@ export function Discord() { alignItems="center" bgColor="$joinBg" bgImage={`url(${URL_PREFIX}/discord-bg.svg)`} + bgPositionY={['bottom', null, 'initial']} + bgSize={['contain', null, 'initial']} borderRadius="40px 40px 0px 40px" h="380px" justifyContent={[null, null, 'center']} diff --git a/apps/landing/src/components/Header/Menu.tsx b/apps/landing/src/components/Header/Menu.tsx index ac9e716a..836a6d46 100644 --- a/apps/landing/src/components/Header/Menu.tsx +++ b/apps/landing/src/components/Header/Menu.tsx @@ -16,8 +16,15 @@ export function Menu({ children, keyword }: MenuProps) { path.startsWith(`/${keyword}`) return ( {children} diff --git a/apps/landing/src/components/Header/MobMenu.tsx b/apps/landing/src/components/Header/MobMenu.tsx index e1ecb0d4..017ad013 100644 --- a/apps/landing/src/components/Header/MobMenu.tsx +++ b/apps/landing/src/components/Header/MobMenu.tsx @@ -19,7 +19,7 @@ export function MobMenu() { })} href={URL_PREFIX + '/docs/overview'} > - + Docs @@ -32,9 +32,9 @@ export function MobMenu() { })} href={URL_PREFIX + '/team'} > - + - Docs + Team diff --git a/apps/landing/src/components/Header/index.tsx b/apps/landing/src/components/Header/index.tsx index 0fb7169c..4f6e753f 100644 --- a/apps/landing/src/components/Header/index.tsx +++ b/apps/landing/src/components/Header/index.tsx @@ -1,4 +1,4 @@ -import { css, Flex } from '@devup-ui/react' +import { Box, css, Flex } from '@devup-ui/react' import Link from 'next/link' import { Suspense } from 'react' @@ -40,31 +40,44 @@ export function Header() { return ( - - - - } - > - - - - - - + + + + + + + + + + } + > + + + + + + + diff --git a/libs/extractor/src/lib.rs b/libs/extractor/src/lib.rs index f69431e9..d77911da 100644 --- a/libs/extractor/src/lib.rs +++ b/libs/extractor/src/lib.rs @@ -960,6 +960,32 @@ mod tests { } ) .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.tsx", + r#"import { css } from "@devup-ui/core"; +; +"#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); + + reset_class_map(); + assert_debug_snapshot!(extract( + "test.tsx", + r#"import { css } from "@devup-ui/core"; +; +"#, + ExtractOption { + package: "@devup-ui/core".to_string(), + css_file: None + } + ) + .unwrap()); } #[test] diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap new file mode 100644 index 00000000..cbb0c158 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-7.snap @@ -0,0 +1,8 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [], + code: ";\n", +} diff --git a/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap new file mode 100644 index 00000000..b8b0e873 --- /dev/null +++ b/libs/extractor/src/snapshots/extractor__tests__extract_static_css_class_name_props-8.snap @@ -0,0 +1,8 @@ +--- +source: libs/extractor/src/lib.rs +expression: "extract(\"test.tsx\",\nr#\"import { css } from \"@devup-ui/core\";\n;\n\"#,\nExtractOption\n{ package: \"@devup-ui/core\".to_string(), css_file: None }).unwrap()" +--- +ExtractOutput { + styles: [], + code: ";\n", +} diff --git a/libs/extractor/src/visit.rs b/libs/extractor/src/visit.rs index 9b64cb77..d6babb93 100644 --- a/libs/extractor/src/visit.rs +++ b/libs/extractor/src/visit.rs @@ -86,26 +86,41 @@ impl<'a> VisitMut<'a> for DevupVisitor<'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::>(); + if self.css_imports.contains_key(ident.name.as_str()) { + if call.arguments.is_empty() { + *it = Expression::StringLiteral(self.ast.alloc_string_literal( + SPAN, + "".to_string(), + None, + )); + } else if 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 { + 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, + )); + } + } + _ => { *it = Expression::StringLiteral(self.ast.alloc_string_literal( SPAN, "".to_string(), @@ -113,7 +128,6 @@ impl<'a> VisitMut<'a> for DevupVisitor<'a> { )); } } - _ => {} } } } diff --git a/packages/react/src/utils/css.ts b/packages/react/src/utils/css.ts index 420d1f26..17a8731f 100644 --- a/packages/react/src/utils/css.ts +++ b/packages/react/src/utils/css.ts @@ -1,13 +1,20 @@ import { DevupCommonProps } from '../types/props' -import type { DevupSelectorProps } from '../types/props/selector' +import type { + DevupSelectorProps, + DevupThemeSelectorProps, +} from '../types/props/selector' -export function css(props: DevupCommonProps & DevupSelectorProps): string +export function css( + props: DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps, +): string 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), + strings?: + | TemplateStringsArray + | (DevupCommonProps & DevupSelectorProps & DevupThemeSelectorProps), ): string { throw new Error('Cannot run on the runtime') }