From fa57d0c653a2edcb897cf86d6b2e3889cc2d8330 Mon Sep 17 00:00:00 2001
From: akinocccc <akinochen@foxmail.com>
Date: Thu, 23 May 2024 23:08:29 +0800
Subject: [PATCH 1/3] feat(helper): [cssClass] add function to generate common
 class

---
 core/helper/css.ts      |  5 ++++-
 core/helper/cssClass.ts |  9 +++++++++
 core/helper/index.ts    |  1 +
 example/App.vue         | 14 +++++++++++++-
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 core/helper/cssClass.ts

diff --git a/core/helper/css.ts b/core/helper/css.ts
index 7540bf0..8b13a05 100644
--- a/core/helper/css.ts
+++ b/core/helper/css.ts
@@ -1,5 +1,8 @@
 import { type ExpressionType, insertExpressions } from '@/utils'
 
-export function css<T>(strings: TemplateStringsArray, ...interpolations: ExpressionType<T>[]): ExpressionType<T>[] {
+export function css<T = any>(
+  strings: TemplateStringsArray,
+  ...interpolations: (ExpressionType<T> | ExpressionType<T>[])[]
+): ExpressionType<T>[] {
   return insertExpressions<T>(strings, interpolations)
 }
diff --git a/core/helper/cssClass.ts b/core/helper/cssClass.ts
new file mode 100644
index 0000000..adcb878
--- /dev/null
+++ b/core/helper/cssClass.ts
@@ -0,0 +1,9 @@
+import { ExpressionType, generateClassName, insertExpressions } from '@/utils'
+import { injectStyle } from '@/utils/injectStyle'
+
+export function cssClass(cssStrings: TemplateStringsArray, ...interpolations: (ExpressionType<any> | ExpressionType<any>[])[]): string {
+  const className = generateClassName()
+  injectStyle(className, insertExpressions(cssStrings, interpolations), {})
+
+  return className
+}
diff --git a/core/helper/index.ts b/core/helper/index.ts
index 4475fd1..3c7c65d 100644
--- a/core/helper/index.ts
+++ b/core/helper/index.ts
@@ -3,3 +3,4 @@ export * from './is'
 export * from './create-global-style'
 export * from './keyframes'
 export * from './css'
+export * from './cssClass'
diff --git a/example/App.vue b/example/App.vue
index 355a184..6888ff6 100644
--- a/example/App.vue
+++ b/example/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { styled, ThemeProvider, keyframes, withAttrs, css } from '@vvide/vue-styled-components'
+import { styled, ThemeProvider, keyframes, withAttrs, css, cssClass } from '@vvide/vue-styled-components'
 import Component from './Component.vue'
 import { ref } from 'vue'
 
@@ -86,6 +86,17 @@ const StyledLink = styled.a`
 const StyledBlueLink = styled(StyledLink, { color: String })`
   color: ${(props: any) => props.color};
 `
+
+const commonCSS = css`
+  padding: 10px 20px;
+  border-radius: 8px;
+`
+
+const commonClass = cssClass`
+  ${commonCSS}
+  color: #fff;
+  background-color: red;
+`
 </script>
 
 <template>
@@ -97,6 +108,7 @@ const StyledBlueLink = styled(StyledLink, { color: String })`
     <StyledComp7 color="blue">123</StyledComp7>
     <LinkButton as="a" href="#">Link Button</LinkButton>
     <StyledBlueLink :color="color" href="#" @click="update">Styled Link</StyledBlueLink>
+    <div :class="commonClass">test common class</div>
   </ThemeProvider>
 </template>
 

From 685a4976021dde81a54d1e2e1ce22c10635d28d7 Mon Sep 17 00:00:00 2001
From: akinocccc <akinochen@foxmail.com>
Date: Thu, 23 May 2024 23:10:18 +0800
Subject: [PATCH 2/3] docs(api): [helper] add desc for `cssClass`

---
 docs/guide/api/helper.md    | 30 ++++++++++++++++++++++++++++++
 docs/zh/guide/api/helper.md | 33 +++++++++++++++++++++++++++++++++
 2 files changed, 63 insertions(+)

diff --git a/docs/guide/api/helper.md b/docs/guide/api/helper.md
index a272276..2041976 100644
--- a/docs/guide/api/helper.md
+++ b/docs/guide/api/helper.md
@@ -105,6 +105,36 @@ A function to generate CSS from a template literal with interpolations.
 </template>
 ```
 
+## `cssClass`
+
+A function generating css and return a class name.
+
+**Augments**
+
+- CSS，`TemplateStringsArray`，`必需`
+
+**Return**
+
+- Class name，`string`
+
+**Usage**
+
+```vue
+<script setup lang="ts">
+  import { cssClass } from '@vvibe/vue-styled-components'
+
+  const commonClass = cssClass`
+    padding: 20px;
+    color: #fff;
+    background-color: red;
+  `
+</script>
+
+<template>
+  <div :class="commonClass">Test</div>
+</template>
+```
+
 ## `withAttrs`
 
 A function to add attributes to a `ComponentInstance` or `HTMLElements`.
diff --git a/docs/zh/guide/api/helper.md b/docs/zh/guide/api/helper.md
index 53e4978..21d49a3 100644
--- a/docs/zh/guide/api/helper.md
+++ b/docs/zh/guide/api/helper.md
@@ -105,6 +105,39 @@ outline: deep
 </template>
 ```
 
+
+
+## `cssClass`
+
+一个使用模板字符串生成 CSS 并返回 class 类名的函数。
+
+**参数**
+
+- 模板字符串，`TemplateStringsArray`，`必需`
+
+**返回值**
+
+- class 名称，`string`
+
+**用法**
+
+```vue
+
+<script setup lang="ts">
+  import { cssClass } from '@vvibe/vue-styled-components'
+
+  const commonClass = cssClass`
+    padding: 20px;
+    color: #fff;
+    background-color: red;
+  `
+</script>
+
+<template>
+  <div :class="commonClass">Test</div>
+</template>
+```
+
 ## `withAttrs`
 
 一个用于向 `ComponentInstance` 或 `HTMLElements` 添加 `attributes` 的函数。

From d3cc3dd4a5fe3e105661abf2b1aae30854aa38a7 Mon Sep 17 00:00:00 2001
From: akinocccc <akinochen@foxmail.com>
Date: Thu, 23 May 2024 23:10:40 +0800
Subject: [PATCH 3/3] docs(advance): [css-mixin] add desc for `cssClass`

---
 docs/guide/advances/css-mixin.md    | 27 +++++++++++++++++++++++++++
 docs/zh/guide/advances/css-mixin.md | 27 +++++++++++++++++++++++++++
 2 files changed, 54 insertions(+)

diff --git a/docs/guide/advances/css-mixin.md b/docs/guide/advances/css-mixin.md
index 5a17c41..5ab1d59 100644
--- a/docs/guide/advances/css-mixin.md
+++ b/docs/guide/advances/css-mixin.md
@@ -29,3 +29,30 @@ Such as:
 </template>
 ```
 :::
+
+# Common CSS Class
+
+You can also use `cssClass` to generate a common css class. The function will inject your css and return a class name
+
+:::demo
+```vue
+<script setup lang="ts">
+  import { css, cssClass } from '@vvibe/vue-styled-components'
+  
+  const commonCSS = css`
+    padding: 10px 20px;
+    border-radius: 8px;
+  `
+
+  const commonClass = cssClass`
+    ${commonCSS}
+    color: #fff;
+    background-color: red;
+  `
+</script>
+
+<template>
+  <div :class="commonClass">Test</div>
+</template>
+```
+:::
diff --git a/docs/zh/guide/advances/css-mixin.md b/docs/zh/guide/advances/css-mixin.md
index 0ca24c0..1423537 100644
--- a/docs/zh/guide/advances/css-mixin.md
+++ b/docs/zh/guide/advances/css-mixin.md
@@ -29,3 +29,30 @@ Such as:
 </template>
 ```
 :::
+
+# 公共 CSS 类
+
+你还可以使用 `cssClass` 来生成一个可公用的样式类，该函数会创建你传入的 CSS 并返回一个类名。
+
+:::demo
+```vue
+<script setup lang="ts">
+  import { css, cssClass } from '@vvibe/vue-styled-components'
+  
+  const commonCSS = css`
+    padding: 10px 20px;
+    border-radius: 8px;
+  `
+
+  const commonClass = cssClass`
+    ${commonCSS}
+    color: #fff;
+    background-color: red;
+  `
+</script>
+
+<template>
+  <div :class="commonClass">Test</div>
+</template>
+```
+:::