Merge pull request #20 from v-vibe/feat/css-compiler

feat: auto-add vendor prefixes to CSS styles and add support for nested CSS in legacy browsers

Author: akinoccc

README.md

@@ -46,7 +46,7 @@
 
 ✅ Add or override attrs
 
-✅ Support nesting css. (web only: https://drafts.csswg.org/css-nesting/#nesting)
+✅ Support nesting css.
 
 ## 📖Documentation
 
@@ -180,4 +180,7 @@ const StyledDiv = styled.div`
 
 <br>
 
-And thanks [styled-components](https://github.com/styled-components).
+And thanks 
+
+- [styled-components](https://github.com/styled-components).
+- [stylis](https://github.com/thysultan/stylis)

commitlint.config.ts

@@ -1,3 +1,6 @@
 export default {
   extends: ['@commitlint/config-conventional'],
+  rules: {
+    'header-max-length': [0, 'always', 125],
+  },
 }

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/styled.ts

@@ -16,14 +16,14 @@ import { type ExpressionType, generateClassName, generateComponentName, insertEx
 import { isStyledComponent, isValidElementType, isVueComponent } from '@/helper'
 
 interface IProps {
-  as?: SupportedHTMLElements
+  as?: PropType<SupportedHTMLElements>
 }
 
 type ComponentCustomProps = PublicProps & {
   styled: boolean
 }
 
-export type StyledComponentType = DefineSetupFnComponent<IProps, any, SlotsType, any, ComponentCustomProps>
+export type StyledComponentType<P = any> = DefineSetupFnComponent<IProps & P, any, SlotsType, IProps & P, ComponentCustomProps>
 
 type StyledFactory = <T = Record<string, any>>(
   styles: TemplateStringsArray,
@@ -34,7 +34,7 @@ type StyledComponent = StyledFactory & {
 }
 type Attrs = Record<string, any>
 
-function baseStyled(target: string | InstanceType<any>, propsDefinition: Record<string, unknown> = {}): StyledComponent {
+function baseStyled<P extends Record<string, any>>(target: string | InstanceType<any>, propsDefinition?: P & IProps): StyledComponent {
   if (!isValidElementType(target)) {
     throw Error('The element is invalid.')
   }

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

docs/.vitepress/en.ts

@@ -54,7 +54,9 @@ function sidebarGuide() {
       items: [
         { text: 'Theming', link: 'theming' },
         { text: 'Global Styles', link: 'global-style' },
-        { text: 'CSS Mixin', link: 'css-mixin' }
+        { text: 'CSS Mixin', link: 'css-mixin' },
+        { text: 'Nest CSS', link: 'nest-css' },
+        { text: 'Auto Prefix', link: 'auto-prefix' },
       ],
     },
     {

docs/.vitepress/zh.ts

@@ -78,7 +78,9 @@ function sidebarGuide() {
       items: [
         { text: '主题', link: 'theming' },
         { text: '全局样式', link: 'global-style' },
-        { text: '样式复用', link: 'css-mixin' }
+        { text: '样式复用', link: 'css-mixin' },
+        { text: '嵌套CSS', link: 'nest-css' },
+        { text: 'CSS私有前缀', link: 'auto-prefix' },
       ],
     },
     {

docs/guide/advances/auto-prefix.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# Auto Prefix Added
+
+This feature is a part of the `@vvibe/vue-styled-components` package. It automatically adds vendor prefixes to CSS rules based on the browser support you specify. This ensures that your CSS rules are compatible with the most widely used browsers, which can help improve the compatibility of your website.
+
+The `@vvibe/vue-styled-components` package uses the `stylis` library to add vendor prefixes.
+
+Here's an example:
+
+```js
+import { styled } from '@vvibe/vue-styled-components';
+const StyledDiv = styled.div`
+  display: flex;
+}`
+
+// output:
+// .styled-div {
+//   display: -webkit-box;
+//   display: -webkit-flex;
+//   display: -ms-flexbox;
+//   display: flex;
+// }
+```

docs/guide/advances/nest-css.md

@@ -0,0 +1,35 @@
+---
+outline: deep
+---
+
+# Nest CSS
+
+In Vue Styled Components, you can write CSS in the same way as `less` or `sass`. `@vvibe/vue-styled-components` is based on `stylis` compiling CSS to basic css, so you needn't worry about the compatibility.
+
+For example, you can write CSS like this:
+
+```js
+import { styled } from '@vvibe/vue-styled-components';
+const StyledDiv = styled.div`
+  width: 100px;
+  height: 100px;
+  &:hover {
+    background-color: #000;
+    &:active {
+      background-color: #fff;
+    }
+  }
+}`
+
+// output:
+// .styled-xxx {
+//     width: 100px;
+//     height: 100px;
+// }
+// .styled-xxx:hover {
+//     background-color: #000;
+// }
+// .styled-xxx:hover:active {
+//     background-color: #fff;
+// }
+```

docs/zh/guide/advances/auto-prefix.md

@@ -0,0 +1,26 @@
+---
+outline: deep
+---
+
+# 自动添加浏览器私有前缀
+
+The `@vvibe/vue-styled-components` package uses the `stylis` library to add vendor prefixes.
+
+这是 `@vvibe/vue-styled-components` 包的一部分。它会自动为 CSS 规则添加浏览器私有前缀。这可以确保你的 CSS 规则在最常见的浏览器中兼容，这有助于提高你的网站兼容性。
+
+`@vvibe/vue-styled-components` 使用 `stylis` 库来编译以及添加浏览器私有前缀。
+
+```js
+import { styled } from '@vvibe/vue-styled-components';
+const StyledDiv = styled.div`
+  display: flex;
+}`
+
+// output:
+// .styled-div {
+//   display: -webkit-box;
+//   display: -webkit-flex;
+//   display: -ms-flexbox;
+//   display: flex;
+// }
+```

docs/zh/guide/advances/nest-css.md

@@ -0,0 +1,38 @@
+---
+outline: deep
+---
+
+# 嵌套 CSS
+
+你可以像 `less`, `sass` 一样使用嵌套 CSS。 `@vvibe/vue-styled-components` 并非使用最新的CSS规范([nest css](https://drafts.csswg.org/css-nesting/#nesting))来实现，而是使用了 `stylis` 编译为最基础的 CSS，因此你不需要担心其兼容性问题。
+
+如下：
+
+```js
+import { styled } from '@vvibe/vue-styled-components';
+const StyledDiv = styled.div`
+  width: 100px;
+  height: 100px;
+  background-color: #ccc;
+  color: #000;
+  &:hover {
+    background-color: #000;
+    color: #fff;
+    &:active {
+      background-color: #fff;
+    }
+  }
+}`
+
+// output:
+// .styled-xxx {
+//     width: 100px;
+//     height: 100px;
+// }
+// .styled-xxx:hover {
+//     background-color: #000;
+// }
+// .styled-xxx:hover:active {
+//     background-color: #fff;
+// }
+```

example/App.vue

@@ -1,5 +1,5 @@
 <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'
 
@@ -25,6 +25,7 @@ const update = () => {
 }
 
 const StyledComp3 = styled(Component)`
+  position: sticky;
   background: ${(props) => props.theme.primary};
 `
 const StyledComp4 = styled.div`
@@ -118,10 +119,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 +136,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"
   }
 }