Implement styled

Author: owjs3901

libs/extractor/src/lib.rs

@@ -7756,6 +7756,23 @@ keyframes({
             )
             .unwrap()
         ));
+
+        reset_class_map();
+        assert_debug_snapshot!(ToBTreeSet::from(
+            extract(
+                "test.tsx",
+                r#"import {styled} from '@devup-ui/core'
+        const StyledDiv = styled.aside<{ test: string }>({ bg: "red" })
+        "#,
+                ExtractOption {
+                    package: "@devup-ui/core".to_string(),
+                    css_dir: "@devup-ui/core".to_string(),
+                    single_css: false,
+                    import_main_css: false
+                }
+            )
+            .unwrap()
+        ));
     }
 
     // #[test]

libs/extractor/src/snapshots/extractor__tests__styled-11.snap

@@ -0,0 +1,18 @@
+---
+source: libs/extractor/src/lib.rs
+expression: "ToBTreeSet::from(extract(\"test.tsx\",\nr#\"import {styled} from '@devup-ui/core'\n        const StyledDiv = styled.aside<{ test: string }>({ bg: \"red\" })\n        \"#,\nExtractOption\n{\n    package: \"@devup-ui/core\".to_string(), css_dir:\n    \"@devup-ui/core\".to_string(), single_css: false, import_main_css: false\n}).unwrap())"
+---
+ToBTreeSet {
+    styles: {
+        Static(
+            ExtractStaticStyle {
+                property: "background",
+                value: "red",
+                level: 0,
+                selector: None,
+                style_order: None,
+            },
+        ),
+    },
+    code: "import \"@devup-ui/core/devup-ui-0.css\";\nconst StyledDiv = ({ style, className, ...rest }) => <aside {...rest} className={[\"a-a\", className].filter(Boolean).join(\" \")} style={style} />;\n",
+}

packages/react/src/__tests__/index.test.ts

@@ -15,6 +15,7 @@ describe('export', () => {
       css: expect.any(Function),
       globalCss: expect.any(Function),
       keyframes: expect.any(Function),
+      styled: expect.any(Function),
 
       ThemeScript: expect.any(Function),
 

packages/react/src/index.ts

@@ -21,4 +21,5 @@ export { globalCss } from './utils/global-css'
 export { initTheme } from './utils/init-theme'
 export { keyframes } from './utils/keyframes'
 export { setTheme } from './utils/set-theme'
+export { styled } from './utils/styled'
 export type { CustomColors } from 'csstype-extra'

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

@@ -0,0 +1,9 @@
+import { styled } from '../styled'
+
+describe('globalCss', () => {
+  it('should return className', () => {
+    expect(() => styled.div`virtual-css`).toThrowError(
+      'Cannot run on the runtime',
+    )
+  })
+})

packages/react/src/utils/styled.ts

@@ -0,0 +1,23 @@
+import type { DevupPropsWithTheme } from '../types/props'
+
+interface StyledCreator {
+  <T extends React.ElementType | React.ComponentType>(
+    tag: T,
+  ): (
+    strings: TemplateStringsArray | DevupPropsWithTheme,
+  ) => (props: React.ComponentProps<T>) => React.ReactElement
+}
+
+type Styled = StyledCreator & {
+  [T in keyof React.JSX.IntrinsicElements]: <P extends React.ComponentProps<T>>(
+    strings: TemplateStringsArray | DevupPropsWithTheme,
+  ) => (props: P) => React.ReactElement
+}
+
+export const styled: Styled = new Proxy(Function.prototype, {
+  get() {
+    return () => {
+      throw new Error('Cannot run on the runtime')
+    }
+  },
+}) as any