chore: update README and test files for UnoCSS conversion details and styling improvements

Author: Simon-He95

README.md

@@ -2,7 +2,7 @@
 <img height="200" src="./assets/kv.png" alt="to unocss">
 </p>
 <p align="center"> English | <a href="./README_zh.md">简体中文</a></p>
-This library is to convert css to unocss. <a href="https://github.com/unocss/unocss">unocss</a> can reuse styles better to reduce the packaging volume, which can be converted as a performance optimization method, and it can also make it easier for old projects to upgrade to unocss. If you use <a href="https://tailwindcss.com/">tailwindcss</a>, you can try <a href="https://github.com/Simon-He95/transformToTailwindcss">transformToTailwindcss</a>.
+This library is to convert *css*、*inline-style* to UnoCSS. <a href="https://github.com/unocss/unocss">UnoCSS</a> can reuse styles better to reduce the packaging volume, which can be converted as a performance optimization method, and it can also make it easier for old projects to upgrade to UnoCSS. If you use <a href="https://tailwindcss.com/">tailwindcss</a>, you can try <a href="https://github.com/Simon-He95/transformToTailwindcss">transformToTailwindcss</a>.
 
 ## 📦 Install
 

README_zh.md

@@ -3,7 +3,7 @@
 </p>
 <p align="center"> <a href="./README.md">English</a> | 简体中文</p>
 
-这个库就是把 css 转成 unocss 的。 [unocss](https://github.com/unocss/unocss) 可以更好的复用样式减少打包体积，可以转化为一种性能优化的方式，也可以让老项目更容易升级到 unocss。如果你是 [tailwindcss](https://tailwindcss.com/) 的使用者，可以尝试一下 <a href="https://github.com/Simon-He95/transformToTailwindcss">transformToTailwindcss</a>.
+这个库可以把 _css_、_inline-style_ 转成 UnoCSS 的。 [UnoCSS](https://github.com/unocss/unocss) 可以更好的复用样式减少打包体积，可以转化为一种性能优化的方式，也可以让老项目更容易升级到 UnoCSS。如果你是 [tailwindcss](https://tailwindcss.com/) 的使用者，可以尝试一下 <a href="https://github.com/Simon-He95/transformToTailwindcss">transformToTailwindcss</a>.
 
 ## 📦 Install
 

test/__snapshots__/transformCode.test.ts.snap

@@ -688,7 +688,7 @@ exports[`demo3 vue test > demo2.vue 1`] = `
     <div class="add-node-btn select-none w-240px px-0 pt-20px pb-32px flex  justify-center shrink-0  grow-1">
       <div class="add-node-popover-body flex">
         <a class="add-node-popover-item approver mr-10px cursor-pointer text-center flex-1 text-[#191f25]! [&:hover_.item-wrapper]-bg-[#3296fa] [&:hover_.item-wrapper]-shadow-[0_10px_20px_0_rgba(50,150,250,0.4)] [&:hover_.iconfont]-text-[#fff] [&:active_.item-wrapper]-shadow-[none] [&:active_.item-wrapper]-bg-[#eaeaea] [&:active_.iconfont]-text-inherit" @click="addType(1)">
-          <div class="item-wrapper select-none inline-block w-80px h-80px mb-5px bg-[#fff] border-1px border-solid border-[#e2e2e2] border-rd-[50%] transition-all transition-duration-0.3s transition-ease-[cubic-bezier(0.645,0.045,0.355,1)] text-[#ff943e]">
+          <div class="item-wrapper select-none inline-block w-80px h-80px mb-5px bg-[#fff] border-1px border-solid border-[#e2e2e2] rounded-[50%] transition-all transition-duration-0.3s transition-ease-[cubic-bezier(0.645,0.045,0.355,1)] text-[#ff943e]">
             <span class="iconfont text-35px lh-80px"></span>
           </div>
           <p>审批人</p>
@@ -876,7 +876,7 @@ exports[`single demo styleMaxWidth.tsx > vue.tsx 1`] = `
   <div class="red">
     nihao
   </div>
-  <div class="yellow max-w-[calc(100%_-_50px)] bg-[rgba(255,62,0,0.1)]">
+  <div class="yellow max-w-[calc(100%-50px)] bg-[rgba(255,62,0,0.1)]">
     hi
   </div>
 </template>
@@ -1792,7 +1792,7 @@ watch(
     <div class="add-node-btn select-none w-240px px-0 pt-20px pb-32px flex  justify-center shrink-0  grow-1">
       <div class="add-node-popover-body flex">
         <a class="add-node-popover-item approver mr-10px cursor-pointer text-center flex-1 text-[#191f25]! [&:hover_.item-wrapper]-bg-[#3296fa] [&:hover_.item-wrapper]-shadow-[0_10px_20px_0_rgba(50,150,250,0.4)] [&:hover_.iconfont]-text-[#fff] [&:active_.item-wrapper]-shadow-[none] [&:active_.item-wrapper]-bg-[#eaeaea] [&:active_.iconfont]-text-inherit" @click="addType(1)">
-          <div class="item-wrapper select-none inline-block w-80px h-80px mb-5px bg-[#fff] border-1px border-solid border-[#e2e2e2] border-rd-[50%] transition-all transition-duration-0.3s transition-ease-[cubic-bezier(0.645,0.045,0.355,1)] text-[#ff943e]">
+          <div class="item-wrapper select-none inline-block w-80px h-80px mb-5px bg-[#fff] border-1px border-solid border-[#e2e2e2] rounded-[50%] transition-all transition-duration-0.3s transition-ease-[cubic-bezier(0.645,0.045,0.355,1)] text-[#ff943e]">
             <span class="iconfont text-35px lh-80px"></span>
           </div>
           <p>审批人</p>
@@ -1956,7 +1956,7 @@ body {
   <div class="red">
     nihao
   </div>
-  <div class="yellow max-w-[calc(100%_-_50px)] bg-[rgba(255,62,0,0.1)]">
+  <div class="yellow max-w-[calc(100%-50px)] bg-[rgba(255,62,0,0.1)]">
     hi
   </div>
 </template>

test/transformSvelte.test.ts

@@ -13,7 +13,7 @@ describe('accent', () => {
         
       <form class="pt-1rem" on:submit|preventDefault={go}>
       	<input bind:this={input} bind:value={name} type="text" aria-label="What's your name?" placeholder="What's your name?">
-      	<button class="font-[inherit] font-size-inherit px-2em py-1em text-[#ff3e00] bg-[rgba(255,62,0,0.1)] border-rd-2em border-2px border-solid border-[rgba(255,62,0,0)] outline-none w-200px tabular-nums cursor-pointer pt-1rem [&:focus]-border-2px [&:focus]-border-solid [&:focus]-border-[#ff3e00] [&:active]-bg-[rgba(255,62,0,0.2)]" type="submit">
+      	<button class="font-[inherit] font-size-inherit px-2em py-1em text-[#ff3e00] bg-[rgba(255,62,0,0.1)] rounded-[2em] border-2px border-solid border-[rgba(255,62,0,0)] outline-none w-200px tabular-nums cursor-pointer pt-1rem [&:focus]-border-2px [&:focus]-border-solid [&:focus]-border-[#ff3e00] [&:active]-bg-[rgba(255,62,0,0.2)]" type="submit">
       		GO
       	</button>
       </form>