feat: implement automatic addition of vendor prefixes to CSS styles and add support for nested CSS in legacy browsers(#19)

Author: akinoccc

core/helper/createGlobalStyle.ts

@@ -1,13 +1,14 @@
 import type { ExpressionType } from '@/utils'
 import { defineComponent, DefineSetupFnComponent, h } from 'vue'
-import { generateComponentName, insertExpressions } from '@/utils'
+import { generateComponentName, generateUniqueName, 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('global', cssStringsWithExpression, attrs)
+      injectStyle(golbalClassName, cssStringsWithExpression, attrs)
       return () => {
         return h('div', { style: 'display: none' })
       }

core/utils/styleManagement.ts

@@ -1,4 +1,5 @@
 import { applyExpressions, ExpressionType } from '@/utils/index'
+import { compile, middleware, prefixer, serialize, stringify } from 'stylis'
 
 const MAX_SIZE = 65536
 
@@ -24,11 +25,7 @@ function insert(className: string, cssString: string) {
   }
 
   const ruleNode = insertedRuleMap[className]
-  let rule = `.${className} { ${cssString} }`
-
-  if (className === 'global' || /^kf-.+/.test(className)) {
-    rule = cssString
-  }
+  const rule = cssString
 
   if (ruleNode) {
     ruleNode.data = rule
@@ -42,7 +39,7 @@ function insert(className: string, cssString: string) {
 export function removeStyle(className: string): void {
   for (const tag of tags) {
     for (const node of tag.childNodes) {
-      if (node.nodeValue?.includes(className)) {
+      if (node.nodeValue?.startsWith(`.${className}`)) {
         node.remove()
         break
       }
@@ -52,5 +49,6 @@ 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('')
-  insert(className, appliedCss)
+  const compiledCss = serialize(compile(`.${className}{${appliedCss}}`), middleware([prefixer, stringify]))
+  insert(className, compiledCss)
 }

example/App.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import { styled, ThemeProvider, keyframes, withAttrs, css, cssClass } from '@vvide/vue-styled-components'
+import { styled, ThemeProvider, keyframes, withAttrs, css, cssClass } from '@vvibe/vue-styled-components'
 import Component from './Component.vue'
 import { ref } from 'vue'
+import { IconInner } from './Test'
 
 const theme = ref({ primary: 'green', error: 'red' })
 
@@ -25,6 +26,7 @@ const update = () => {
 }
 
 const StyledComp3 = styled(Component)`
+  position: sticky;
   background: ${(props) => props.theme.primary};
 `
 const StyledComp4 = styled.div`
@@ -118,10 +120,12 @@ const TestEmbedComponent = styled('div', { show: Boolean })`
 `
 
 // console.log(testEmbedCss1, testEmbedCss2)
+const visible = ref(true)
 </script>
 
 <template>
   <ThemeProvider :theme="theme">
+    <div @click="visible = !visible">Test Remove</div>
     <StyledComp3 @click="update">12345</StyledComp3>
     <StyledComp4>12345</StyledComp4>
     <StyledComp5>12345</StyledComp5>
@@ -133,6 +137,10 @@ const TestEmbedComponent = styled('div', { show: Boolean })`
 
     <TestEmbedComponent :show="show"> White </TestEmbedComponent>
     <TestEmbedComponent :show="!show" @click="show = !show"> Blue </TestEmbedComponent>
+
+    <IconInner color="red" size="55"> 666 </IconInner>
+
+    <BlueButton v-if="visible" />
   </ThemeProvider>
 </template>
 

package.json

@@ -35,14 +35,15 @@
     "prepare": "husky",
     "release": "semantic-release"
   },
-  "dependencies": {
+  "peerDependencies": {
     "vue": "^3.4.21"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.2.1",
     "@commitlint/config-conventional": "^19.1.0",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
+    "@types/stylis": "^4.2.6",
     "@typescript-eslint/eslint-plugin": "^7.4.0",
     "@typescript-eslint/parser": "^7.4.0",
     "@vitejs/plugin-vue": "^5.0.4",
@@ -70,9 +71,7 @@
     "access": "public",
     "provenance": true
   },
-  "pnpm": {
-    "overrides": {
-      "vue-template-compiler@>=2.0.0 <3.0.0": ">=3.0.0"
-    }
+  "dependencies": {
+    "stylis": "^4.3.2"
   }
 }

pnpm-lock.yaml

@@ -26,7 +26,7 @@
       "@/*": [
         "./core/*"
       ],
-      "@vvide/vue-styled-components": [
+      "@vvibe/vue-styled-components": [
         "./core"
       ]
     },

tsconfig.json

@@ -19,7 +19,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@/': new URL('./core/', import.meta.url).pathname,
-      '@vvide/vue-styled-components': new URL('./core/', import.meta.url).pathname,
+      '@vvibe/vue-styled-components': new URL('./core/', import.meta.url).pathname,
     },
     extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue', '.less'],
   },