Skip to content

Commit aa91995

Browse files
baiwusanyu-cbaiwusanyu-c
authored
fix: Modify the injection strategy in build mode to avoid error reporting (#23)
* chore: temp commit * fix: Modify the injection strategy in build mode to avoid error reporting
1 parent 3007de0 commit aa91995

File tree

8 files changed

+204
-26
lines changed

8 files changed

+204
-26
lines changed

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

Lines changed: 7 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,37 +2,31 @@
22

33
exports[`inject-css > injectCssOnBuild: basic 1`] = `
44
"
5-
6-
<style lang=\\"scss\\">/* foo.scss -> test2.css -> test.css */
5+
<style lang=\\"scss\\" >
6+
/* foo.scss -> test2.css -> test.css */
77
/* foo.scss -> test.scss -> test2.css */
88
99
/*@import \\"./assets/less/less-foo\\";*/
1010
div {
1111
color: v-bind(color)
1212
}
13-
</style>
14-
<style lang=\\"scss\\">
15-
body { background-color: black; }</style>"
13+
</style>"
1614
`;
1715

1816
exports[`inject-css > injectCssOnBuild: no lang 1`] = `
1917
"
20-
21-
<style lang=\\"css\\">/* foo.scss -> test2.css -> test.css */
18+
<style lang=\\"css\\" >
19+
/* foo.scss -> test2.css -> test.css */
2220
/* foo.scss -> test.scss -> test2.css */
2321
2422
/*@import \\"./assets/less/less-foo\\";*/
2523
div {
2624
color: v-bind(color)
2725
}
28-
</style>
29-
<style lang=\\"scss\\">
30-
body { background-color: black; }</style>"
26+
</style>"
3127
`;
3228

3329
exports[`inject-css > injectCssOnBuild: no styles 1`] = `
3430
"test
35-
36-
<style lang=\\"scss\\">
37-
body { background-color: black; }</style>"
31+
"
3832
`;

‎packages/core/inject/inject-css.ts‎

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { transformInjectCSS } from '../transform/transform-inject-css'
22
import { parseImports } from '../parser'
3+
import type { TInjectCSSContent } from '../runtime/process-css'
34
import type { SFCDescriptor } from '@vue/compiler-sfc'
45
import type { TMatchVariable } from '../parser'
56

@@ -15,18 +16,23 @@ export function injectCssOnServer(
1516

1617
export function injectCssOnBuild(
1718
code: string,
18-
injectCSSContent: Set<{ content: string, lang: string }>,
19+
injectCSSContent: TInjectCSSContent,
1920
descriptor: SFCDescriptor) {
2021
const cssContent = [...injectCSSContent]
2122
let resCode = ''
22-
descriptor.styles && descriptor.styles.forEach((value) => {
23-
resCode = `${resCode}\n<style lang="${value.lang || 'css'}">${transformInjectCSS(value.content, parseImports(value.content).imports)}</style>`
24-
})
25-
cssContent.forEach((value) => {
26-
resCode = `${resCode}\n<style lang="${value.lang}">${transformInjectCSS(value.content, parseImports(value.content).imports)}</style>`
23+
24+
descriptor.styles && descriptor.styles.forEach((value, index) => {
25+
let injectCssCode = ''
26+
cssContent.forEach((value) => {
27+
if (value.styleTagIndex === index)
28+
injectCssCode = `${injectCssCode}\n${transformInjectCSS(value.content, parseImports(value.content).imports)}`
29+
})
30+
const lang = value.lang || 'css'
31+
const scoped = value.scoped ? 'scoped' : ''
32+
resCode = `<style lang="${lang}" ${scoped}> ${injectCssCode}\n${transformInjectCSS(value.content, parseImports(value.content).imports)} </style>`
2733
})
2834
code = removeStyleTagsAndContent(code)
29-
return `${code}\n${resCode}`
35+
return `${code}\n ${resCode}`
3036
}
3137

3238
export function removeStyleTagsAndContent(html: string): string {

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ exports[`process css > getVBindVariableListByPath: basic 1`] = `
2525
{
2626
"content": "content foo color",
2727
"lang": "scss",
28+
"styleTagIndex": 0,
2829
},
2930
},
3031
"vbindVariableListByPath": [

‎packages/core/runtime/process-css.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,14 @@ export const getCSSFileRecursion = (
3232
* @param server
3333
*/
3434
// TODO: unit test
35+
export type TInjectCSSContent = Set<{ content: string, lang: string, styleTagIndex: number }>
3536
export const getVBindVariableListByPath = (
3637
descriptor: SFCDescriptor,
3738
id: string,
3839
cssFiles: ICSSFileMap,
3940
server: boolean) => {
4041
const vbindVariable: Set<string> = new Set()
41-
const injectCSSContent = new Set<{ content: string, lang: string }>()
42+
const injectCSSContent: TInjectCSSContent = new Set()
4243
// 遍历 sfc 的 style 标签内容
4344
for (let i = 0; i < descriptor.styles.length; i++) {
4445
const content = descriptor.styles[i].content
@@ -57,7 +58,7 @@ export const getVBindVariableListByPath = (
5758
// 根据 @import 信息，从 cssFiles 中，递归的获取所有在预处理时生成的 cssvars 样式
5859
getCSSFileRecursion(key, cssFiles, (res: ICSSFile) => {
5960
if (res.vBindCode) {
60-
!server && injectCSSContent.add({ content: res.content, lang: res.lang })
61+
!server && injectCSSContent.add({ content: res.content, lang: res.lang, styleTagIndex: i })
6162
res.vBindCode.forEach((vb) => {
6263
vbindVariable.add(vb)
6364
})

‎play/src/App.vue‎

Lines changed: 47 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,13 +78,57 @@ export default defineComponent({
7878
</div>
7979
</template>
8080

81-
<style lang="scss">
81+
<style lang="scss" scoped>
82+
@import './assets/scss/mixin.scss';
83+
@import './assets/scss/variables.module.scss';
8284
/* foo.scss -> test2.css -> test.css */
8385
/* foo.scss -> test.scss -> test2.css */
8486
8587
/*@import "./assets/less/less-foo";*/
86-
div {
88+
/*div {
8789
color: v-bind(color)
8890
}
89-
@import './assets/scss/foo.scss';
91+
@import './assets/scss/foo.scss';*/
92+
.app-wrapper {
93+
@include clearfix;
94+
position: relative;
95+
height: 100%;
96+
width: 100%;
97+
98+
&.mobile.openSidebar {
99+
position: fixed;
100+
top: 0;
101+
}
102+
}
103+
104+
.drawer-bg {
105+
background: #000;
106+
opacity: 0.3;
107+
width: 100%;
108+
top: 0;
109+
height: 100%;
110+
position: absolute;
111+
z-index: 999;
112+
}
113+
114+
.fixed-header {
115+
position: fixed;
116+
top: 0;
117+
right: 0;
118+
z-index: 9;
119+
width: calc(100% - #{$base-sidebar-width});
120+
transition: width 0.28s;
121+
}
122+
123+
.hideSidebar .fixed-header {
124+
width: calc(100% - 54px);
125+
}
126+
127+
.sidebarHide .fixed-header {
128+
width: 100%;
129+
}
130+
131+
.mobile .fixed-header {
132+
width: 100%;
133+
}
90134
</style>

‎play/src/assets/scss/mixin.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
@mixin clearfix {
2+
&:after {
3+
content: "";
4+
display: table;
5+
clear: both;
6+
}
7+
}
8+
9+
@mixin scrollBar {
10+
&::-webkit-scrollbar-track-piece {
11+
background: #d3dce6;
12+
}
13+
14+
&::-webkit-scrollbar {
15+
width: 6px;
16+
}
17+
18+
&::-webkit-scrollbar-thumb {
19+
background: #99a9bf;
20+
border-radius: 20px;
21+
}
22+
}
23+
24+
@mixin relative {
25+
position: relative;
26+
width: 100%;
27+
height: 100%;
28+
}
29+
30+
@mixin pct($pct) {
31+
width: #{$pct};
32+
position: relative;
33+
margin: 0 auto;
34+
}
35+
36+
@mixin triangle($width, $height, $color, $direction) {
37+
$width: $width/2;
38+
$color-border-style: $height solid $color;
39+
$transparent-border-style: $width solid transparent;
40+
height: 0;
41+
width: 0;
42+
43+
@if $direction==up {
44+
border-bottom: $color-border-style;
45+
border-left: $transparent-border-style;
46+
border-right: $transparent-border-style;
47+
}
48+
49+
@else if $direction==right {
50+
border-left: $color-border-style;
51+
border-top: $transparent-border-style;
52+
border-bottom: $transparent-border-style;
53+
}
54+
55+
@else if $direction==down {
56+
border-top: $color-border-style;
57+
border-left: $transparent-border-style;
58+
border-right: $transparent-border-style;
59+
}
60+
61+
@else if $direction==left {
62+
border-right: $color-border-style;
63+
border-top: $transparent-border-style;
64+
border-bottom: $transparent-border-style;
65+
}
66+
}

‎play/src/assets/scss/variables.module.scss‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
// base color
2+
$blue: #324157;
3+
$light-blue: #3A71A8;
4+
$red: #C03639;
5+
$pink: #E65D6E;
6+
$green: #30B08F;
7+
$tiffany: #4AB7BD;
8+
$yellow: #FEC171;
9+
$panGreen: #30B08F;
10+
11+
// 默认菜单主题风格
12+
$base-menu-color: #bfcbd9;
13+
$base-menu-color-active: #f4f4f5;
14+
$base-menu-background: #304156;
15+
$base-logo-title-color: #ffffff;
16+
17+
$base-menu-light-color: rgba(0, 0, 0, 0.7);
18+
$base-menu-light-background: #ffffff;
19+
$base-logo-light-title-color: #001529;
20+
21+
$base-sub-menu-background: #1f2d3d;
22+
$base-sub-menu-hover: #001528;
23+
24+
// 自定义暗色菜单风格
25+
/**
26+
$base-menu-color:hsla(0,0%,100%,.65);
27+
$base-menu-color-active:#fff;
28+
$base-menu-background:#001529;
29+
$base-logo-title-color: #ffffff;
30+
31+
$base-menu-light-color:rgba(0,0,0,.70);
32+
$base-menu-light-background:#ffffff;
33+
$base-logo-light-title-color: #001529;
34+
35+
$base-sub-menu-background:#000c17;
36+
$base-sub-menu-hover:#001528;
37+
*/
38+
39+
$--color-primary: #409EFF;
40+
$--color-success: #67C23A;
41+
$--color-warning: #E6A23C;
42+
$--color-danger: #F56C6C;
43+
$--color-info: #909399;
44+
$--color-placeholder: #a8abb2;
45+
$base-sidebar-width: 200px;
46+
47+
// the :export directive is the magic sauce for webpack
48+
// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
49+
:export {
50+
menuColor: $base-menu-color;
51+
menuLightColor: $base-menu-light-color;
52+
menuColorActive: $base-menu-color-active;
53+
menuBackground: $base-menu-background;
54+
menuLightBackground: $base-menu-light-background;
55+
subMenuBackground: $base-sub-menu-background;
56+
subMenuHover: $base-sub-menu-hover;
57+
sideBarWidth: $base-sidebar-width;
58+
logoTitleColor: $base-logo-title-color;
59+
logoLightTitleColor: #0E53C4;
60+
primaryColor: $--color-primary;
61+
successColor: $--color-success;
62+
dangerColor: $--color-danger;
63+
infoColor: $--color-info;
64+
warningColor: $--color-warning;
65+
placeholderColor : $--color-placeholder;
66+
}

‎play/vite.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export default defineConfig({
2929
viteVueCSSVars({
3030
include: [/.vue/],
3131
includeCompile: ['**/**.scss'],
32-
server: true,
32+
server: false,
3333
}),
3434
],
3535
})

0 commit comments

Comments
 (0)