docs(advance): add description for nest css and auto prefix

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)

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;
+// }
+```