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'

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>