Merge pull request #12 from v-vibe/feat/css-class

feat(helper): [cssClass] add function to generate common class

Author: akinoccc

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)
 }

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
+}

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'

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>
+```
+:::

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`.

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>
+```
+:::

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` 的函数。

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>