Skip to content

Commit 479025c

Browse files
Simon-He95Simon-He95
committed
feat: add multiple demo components for file handling and user interface
- Introduced complex2.vue for a loading component with customizable title and loading state. - Added complex3.vue for user item display with avatar, name, and external tag support. - Created complex4.vue for file handling with upload and download functionalities, including progress tracking. - Implemented complex5.vue for avatar display with fallback images and unread count. - Developed complex6.vue for a tag component with customizable styles. - Added test-1.vue as a sample layout demonstrating various styles and structures. - Updated transformCode tests to include new demo components and ensure snapshot consistency.
1 parent 2aa6ed2 commit 479025c

31 files changed

+5464
-124
lines changed

‎package.json‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "transform-to-unocss",
33
"type": "module",
44
"version": "0.1.13",
5-
"packageManager": "pnpm@10.10.0",
5+
"packageManager": "pnpm@10.12.2",
66
"description": "The tool that transform css to unocss",
77
"author": "Simon He",
88
"license": "MIT",
@@ -57,44 +57,44 @@
5757
"typecheck": "tsc --noEmit"
5858
},
5959
"dependencies": {
60-
"@babel/core": "^7.27.1",
61-
"@rollup/pluginutils": "^5.1.4",
60+
"@babel/core": "^7.27.4",
61+
"@rollup/pluginutils": "^5.2.0",
6262
"@simon_he/clack-prompts": "^0.8.11",
6363
"@unocss/core": "^0.50.8",
6464
"@unocss/preset-uno": "^0.50.8",
6565
"@vue/babel-plugin-jsx": "^1.4.0",
66-
"@vue/compiler-sfc": "^3.5.16",
66+
"@vue/compiler-sfc": "^3.5.17",
6767
"fast-glob": "^3.3.3",
6868
"less": "^4.3.0",
6969
"less-plugin-module-resolver": "^1.0.3",
7070
"node-html-parser": "^7.0.1",
7171
"picocolors": "^1.1.1",
72-
"sass": "^1.88.0",
72+
"sass": "^1.89.2",
7373
"stylus": "^0.63.0",
7474
"transform-to-unocss-core": "^0.0.66",
75-
"unplugin": "^2.3.3"
75+
"unplugin": "^2.3.5"
7676
},
7777
"devDependencies": {
78-
"@antfu/eslint-config": "^4.13.0",
78+
"@antfu/eslint-config": "^4.16.1",
7979
"@simon_he/colorize": "^0.0.1",
8080
"@types/babel__core": "^7.20.5",
8181
"@types/less": "^3.0.8",
82-
"@types/node": "^18.19.100",
82+
"@types/node": "^18.19.112",
8383
"@types/stylus": "^0.48.43",
8484
"bumpp": "^8.2.1",
8585
"eslint": "^8.57.1",
8686
"esno": "^0.16.3",
8787
"find-up": "^6.3.0",
8888
"lint-staged": "^13.3.0",
8989
"magic-string": "^0.30.17",
90-
"prettier": "^3.5.3",
90+
"prettier": "^3.6.0",
9191
"rimraf": "^6.0.1",
9292
"simple-git-hooks": "^2.13.0",
9393
"transform-to-unocss": "workspace:^",
9494
"tsdown": "^0.9.9",
9595
"tsx": "^3.14.0",
9696
"typescript": "^5.8.3",
97-
"vitest": "^3.1.3"
97+
"vitest": "^3.2.4"
9898
},
9999
"lint-staged": {
100100
"*": [

‎playground/package.json‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,17 +19,17 @@
1919
"@antfu/eslint-config": "^0.34.2",
2020
"@esbuild-plugins/node-globals-polyfill": "^0.2.3",
2121
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
22-
"@iconify-json/carbon": "^1.2.9",
23-
"@iconify/json": "^2.2.348",
22+
"@iconify-json/carbon": "^1.2.10",
23+
"@iconify/json": "^2.2.351",
2424
"@simon_he/git-fork-vue": "^0.0.17",
25-
"@types/node": "^18.19.111",
25+
"@types/node": "^18.19.112",
2626
"@unocss/reset": "^0.47.6",
2727
"@vitejs/plugin-vue": "^3.2.0",
2828
"@vue/test-utils": "^2.4.6",
2929
"@vueuse/core": "^9.13.0",
3030
"eslint": "^8.57.1",
3131
"jsdom": "^19.0.0",
32-
"lazy-js-utils": "^0.1.44",
32+
"lazy-js-utils": "^0.1.45",
3333
"rollup-plugin-polyfill-node": "^0.12.0",
3434
"typescript": "^4.9.5",
3535
"unocss": "^0.50.8",
@@ -39,7 +39,7 @@
3939
"vite-plugin-pages": "^0.28.0",
4040
"vitest": "^0.7.13",
4141
"vivid-typing": "^1.1.47",
42-
"vue": "^3.5.16",
42+
"vue": "^3.5.17",
4343
"vue-i18n": "^9.14.4",
4444
"vue-router": "^4.5.1",
4545
"vue-tsc": "^1.8.27"

‎src/prettierCode.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { getVueCompilerSfc } from './utils'
1+
import { parse } from '@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js'
22

33
const emptyStyle = /<style[\s\w'=]*>(\s+)/
44

55
export async function prettierCode(code: string) {
6-
const { parse } = await getVueCompilerSfc()
76
const {
87
descriptor: { styles },
98
} = parse(code)

‎src/transformCss.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import fsp from 'node:fs/promises'
22
import path from 'node:path'
33
import { escapeRegExp } from '@unocss/core'
4+
import { parse } from '@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js'
45
import {
56
isNot,
67
joinWithUnderLine,
@@ -16,7 +17,6 @@ import {
1617
diffTemplateStyle,
1718
getCssType,
1819
getStyleScoped,
19-
getVueCompilerSfc, // 从utils引入公共函数
2020
isEmptyStyle,
2121
TRANSFER_FLAG,
2222
transformUnocssBack,
@@ -56,7 +56,6 @@ export async function transformCss(
5656
isRem = _isRem
5757
const allChanges: AllChange[] = []
5858
let newCode = (await importCss(code, style, filepath, isJsx)) as string
59-
const { parse } = await getVueCompilerSfc()
6059
const stack = parse(newCode).descriptor.template?.ast
6160
const updateOffsetMap: any = {}
6261
const deferRun: any[] = []
@@ -77,6 +76,10 @@ export async function transformCss(
7776
if (prefix === 'group-deep')
7877
return
7978

79+
// hover .xxx 这种没办法处理因为 tailwind 只支持 hover:[&:xxx] 在当前的元素下
80+
if (prefix.includes(' '))
81+
return
82+
8083
const after
8184
= prefix && transfer
8285
? `${prefix}="${transfer.replace(
@@ -352,7 +355,8 @@ async function resolveConflictClass(
352355

353356
if (isJsx || after.replace(/[\w\-]+=("{1})(.*?)\1/g, '').includes('[')) {
354357
const newReg = new RegExp(
355-
`<${tag}.*\\sclass=["']([^"']+)["'][^\\/>]*\/?>`,
358+
`^<${tag}(?:[^\/'">]|"[^"]*"|'[^']*')*[^:]class=["']([^"']+)["']([^\/'">]|"[^"]*"|'[^']*')*\/?>`,
359+
's',
356360
)
357361
const matcher = target.match(newReg)
358362

@@ -442,7 +446,7 @@ async function getConflictClass(
442446
const pre = prefix ? `${prefix}|` : ''
443447
const beforeArr = before.split(';').filter(Boolean)
444448
const data = beforeArr.map((item) => {
445-
const [key, value] = item.split(':')
449+
const [key, value] = item.trim().split(':')
446450
return [`${pre}${key}`, value]
447451
})
448452
data.forEach((item) => {
@@ -503,7 +507,7 @@ async function getConflictClass(
503507
// map 赋值新 newStyle
504508
map = newStyle.split(';').reduce(
505509
(acc: Record<string, Array<number | string | symbol>>, item: string) => {
506-
const [key, value] = item.split(':')
510+
const [key, value] = item.trim().split(':')
507511
if (value !== undefined) {
508512
acc[key] = [map[key][0], value]
509513
}

‎src/transformInlineStyle.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export function transformInlineStyle(
4242
.replace(
4343
`class="${matcher[2]}"`,
4444
noMap.length
45-
? `class="${matcher[2]} ${after}" style="${noMap.join(';')}"`
45+
? `class="${matcher[2]} ${after}" style="${noMap.map(item => item && item.trim()).join(';')}"`
4646
: `class="${matcher[2]} ${after}"`,
4747
),
4848
))
@@ -55,7 +55,7 @@ export function transformInlineStyle(
5555
.replace(
5656
`<${tag}`,
5757
noMap.length
58-
? `<${tag} class="${after}" style="${noMap.join(';')}`
58+
? `<${tag} class="${after}" style="${noMap.map(item => item && item.trim()).join(';')}`
5959
: `<${tag} class="${after}"`,
6060
),
6161
))
@@ -68,7 +68,7 @@ export function transformInlineStyle(
6868
.replace(
6969
`<${tag}`,
7070
noMap.length
71-
? `<${tag} ${after} style="${noMap.join(';')}"`
71+
? `<${tag} ${after} style="${noMap.map(item => item && item.trim()).join(';')}"`
7272
: `<${tag} ${after}`,
7373
),
7474
))

‎src/transformVue.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import type { CssType } from './utils'
2+
import { parse } from '@vue/compiler-sfc/dist/compiler-sfc.esm-browser.js'
23
import { compilerCss } from './compilerCss'
34
import { prettierCode } from './prettierCode'
45
import { transformCss } from './transformCss'
56
import { transformInlineStyle } from './transformInlineStyle'
67
import { transformMedia } from './transformMedia'
7-
import { getVueCompilerSfc } from './utils' // 从utils引入公共函数
88

99
interface Options {
1010
isJsx?: boolean
@@ -15,7 +15,6 @@ interface Options {
1515

1616
export async function transformVue(code: string, options?: Options) {
1717
const { isJsx, filepath, isRem, globalCss } = options || {}
18-
const { parse } = await getVueCompilerSfc()
1918
const {
2019
descriptor: { template, styles },
2120
errors,

‎src/utils.ts‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,3 @@ export function getCssType(filename: string) {
6666
const result = ext === 'styl' ? 'stylus' : ext
6767
return result as CssType
6868
}
69-
70-
/**
71-
* 动态导入 Vue Compiler SFC，避免打包时的问题
72-
* @returns Vue Compiler SFC 中的方法
73-
*/
74-
export async function getVueCompilerSfc() {
75-
const { parse } = await import('@vue/compiler-sfc')
76-
return { parse }
77-
}

0 commit comments

Comments
 (0)