docs: fix demo not display

Author: akinoccc

docs/demo/Link.vue

@@ -1,3 +1,3 @@
 <template>
-  <a href="#">This is a link</a>
+  <a href="#"><slot /></a>
 </template>

docs/demo/StyledLink.vue

@@ -34,7 +34,7 @@ const StyledLink = styled(Link)`
 </script>
 
 <template>
-  <StyledLink />
+  <StyledLink>This is a dark red link</StyledLink>
 </template>
 ```
 
@@ -49,15 +49,20 @@ You can also style styled components. For example, with `StyledLink`, using `sty
 ```vue
 <script setup lang="ts">
 import { styled } from '@vue3-styled-components/package'
-import StyledLink from '/demo/StyledLink.vue'
+
+const StyledLink = styled.a`
+  color: darkred !important;
+`
 
 const StyledBlueLink = styled(StyledLink)`
   color: blue !important;
 `
+
+console.log(StyledLink, StyledBlueLink)
 </script>
 
 <template>
-  <StyledBlueLink />
+  <StyledBlueLink>This is a blue link</StyledBlueLink>
 </template>
 ```
 

docs/guide/styling-any-component.md

@@ -1,4 +1,3 @@
 export * from './styled'
 export * from './providers'
-export { createGlobalStyle } from './injectStyle'
 export * from './keyframes'

package/index.ts

@@ -1,17 +1,46 @@
 import { applyExpressions, ExpressionType, insertExpressions } from '@/utils'
 
-export function injectStyle(className: string, cssWithExpression: (string | ExpressionType)[], context: Record<string, any>) {
-  const appliedCss = applyExpressions(cssWithExpression, context).join('')
+const MAX_SIZE = 65536
 
-  // Create a style tag and append it to the head
-  const styleTag = document.createElement('style')
-  styleTag.innerHTML = `.${className} { ${appliedCss} }`
-  document.head.appendChild(styleTag)
+let ctx: number = 0
+const insertedRuleMap: Record<string, Text> = {}
+const tags: HTMLStyleElement[] = []
+
+function createStyleTag(): HTMLStyleElement {
+  const style = document.createElement('style')
+  document.head.appendChild(style)
+  tags.push(style)
+  return style
 }
 
-export function createGlobalStyle(css: TemplateStringsArray, ...expressions: string[]) {
-  // Create a style tag and append it to the head
-  const styleTag = document.createElement('style')
-  styleTag.innerHTML = insertExpressions(css, expressions).join('')
-  document.head.appendChild(styleTag)
+function insert(className: string, cssString: string) {
+  ctx++
+
+  let styleTag = tags[tags.length - 1]
+
+  if (!styleTag || ctx >= MAX_SIZE) {
+    styleTag = createStyleTag()
+    ctx = 0
+  }
+
+  const ruleNode = insertedRuleMap[className]
+  let rule = `.${className} { ${cssString} }`
+
+  if (className === 'global' || className === 'keyframes') {
+    rule = cssString
+  }
+
+  if (ruleNode) {
+    ruleNode.data = rule
+    return
+  }
+  const cssTextNode = document.createTextNode(rule)
+  styleTag.appendChild(cssTextNode)
+  insertedRuleMap[className] = cssTextNode
+}
+
+export function injectStyle(className: string, cssWithExpression: (string | ExpressionType)[], context: Record<string, any>) {
+  const appliedCss = applyExpressions(cssWithExpression, context).join('')
+
+  insert(className, appliedCss)
 }

package/injectStyle.ts

@@ -1,12 +1,18 @@
-import { createGlobalStyle } from '@/injectStyle'
+import { injectStyle } from '@/injectStyle'
 import { generateUniqueName } from '@/utils'
 
 export function keyframes(kfString: TemplateStringsArray) {
   const keyframeName = `kf-${generateUniqueName()}`
-  createGlobalStyle`
-      @keyframes ${keyframeName} {
-      ${kfString.join('')}
-      }
-  `
+  injectStyle(
+    'keyframes',
+    [
+      `
+        @keyframes ${keyframeName} {
+          ${kfString.join('')}
+        }
+      `
+    ],
+    {}
+  )
   return keyframeName
 }

package/keyframes.ts

@@ -65,6 +65,8 @@ function baseStyled(target: string | InstanceType<any>, propsFromFactory: Record
       type = 'styled-component'
     }
 
+    // Generate a unique class name
+    const className = generateClassName()
     const componentName = generateComponentName(type)
     return defineComponent(
       (props) => {
@@ -75,8 +77,6 @@ function baseStyled(target: string | InstanceType<any>, propsFromFactory: Record
           ...props
         }
 
-        // Generate a unique class name
-        const className = generateClassName()
         myAttrs.class = className
 
         watchEffect(() => {
@@ -120,6 +120,23 @@ function baseStyled(target: string | InstanceType<any>, propsFromFactory: Record
   return styledComponent
 }
 
+const createGlobalStyle = (styles: TemplateStringsArray, ...expressions: ExpressionsType) => {
+  return defineComponent(
+    (_, { attrs }) => {
+      const cssStringsWithExpression = insertExpressions(styles, expressions)
+      injectStyle('global', cssStringsWithExpression, attrs)
+      return () => {
+        return h('div', { style: 'display: none' })
+      }
+    },
+    {
+      name: 'global-style',
+      inheritAttrs: true,
+      styled: true
+    } as any
+  )
+}
+
 /** Append all the supported HTML elements to the styled properties */
 const styled = baseStyled as typeof baseStyled & {
   [E in SupportedHTMLElements]: StyledComponent
@@ -129,4 +146,4 @@ domElements.forEach((domElement: SupportedHTMLElements) => {
   styled[domElement] = baseStyled(domElement)
 })
 
-export { styled }
+export { styled, createGlobalStyle }