fix(helper): [create-global-style] cannot apply style correctly

Author: akinoccc

core/helper/createGlobalStyle.ts

@@ -1,14 +1,13 @@
 import type { ExpressionType } from '@/utils'
 import { defineComponent, DefineSetupFnComponent, h } from 'vue'
-import { generateComponentName, generateUniqueName, insertExpressions } from '@/utils'
+import { generateComponentName, insertExpressions } from '@/utils'
 import { injectStyle } from '@/utils'
 
 export const createGlobalStyle = (styles: TemplateStringsArray, ...expressions: ExpressionType[]): DefineSetupFnComponent<any> => {
   return defineComponent(
     (_, { attrs }) => {
-      const golbalClassName = `global-${generateUniqueName()}`
       const cssStringsWithExpression = insertExpressions(styles, expressions)
-      injectStyle(golbalClassName, cssStringsWithExpression, attrs)
+      injectStyle('', cssStringsWithExpression, attrs)
       return () => {
         return h('div', { style: 'display: none' })
       }

core/utils/styleManagement.ts

@@ -49,6 +49,10 @@ export function removeStyle(className: string): void {
 
 export function injectStyle<T>(className: string, cssWithExpression: ExpressionType<T>[], context: Record<string, any>): void {
   const appliedCss = applyExpressions(cssWithExpression, context).join('')
-  const compiledCss = serialize(compile(`.${className}{${appliedCss}}`), middleware([prefixer, stringify]))
+  let cssString = appliedCss
+  if (className !== '') {
+    cssString = `.${className}{${appliedCss}}`
+  }
+  const compiledCss = serialize(compile(cssString), middleware([prefixer, stringify]))
   insert(className, compiledCss)
 }

example/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { styled, ThemeProvider, keyframes, withAttrs, css, cssClass } from '@vvibe/vue-styled-components'
+import { styled, ThemeProvider, keyframes, withAttrs, css, cssClass, createGlobalStyle } from '@vvibe/vue-styled-components'
 import Component from './Component.vue'
 import { ref } from 'vue'
 
@@ -120,10 +120,17 @@ const TestEmbedComponent = styled('div', { show: Boolean })`
 
 // console.log(testEmbedCss1, testEmbedCss2)
 const visible = ref(true)
+
+const Global = createGlobalStyle`
+  body {
+    display: flex
+  }
+`
 </script>
 
 <template>
   <ThemeProvider :theme="theme">
+    <Global />
     <div @click="visible = !visible">Test Remove</div>
     <StyledComp3 @click="update">12345</StyledComp3>
     <StyledComp4>12345</StyledComp4>