Skip to content

Commit 37092ab

Browse files
baiwusanyu-cbaiwusanyu-c
authored
feat: support less (#11)
1 parent 7a21994 commit 37092ab

22 files changed

+266
-159
lines changed

‎README.ZH-CN.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
* 🧩 它是一个 vue 的功能扩展，让你能够在 css 文件中使用 v-bind
99
* 🌈 支持全平台打包工具构建
10-
* ⛰ 支持 css, sass, scss, less, stylus (目前暂时支持 css、scss)
10+
* ⛰ 支持 css, sass, scss, less, stylus (目前暂时支持 css、scss、less)
1111
* ⚡ 轻量且快速
1212

1313
## Core Process

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ English | [中文](https://github.com/baiwusanyu-c/unplugin-vue-cssvars/blob/mas
77

88
* 🧩 It is a function extension of vue
99
* 🌈 Compatible with multiple bundled platforms（vite、rollup、esbuild、webpack）
10-
* ⛰ Support css, sass, scss, less, stylus (temporarily support css、scss)
10+
* ⛰ Support css, sass, scss, less, stylus (temporarily support css、scss、less)
1111
* ⚡ light and fast
1212

1313
## Core Process

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
"@types/estree": "^0.0.48",
9292
"@types/fs-extra": "^11.0.1",
9393
"@types/gulp": "^4.0.10",
94+
"@types/less": "^3.0.3",
9495
"@types/node": "^18.0.0",
9596
"@unplugin-vue-cssvars/build": "workspace:*",
9697
"@unplugin-vue-cssvars/core": "workspace:*",
@@ -111,6 +112,7 @@
111112
"git-ensure": "^0.1.0",
112113
"gulp": "^4.0.2",
113114
"jsdom": "^20.0.0",
115+
"less": "^4.1.3",
114116
"lint-staged": "^13.1.1",
115117
"npm-run-all": "^4.1.5",
116118
"rimraf": "^4.3.1",

‎packages/core/css/__test__/__snapshots__/pre-process-css.spec.ts.snap

Lines changed: 15 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ exports[`pre process css > generateCSSCode: get css code 1`] = `
77
}"
88
`;
99

10+
exports[`pre process css > generateCSSCode: get less code 1`] = `
11+
"@import \\"./test\\";
12+
#app div {
13+
color: v-bind(fooColor);
14+
}
15+
"
16+
`;
17+
1018
exports[`pre process css > generateCSSCode: get scss code 1`] = `
1119
"@import \\"./test\\";
1220
#app div {
@@ -81,7 +89,7 @@ div{color:v-bind(color)}
8189
}
8290
`;
8391

84-
exports[`pre process css > getCurSassFileContent: basic 1`] = `
92+
exports[`pre process css > getCurFileContent: basic 1`] = `
8593
"
8694
8795
#app {
@@ -94,7 +102,7 @@ exports[`pre process css > getCurSassFileContent: basic 1`] = `
94102
}"
95103
`;
96104

97-
exports[`pre process css > getCurSassFileContent: no ; 1`] = `
105+
exports[`pre process css > getCurFileContent: no ; 1`] = `
98106
"
99107
#app {
100108
div {
@@ -106,7 +114,7 @@ exports[`pre process css > getCurSassFileContent: no ; 1`] = `
106114
}"
107115
`;
108116

109-
exports[`pre process css > getCurSassFileContent: no start and end 1`] = `
117+
exports[`pre process css > getCurFileContent: no start and end 1`] = `
110118
"@import \\"./test\\"
111119
@use './test-use'
112120
#app {
@@ -145,87 +153,7 @@ exports[`pre process css > preProcessCSS: basic 2`] = `
145153
}
146154
`;
147155

148-
exports[`pre process css > preProcessCSS: map path scss -> css or scss 1`] = `
149-
Map {
150-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/foo.scss" => {
151-
"importer": Set {
152-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/test.scss",
153-
},
154-
"vBindCode": {
155-
"fooColor": Set {
156-
"
157-
/* created by @unplugin-vue-cssvars */
158-
/* <inject start> */
159-
#app div{color:v-bind(fooColor)}
160-
/* <inject end> */
161-
",
162-
},
163-
},
164-
},
165-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/foo2.scss" => {
166-
"importer": Set {
167-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/test2.css",
168-
},
169-
"vBindCode": {
170-
"fooColor": Set {
171-
"
172-
/* created by @unplugin-vue-cssvars */
173-
/* <inject start> */
174-
#app div{color:v-bind(fooColor)}
175-
/* <inject end> */
176-
",
177-
},
178-
},
179-
},
180-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/test.css" => {
181-
"importer": Set {
182-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/test2.css",
183-
},
184-
"vBindCode": {
185-
"color": Set {
186-
"
187-
/* created by @unplugin-vue-cssvars */
188-
/* <inject start> */
189-
p{color:v-bind(color)}
190-
/* <inject end> */
191-
",
192-
},
193-
},
194-
},
195-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/test.scss" => {
196-
"importer": Set {
197-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/test2.css",
198-
},
199-
"vBindCode": {
200-
"color": Set {
201-
"
202-
/* created by @unplugin-vue-cssvars */
203-
/* <inject start> */
204-
.scss{color:v-bind(color)}
205-
/* <inject end> */
206-
",
207-
},
208-
},
209-
},
210-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/test2.css" => {
211-
"importer": Set {
212-
"D:/project-github/unplugin-vue-cssvars/core/css/__test__/test.css",
213-
},
214-
"vBindCode": {
215-
"appTheme2": Set {
216-
"
217-
/* created by @unplugin-vue-cssvars */
218-
/* <inject start> */
219-
.test{color:v-bind(appTheme2)}
220-
/* <inject end> */
221-
",
222-
},
223-
},
224-
},
225-
}
226-
`;
227-
228-
exports[`pre process css > setImportToSassCompileRes: @import 1`] = `
156+
exports[`pre process css > setImportToCompileRes: @import 1`] = `
229157
"@import \\"./test\\";
230158
#app {
231159
div {
@@ -237,7 +165,7 @@ exports[`pre process css > setImportToSassCompileRes: @import 1`] = `
237165
}"
238166
`;
239167

240-
exports[`pre process css > setImportToSassCompileRes: @use 1`] = `
168+
exports[`pre process css > setImportToCompileRes: @use 1`] = `
241169
"@import \\"./test\\";
242170
#app {
243171
div {
@@ -249,7 +177,7 @@ exports[`pre process css > setImportToSassCompileRes: @use 1`] = `
249177
}"
250178
`;
251179

252-
exports[`pre process css > setImportToSassCompileRes: basic 1`] = `
180+
exports[`pre process css > setImportToCompileRes: basic 1`] = `
253181
"@import './test-use';
254182
@import \\"./test\\";
255183
#app {
@@ -262,7 +190,7 @@ exports[`pre process css > setImportToSassCompileRes: basic 1`] = `
262190
}"
263191
`;
264192

265-
exports[`pre process css > setImportToSassCompileRes: no @use and @import 1`] = `
193+
exports[`pre process css > setImportToCompileRes: no @use and @import 1`] = `
266194
"#app {
267195
div {
268196
color: v-bind(fooColor);

‎packages/core/css/__test__/foo.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import "./test";
2+
#app {
3+
div {
4+
color: v-bind(fooColor);
5+
}
6+
}

‎packages/core/css/__test__/foo2.less

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import "./test2";
2+
#app {
3+
div {
4+
color: v-bind(fooColor);
5+
}
6+
}

‎packages/core/css/__test__/pre-process-css.spec.ts

Lines changed: 50 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import {
66
generateCSSCode,
77
getCSSImport,
88
getCSSVarsCode,
9-
getCurSassFileContent,
9+
getCurFileContent,
1010
preProcessCSS,
11-
setImportToSassCompileRes,
11+
setImportToCompileRes,
1212
walkCSSTree,
1313
} from '../pre-process-css'
1414
import type { ImportStatement } from '../../parser/parser-import'
@@ -342,10 +342,31 @@ describe('pre process css', () => {
342342
// test2.css -> test.css or test.scss ? -> test.css
343343
const importerTest2CSS = res.get(mockPathTest2CSS)
344344
expect([...importerTest2CSS!.importer][0]).toBe(mockPathTestCSS)
345-
expect(res).toMatchSnapshot()
346345
})
347346

348-
test('getCurSassFileContent: basic', () => {
347+
test('preProcessCSS: map path less -> css or less', () => {
348+
const res = preProcessCSS({ rootDir: resolve('packages') })
349+
const mockPathFooLESS = transformSymbol(`${resolve()}/core/css/__test__/foo.less`)
350+
const mockPathTestLESS = transformSymbol(`${resolve()}/core/css/__test__/test.less`)
351+
const mockPathTest2CSS = transformSymbol(`${resolve()}/core/css/__test__/test2.css`)
352+
// foo.less -> test.css or test.less ? -> test.less
353+
const importerFooLESS = res.get(mockPathFooLESS)
354+
expect([...importerFooLESS!.importer][0]).toBe(mockPathTestLESS)
355+
// foo.less -> test.css or test.less ? -> test.less -> test2.css
356+
const importerTestLESS = res.get(mockPathTestLESS)
357+
expect([...importerTestLESS!.importer][0]).toBe(mockPathTest2CSS)
358+
359+
// foo2.less -> test2.css
360+
const mockPathFoo2LESS = transformSymbol(`${resolve()}/core/css/__test__/foo2.less`)
361+
const mockPathTestCSS = transformSymbol(`${resolve()}/core/css/__test__/test.css`)
362+
const importerFoo2LESS = res.get(mockPathFoo2LESS)
363+
expect([...importerFoo2LESS!.importer][0]).toBe(mockPathTest2CSS)
364+
// test2.css -> test.css or test.less ? -> test.css
365+
const importerTest2CSS = res.get(mockPathTest2CSS)
366+
expect([...importerTest2CSS!.importer][0]).toBe(mockPathTestCSS)
367+
})
368+
369+
test('getCurFileContent: basic', () => {
349370
const mockSassContent = '@import "./test";\n'
350371
+ '@use \'./test-use\';\n'
351372
+ '#app {\n'
@@ -361,13 +382,13 @@ describe('pre process css', () => {
361382
{ type: 'import', path: '"./test"', start: 8, end: 16 },
362383
{ type: 'use', path: '\'./test-use\'', start: 23, end: 35 },
363384
]
364-
const res = getCurSassFileContent(mockSassContent, mockStatement as ImportStatement[])
385+
const res = getCurFileContent(mockSassContent, mockStatement as ImportStatement[])
365386
expect(res.includes('import')).not.toBeTruthy()
366387
expect(res.includes('use')).not.toBeTruthy()
367388
expect(res).toMatchSnapshot()
368389
})
369390

370-
test('getCurSassFileContent: no ; ', () => {
391+
test('getCurFileContent: no ; ', () => {
371392
const mockSassContent = '@import "./test"\n'
372393
+ '@use \'./test-use\'\n'
373394
+ '#app {\n'
@@ -383,13 +404,13 @@ describe('pre process css', () => {
383404
{ type: 'import', path: '"./test"', start: 8, end: 16 },
384405
{ type: 'use', path: '\'./test-use\'', start: 22, end: 35 },
385406
]
386-
const res = getCurSassFileContent(mockSassContent, mockStatement as ImportStatement[])
407+
const res = getCurFileContent(mockSassContent, mockStatement as ImportStatement[])
387408
expect(res.includes('@import')).not.toBeTruthy()
388409
expect(res.includes('@use')).not.toBeTruthy()
389410
expect(res).toMatchSnapshot()
390411
})
391412

392-
test('getCurSassFileContent: no start and end ', () => {
413+
test('getCurFileContent: no start and end ', () => {
393414
const mockSassContent = '@import "./test"\n'
394415
+ '@use \'./test-use\'\n'
395416
+ '#app {\n'
@@ -405,12 +426,12 @@ describe('pre process css', () => {
405426
{ type: 'import', path: '"./test"' },
406427
{ type: 'use', path: '\'./test-use\'' },
407428
]
408-
const res = getCurSassFileContent(mockSassContent, mockStatement as ImportStatement[])
429+
const res = getCurFileContent(mockSassContent, mockStatement as ImportStatement[])
409430
expect(res).toMatchObject(mockSassContent)
410431
expect(res).toMatchSnapshot()
411432
})
412433

413-
test('setImportToSassCompileRes: basic', () => {
434+
test('setImportToCompileRes: basic', () => {
414435
const mockSassContent = '#app {\n'
415436
+ ' div {\n'
416437
+ ' color: v-bind(fooColor);\n'
@@ -424,13 +445,13 @@ describe('pre process css', () => {
424445
{ type: 'import', path: '"./test"' },
425446
{ type: 'use', path: '\'./test-use\'' },
426447
]
427-
const res = setImportToSassCompileRes(mockSassContent, mockStatement as ImportStatement[])
448+
const res = setImportToCompileRes(mockSassContent, mockStatement as ImportStatement[])
428449
expect(res.includes('@import')).toBeTruthy()
429450
expect(res.includes('@use')).not.toBeTruthy()
430451
expect(res).toMatchSnapshot()
431452
})
432453

433-
test('setImportToSassCompileRes: @import', () => {
454+
test('setImportToCompileRes: @import', () => {
434455
const mockSassContent = '#app {\n'
435456
+ ' div {\n'
436457
+ ' color: v-bind(fooColor);\n'
@@ -443,13 +464,13 @@ describe('pre process css', () => {
443464
const mockStatement = [
444465
{ type: 'import', path: '"./test"' },
445466
]
446-
const res = setImportToSassCompileRes(mockSassContent, mockStatement as ImportStatement[])
467+
const res = setImportToCompileRes(mockSassContent, mockStatement as ImportStatement[])
447468
expect(res.includes('@import')).toBeTruthy()
448469
expect(res.includes('@use')).not.toBeTruthy()
449470
expect(res).toMatchSnapshot()
450471
})
451472

452-
test('setImportToSassCompileRes: @use', () => {
473+
test('setImportToCompileRes: @use', () => {
453474
const mockSassContent = '#app {\n'
454475
+ ' div {\n'
455476
+ ' color: v-bind(fooColor);\n'
@@ -462,13 +483,13 @@ describe('pre process css', () => {
462483
const mockStatement = [
463484
{ type: 'use', path: '"./test"' },
464485
]
465-
const res = setImportToSassCompileRes(mockSassContent, mockStatement as ImportStatement[])
486+
const res = setImportToCompileRes(mockSassContent, mockStatement as ImportStatement[])
466487
expect(res.includes('@import')).toBeTruthy()
467488
expect(res.includes('@use')).not.toBeTruthy()
468489
expect(res).toMatchSnapshot()
469490
})
470491

471-
test('setImportToSassCompileRes: no @use and @import', () => {
492+
test('setImportToCompileRes: no @use and @import', () => {
472493
const mockSassContent = '#app {\n'
473494
+ ' div {\n'
474495
+ ' color: v-bind(fooColor);\n'
@@ -482,7 +503,7 @@ describe('pre process css', () => {
482503
{ type: 'foo', path: '"./test"' },
483504
{ type: 'foo', path: '"./test"' },
484505
]
485-
const res = setImportToSassCompileRes(mockSassContent, mockStatement as ImportStatement[])
506+
const res = setImportToCompileRes(mockSassContent, mockStatement as ImportStatement[])
486507
expect(res.includes('@import')).not.toBeTruthy()
487508
expect(res.includes('@use')).not.toBeTruthy()
488509
expect(res).toMatchObject(mockSassContent)
@@ -511,4 +532,16 @@ describe('pre process css', () => {
511532
expect(res).toBe(mockSassContent)
512533
expect(res).toMatchSnapshot()
513534
})
535+
536+
test('generateCSSCode: get less code', () => {
537+
const mockSassContent = '@import "./test";\n'
538+
+ '#app div {\n'
539+
+ ' color: v-bind(fooColor);\n'
540+
+ '}'
541+
+ '\n'
542+
const mockPath = `${resolve('packages')}/core/css/__test__/foo.less`
543+
const res = generateCSSCode(mockPath, '.less')
544+
expect(res).toBe(mockSassContent)
545+
expect(res).toMatchSnapshot()
546+
})
514547
})

‎packages/core/css/__test__/test.less

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
@import "./test2";
2+
.scss {
3+
color: v-bind(color);
4+
}

0 commit comments

Comments
 (0)