Skip to content

Commit 6abdff8

Browse files
baiwusanyu-cbaiwusanyu-c
authored
feat: support sass and scss (#10)
* feat: support sass and scss * chore: temp commit * test: updated process-css.spec.ts * feat: parse scss files to get importer infomation * chore: temp commit * test: update unit test about scss
1 parent 0536e49 commit 6abdff8

27 files changed

+814
-84
lines changed

‎.idea/vcs.xml‎

Lines changed: 6 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
}
4545
},
4646
"scripts": {
47+
"pa": "esno packages/core/parser/parser-import.ts",
4748
"init": "pnpm i",
4849
"lint:fix": "eslint --fix ./ --ext .vue,.js,.ts,.jsx,.tsx,.json ",
4950
"dev": "pnpm run --filter @unplugin-vue-cssvars/build dev",
@@ -114,6 +115,7 @@
114115
"npm-run-all": "^4.1.5",
115116
"rimraf": "^4.3.1",
116117
"rollup": "^3.19.1",
118+
"sass": "^1.59.3",
117119
"simple-git-hooks": "^2.8.1",
118120
"tsup": "^6.6.3",
119121
"typescript": "4.9.4",

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

Lines changed: 181 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,19 @@
11
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
22

3+
exports[`pre process css > generateCSSCode: get css code 1`] = `
4+
"@import \\"./test\\";
5+
.test {
6+
color: v-bind(appTheme2);
7+
}"
8+
`;
9+
10+
exports[`pre process css > generateCSSCode: get scss code 1`] = `
11+
"@import \\"./test\\";
12+
#app div {
13+
color: v-bind(fooColor);
14+
}"
15+
`;
16+
317
exports[`pre process css > getCSSVarsCode: generate code 1`] = `
418
{
519
"vBindCode": {
@@ -67,13 +81,51 @@ div{color:v-bind(color)}
6781
}
6882
`;
6983

84+
exports[`pre process css > getCurSassFileContent: basic 1`] = `
85+
"
86+
87+
#app {
88+
div {
89+
color: v-bind(fooColor);
90+
}
91+
.foo {
92+
color: red
93+
}
94+
}"
95+
`;
96+
97+
exports[`pre process css > getCurSassFileContent: no ; 1`] = `
98+
"
99+
#app {
100+
div {
101+
color: v-bind(fooColor);
102+
}
103+
.foo {
104+
color: red
105+
}
106+
}"
107+
`;
108+
109+
exports[`pre process css > getCurSassFileContent: no start and end 1`] = `
110+
"@import \\"./test\\"
111+
@use './test-use'
112+
#app {
113+
div {
114+
color: v-bind(fooColor);
115+
}
116+
.foo {
117+
color: red
118+
}
119+
}"
120+
`;
121+
70122
exports[`pre process css > preProcessCSS: basic 1`] = `
71123
{
72124
"color": Set {
73125
"
74126
/* created by @unplugin-vue-cssvars */
75127
/* <inject start> */
76-
div{color:v-bind(color)}
128+
p{color:v-bind(color)}
77129
/* <inject end> */
78130
",
79131
},
@@ -93,6 +145,134 @@ exports[`pre process css > preProcessCSS: basic 2`] = `
93145
}
94146
`;
95147

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`] = `
229+
"@import \\"./test\\";
230+
#app {
231+
div {
232+
color: v-bind(fooColor);
233+
}
234+
.foo {
235+
color: red
236+
}
237+
}"
238+
`;
239+
240+
exports[`pre process css > setImportToSassCompileRes: @use 1`] = `
241+
"@import \\"./test\\";
242+
#app {
243+
div {
244+
color: v-bind(fooColor);
245+
}
246+
.foo {
247+
color: red
248+
}
249+
}"
250+
`;
251+
252+
exports[`pre process css > setImportToSassCompileRes: basic 1`] = `
253+
"@import './test-use';
254+
@import \\"./test\\";
255+
#app {
256+
div {
257+
color: v-bind(fooColor);
258+
}
259+
.foo {
260+
color: red
261+
}
262+
}"
263+
`;
264+
265+
exports[`pre process css > setImportToSassCompileRes: no @use and @import 1`] = `
266+
"#app {
267+
div {
268+
color: v-bind(fooColor);
269+
}
270+
.foo {
271+
color: red
272+
}
273+
}"
274+
`;
275+
96276
exports[`pre process css > walkCSSTree: basic 1`] = `
97277
{
98278
"importer": "./test",

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,3 +33,16 @@ exports[`process css > createCSSModule: multiple style tag 1`] = `
3333
},
3434
]
3535
`;
36+
37+
exports[`process css > createCSSModule: no file with lang 1`] = `
38+
[
39+
{
40+
"importer": Set {},
41+
"vBindCode": {
42+
"foo": Set {
43+
"v-bind(foo)",
44+
},
45+
},
46+
},
47+
]
48+
`;

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

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.scss‎

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+
}

0 commit comments

Comments
 (0)