feat(core): [styled] support passing type def for props

core/helper/css.ts

@@ -1,5 +1,5 @@
 import { type ExpressionType, insertExpressions } from '@/utils'
 
-export function css(strings: TemplateStringsArray, ...interpolations: ExpressionType[]): ExpressionType[] {
-  return insertExpressions(strings, interpolations)
+export function css<T>(strings: TemplateStringsArray, ...interpolations: ExpressionType<T>[]): ExpressionType<T>[] {
+  return insertExpressions<T>(strings, interpolations)
 }

core/styled.ts

@@ -15,31 +15,34 @@ type ComponentCustomProps = PublicProps & {
 
 export type StyledComponentType = DefineSetupFnComponent<IProps, any, SlotsType, any, ComponentCustomProps>
 
-type StyledFactory = (styles: TemplateStringsArray, ...expressions: (ExpressionType | ExpressionType[])[]) => StyledComponentType
+type StyledFactory = <T = Record<string, any>>(
+  styles: TemplateStringsArray,
+  ...expressions: (ExpressionType<T> | ExpressionType<T>[])[]
+) => StyledComponentType
 type StyledComponent = StyledFactory & {
   attrs: <T extends Record<string, unknown>>(attrs: T) => StyledFactory
 }
-type Attrs = Record<string, unknown>
+type Attrs = Record<string, any>
 
 function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<string, unknown> = {}): StyledComponent {
   if (!isValidElementType(target)) {
     throw Error('The element is invalid.')
   }
   let attributes: Attrs = {}
-  const styledComponent: StyledComponent = function styledComponent(
+  function styledComponent<T>(
     styles: TemplateStringsArray,
-    ...expressions: (ExpressionType | ExpressionType[])[]
+    ...expressions: (ExpressionType<T> | ExpressionType<T>[])[]
   ): StyledComponentType {
-    const cssStringsWithExpression = insertExpressions(styles, expressions)
-    return createStyledComponent(cssStringsWithExpression)
+    const cssStringsWithExpression = insertExpressions<T>(styles, expressions)
+    return createStyledComponent<T>(cssStringsWithExpression)
   }
 
-  styledComponent.attrs = function <T extends Record<string, unknown>>(attrs: T): StyledComponent {
+  styledComponent.attrs = function <T extends Record<string, any>>(attrs: T): StyledComponent {
     attributes = attrs
     return styledComponent
   }
 
-  function createStyledComponent(cssWithExpression: ExpressionType[]): StyledComponentType {
+  function createStyledComponent<T>(cssWithExpression: ExpressionType<T>[]): StyledComponentType {
     let type: string = target
     if (isVueComponent(target)) {
       type = 'vue-component'
@@ -70,11 +73,11 @@ function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<
             theme,
             ...props,
           }
-          injectStyle(className, cssWithExpression, context)
+          injectStyle<T>(className, cssWithExpression, context)
         })
 
         onMounted(() => {
-          injectStyle(className, cssWithExpression, context)
+          injectStyle<T>(className, cssWithExpression, context)
         })
 
         // Return the render function

core/utils/injectStyle.ts

@@ -39,7 +39,7 @@ function insert(className: string, cssString: string) {
   insertedRuleMap[className] = cssTextNode
 }
 
-export function injectStyle(className: string, cssWithExpression: ExpressionType[], context: Record<string, any>): void {
+export function injectStyle<T>(className: string, cssWithExpression: ExpressionType<T>[], context: Record<string, any>): void {
   const appliedCss = applyExpressions(cssWithExpression, context).join('')
   insert(className, appliedCss)
 }

core/utils/insertExpressions.ts

@@ -1,8 +1,11 @@
-export type ExpressionType = ((props: Record<string, any>) => string | number) | string
+export type ExpressionType<T = Record<string, any>> = ((props: T) => string | number) | string
 
-export function insertExpressions(strings: TemplateStringsArray, expressions: (ExpressionType | ExpressionType[])[]): ExpressionType[] {
+export function insertExpressions<T>(
+  strings: TemplateStringsArray,
+  expressions: (ExpressionType<T> | ExpressionType<T>[])[],
+): ExpressionType<T>[] {
   return expressions.reduce(
-    (array: ExpressionType[], expression: ExpressionType[] | ExpressionType | string, index: number) => {
+    (array: ExpressionType<T>[], expression: ExpressionType<T>[] | ExpressionType<T> | string, index: number) => {
       return array.concat(expression, strings[index + 1])
     },
     [strings[0]],

docs/.vitepress/en.ts

@@ -30,7 +30,7 @@ function nav() {
     },
     {
       text: 'API',
-      link: '/api/core',
+      link: '/guide/api/core',
     },
   ]
 }
@@ -39,23 +39,31 @@ function sidebarGuide() {
   return [
     {
       text: 'Basic',
+      base: '/guide/basic/',
       items: [
-        { text: 'Quick Start', link: '/basic/quick-start' },
-        { text: 'Passed Props', link: '/basic/passed-props' },
-        { text: 'Extending Styles', link: '/basic/extending-styles' },
-        { text: 'Styling Any Component', link: '/basic/styling-any-component' },
-        { text: 'Animations', link: '/basic/animations' },
+        { text: 'Quick Start', link: 'quick-start' },
+        { text: 'Passing Props', link: 'passing-props' },
+        { text: 'Extending Styles', link: 'extending-styles' },
+        { text: 'Styling Any Component', link: 'styling-any-component' },
+        { text: 'Animations', link: 'animations' },
       ],
     },
     {
       text: 'Advances',
-      items: [{ text: 'Theming', link: '/advances/theming' }],
+      base: '/guide/advances/',
+      items: [
+        { text: 'Theming', link: 'theming' },
+        { text: 'Global Styles', link: 'global-style' },
+        { text: 'CSS Mixin', link: 'css-mixin' }
+      ],
     },
     {
       text: 'API Reference',
+      base: '/guide/api/',
       items: [
-        { text: 'Core', link: '/api/core' },
-        { text: 'Helper', link: '/api/helper' },
+        { text: 'Core', link: 'core' },
+        { text: 'Helper', link: 'helper' },
+        { text: 'Hook', link: 'hook' },
       ],
     },
   ]

docs/.vitepress/zh.ts

@@ -63,23 +63,31 @@ function sidebarGuide() {
   return [
     {
       text: '基础',
+      base: '/zh/guide/basic/',
       items: [
-        { text: '快速开始', link: '/basic/quick-start' },
-        { text: '传递 props', link: '/basic/passed-props' },
-        { text: '扩展样式', link: '/basic/extending-styles' },
-        { text: '样式化任意组件', link: '/basic/styling-any-component' },
-        { text: '动画', link: '/basic/animations' },
+        { text: '快速开始', link: 'quick-start' },
+        { text: '传递 props', link: 'passing-props' },
+        { text: '扩展样式', link: 'extending-styles' },
+        { text: '样式化任意组件', link: 'styling-any-component' },
+        { text: '动画', link: 'animations' },
       ],
     },
     {
       text: '进阶',
-      items: [{ text: '主题', link: '/advances/theming' }],
+      base: '/zh/guide/advances/',
+      items: [
+        { text: '主题', link: 'theming' },
+        { text: '全局样式', link: 'global-style' },
+        { text: '样式复用', link: 'css-mixin' }
+      ],
     },
     {
       text: 'API参考',
+      base: '/zh/guide/api/',
       items: [
-        { text: '核心', link: '/api/core' },
-        { text: '辅助', link: '/api/helper' },
+        { text: '核心', link: 'core' },
+        { text: '辅助', link: 'helper' },
+        { text: 'Hook', link: 'hook' },
       ],
     },
   ]

docs/guide/advances/css-mixin.md

@@ -0,0 +1,31 @@
+---
+outline: deep
+---
+
+# CSS Mixin
+
+We offer a function named `css` to generate css section and the return value can be used in styled function.
+
+Such as:
+
+:::demo
+```vue
+<script setup lang="ts">
+  import { styled, css } from '@vvibe/vue-styled-components'
+
+  const commonCSS = css`
+    padding: 10px 20px;
+    border-radius: 8px;
+    background: darkred;
+    color: #fff;
+  `
+  const StyledDiv = styled.div`
+    ${ commonCSS }
+  `
+</script>
+
+<template>
+  <StyledDiv> Test... </StyledDiv>
+</template>
+```
+:::

docs/guide/advances/global-style.md

@@ -0,0 +1,31 @@
+---
+outline: deep
+---
+
+# Global Styles
+
+You can use `createGlobalStyle` to generate global style.
+
+Such as:
+
+:::demo
+```vue
+<script setup lang="ts">
+  import { createGlobalStyle } from '@vvibe/vue-styled-components'
+
+  const GlobalStyle = createGlobalStyle`
+    .global-style-test {
+      padding: 10px 20px;
+      background: #ccc;
+    }
+  `
+</script>
+
+<template>
+  <GlobalStyle />
+  <div class="global-style-test">
+    Test...
+  </div>
+</template>
+```
+:::

docs/guide/api/hook.md

@@ -0,0 +1,25 @@
+---
+outline: deep
+---
+
+# Hook
+
+## `useStyledClassName`
+
+**Return**
+
+- `getStyledClassName`, `styledComponentInstance => string`
+- `styledClassNameMap`, `Record<string, string>`, `{[componentName]: className}`
+
+**Usage**
+
+```vue
+<script setup lang="ts">
+  import { styled, useStyledClassName } from '@vvibe/vue-styled-components'
+
+  const StyledDiv = styled.div`
+    background: #ccc;
+  `
+  console.log(useStyledClassName(StyledDiv)) // styled-xxx(unique id)
+</script>
+```

docs/package.json

@@ -9,7 +9,7 @@
     "docs:preview": "vitepress preview"
   },
   "devDependencies": {
-    "vitepress": "^1.0.2",
+    "vitepress": "^1.1.4",
     "vitepress-theme-demoblock": "^3.0.7"
   }
 }

docs/zh/guide/advances/css-mixin.md

@@ -0,0 +1,31 @@
+---
+outline: deep
+---
+
+# 样式复用
+
+我们提供了一个 `css` 函数用于创建 css 片段，该函数返回值可在 styled 中使用
+
+Such as:
+
+:::demo
+```vue
+<script setup lang="ts">
+  import { styled, css } from '@vvibe/vue-styled-components'
+
+  const commonCSS = css`
+    padding: 10px 20px;
+    border-radius: 8px;
+    background: darkred;
+    color: #fff;
+  `
+  const StyledDiv = styled.div`
+    ${ commonCSS }
+  `
+</script>
+
+<template>
+  <StyledDiv> Test... </StyledDiv>
+</template>
+```
+:::

docs/zh/guide/advances/global-style.md

@@ -0,0 +1,31 @@
+---
+outline: deep
+---
+
+# 全局样式
+
+你可以使用 `createGlobalStyle` 来创建全局样式.
+
+例如:
+
+:::demo
+```vue
+<script setup lang="ts">
+  import { createGlobalStyle } from '@vvibe/vue-styled-components'
+
+  const GlobalStyle = createGlobalStyle`
+    .global-style-test {
+      padding: 10px 20px;
+      background: #ccc;
+    }
+  `
+</script>
+
+<template>
+  <GlobalStyle />
+  <div class="global-style-test">
+    Test...
+  </div>
+</template>
+```
+:::

docs/zh/guide/api/hook.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Hook
+
+## `useStyledClassName`
+
+**返回**
+
+- `getStyledClassName`, `styledComponentInstance => string`
+- `styledClassNameMap`, `Record<string, string>`, `{[componentName]: className}`
+
+**用法**
+
+```vue
+<script setup lang="ts">
+  import { styled, useStyledClassName } from '@vvibe/vue-styled-components'
+
+  const StyledDiv = styled.div`
+    background: #ccc;
+  `
+  const { getStyledClassName } = useStyledClassName()
+  console.log(getStyledClassName(StyledDiv)) // styled-xxx(unique id)
+</script>
+```