Skip to content

Commit 5ef2407

Browse files
committed
chore: update README and test files for UnoCSS conversion details and styling improvements
1 parent 68abc4c commit 5ef2407

File tree

4 files changed

+7
-7
lines changed

4 files changed

+7
-7
lines changed

README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<img height="200" src="./assets/kv.png" alt="to unocss">
33
</p>
44
<p align="center"> English | <a href="./README_zh.md">简体中文</a></p>
5-
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>.
5+
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>.
66

77
## 📦 Install
88

README_zh.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
</p>
44
<p align="center"> <a href="./README.md">English</a> | 简体中文</p>
55

6-
这个库就是把 css 转成 unocss 的。 [unocss](https://github.com/unocss/unocss) 可以更好的复用样式减少打包体积,可以转化为一种性能优化的方式,也可以让老项目更容易升级到 unocss。如果你是 [tailwindcss](https://tailwindcss.com/) 的使用者,可以尝试一下 <a href="https://github.com/Simon-He95/transformToTailwindcss">transformToTailwindcss</a>.
6+
这个库可以把 _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>.
77

88
## 📦 Install
99

test/__snapshots__/transformCode.test.ts.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -688,7 +688,7 @@ exports[`demo3 vue test > demo2.vue 1`] = `
688688
<div class="add-node-btn select-none w-240px px-0 pt-20px pb-32px flex justify-center shrink-0 grow-1">
689689
<div class="add-node-popover-body flex">
690690
<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)">
691-
<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]">
691+
<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]">
692692
<span class="iconfont text-35px lh-80px"></span>
693693
</div>
694694
<p>审批人</p>
@@ -876,7 +876,7 @@ exports[`single demo styleMaxWidth.tsx > vue.tsx 1`] = `
876876
<div class="red">
877877
nihao
878878
</div>
879-
<div class="yellow max-w-[calc(100%_-_50px)] bg-[rgba(255,62,0,0.1)]">
879+
<div class="yellow max-w-[calc(100%-50px)] bg-[rgba(255,62,0,0.1)]">
880880
hi
881881
</div>
882882
</template>
@@ -1792,7 +1792,7 @@ watch(
17921792
<div class="add-node-btn select-none w-240px px-0 pt-20px pb-32px flex justify-center shrink-0 grow-1">
17931793
<div class="add-node-popover-body flex">
17941794
<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)">
1795-
<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]">
1795+
<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]">
17961796
<span class="iconfont text-35px lh-80px"></span>
17971797
</div>
17981798
<p>审批人</p>
@@ -1956,7 +1956,7 @@ body {
19561956
<div class="red">
19571957
nihao
19581958
</div>
1959-
<div class="yellow max-w-[calc(100%_-_50px)] bg-[rgba(255,62,0,0.1)]">
1959+
<div class="yellow max-w-[calc(100%-50px)] bg-[rgba(255,62,0,0.1)]">
19601960
hi
19611961
</div>
19621962
</template>

test/transformSvelte.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ describe('accent', () => {
1313
1414
<form class="pt-1rem" on:submit|preventDefault={go}>
1515
<input bind:this={input} bind:value={name} type="text" aria-label="What's your name?" placeholder="What's your name?">
16-
<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">
16+
<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">
1717
GO
1818
</button>
1919
</form>

0 commit comments

Comments
 (0)