From c57eaf74eda3bcc2c26f687b36d7e3ed3acf303a Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Fri, 31 Mar 2023 18:07:47 +0800 Subject: [PATCH 1/2] chore: temp commit --- play/src/App.vue | 51 ++++++++++++++++- play/src/assets/scss/mixin.scss | 66 ++++++++++++++++++++++ play/src/assets/scss/variables.module.scss | 66 ++++++++++++++++++++++ play/vite.config.ts | 2 +- 4 files changed, 181 insertions(+), 4 deletions(-) create mode 100644 play/src/assets/scss/mixin.scss create mode 100644 play/src/assets/scss/variables.module.scss diff --git a/play/src/App.vue b/play/src/App.vue index 3173665..4be97c4 100644 --- a/play/src/App.vue +++ b/play/src/App.vue @@ -78,13 +78,58 @@ export default defineComponent({ - diff --git a/play/src/assets/scss/mixin.scss b/play/src/assets/scss/mixin.scss new file mode 100644 index 0000000..06fa061 --- /dev/null +++ b/play/src/assets/scss/mixin.scss @@ -0,0 +1,66 @@ +@mixin clearfix { + &:after { + content: ""; + display: table; + clear: both; + } +} + +@mixin scrollBar { + &::-webkit-scrollbar-track-piece { + background: #d3dce6; + } + + &::-webkit-scrollbar { + width: 6px; + } + + &::-webkit-scrollbar-thumb { + background: #99a9bf; + border-radius: 20px; + } +} + +@mixin relative { + position: relative; + width: 100%; + height: 100%; +} + +@mixin pct($pct) { + width: #{$pct}; + position: relative; + margin: 0 auto; +} + +@mixin triangle($width, $height, $color, $direction) { + $width: $width/2; + $color-border-style: $height solid $color; + $transparent-border-style: $width solid transparent; + height: 0; + width: 0; + + @if $direction==up { + border-bottom: $color-border-style; + border-left: $transparent-border-style; + border-right: $transparent-border-style; + } + + @else if $direction==right { + border-left: $color-border-style; + border-top: $transparent-border-style; + border-bottom: $transparent-border-style; + } + + @else if $direction==down { + border-top: $color-border-style; + border-left: $transparent-border-style; + border-right: $transparent-border-style; + } + + @else if $direction==left { + border-right: $color-border-style; + border-top: $transparent-border-style; + border-bottom: $transparent-border-style; + } +} diff --git a/play/src/assets/scss/variables.module.scss b/play/src/assets/scss/variables.module.scss new file mode 100644 index 0000000..81a1917 --- /dev/null +++ b/play/src/assets/scss/variables.module.scss @@ -0,0 +1,66 @@ +// base color +$blue: #324157; +$light-blue: #3A71A8; +$red: #C03639; +$pink: #E65D6E; +$green: #30B08F; +$tiffany: #4AB7BD; +$yellow: #FEC171; +$panGreen: #30B08F; + +// 默认菜单主题风格 +$base-menu-color: #bfcbd9; +$base-menu-color-active: #f4f4f5; +$base-menu-background: #304156; +$base-logo-title-color: #ffffff; + +$base-menu-light-color: rgba(0, 0, 0, 0.7); +$base-menu-light-background: #ffffff; +$base-logo-light-title-color: #001529; + +$base-sub-menu-background: #1f2d3d; +$base-sub-menu-hover: #001528; + +// 自定义暗色菜单风格 +/** +$base-menu-color:hsla(0,0%,100%,.65); +$base-menu-color-active:#fff; +$base-menu-background:#001529; +$base-logo-title-color: #ffffff; + +$base-menu-light-color:rgba(0,0,0,.70); +$base-menu-light-background:#ffffff; +$base-logo-light-title-color: #001529; + +$base-sub-menu-background:#000c17; +$base-sub-menu-hover:#001528; +*/ + +$--color-primary: #409EFF; +$--color-success: #67C23A; +$--color-warning: #E6A23C; +$--color-danger: #F56C6C; +$--color-info: #909399; +$--color-placeholder: #a8abb2; +$base-sidebar-width: 200px; + +// the :export directive is the magic sauce for webpack +// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass +:export { + menuColor: $base-menu-color; + menuLightColor: $base-menu-light-color; + menuColorActive: $base-menu-color-active; + menuBackground: $base-menu-background; + menuLightBackground: $base-menu-light-background; + subMenuBackground: $base-sub-menu-background; + subMenuHover: $base-sub-menu-hover; + sideBarWidth: $base-sidebar-width; + logoTitleColor: $base-logo-title-color; + logoLightTitleColor: #0E53C4; + primaryColor: $--color-primary; + successColor: $--color-success; + dangerColor: $--color-danger; + infoColor: $--color-info; + warningColor: $--color-warning; + placeholderColor : $--color-placeholder; +} diff --git a/play/vite.config.ts b/play/vite.config.ts index d5d50ba..a887401 100644 --- a/play/vite.config.ts +++ b/play/vite.config.ts @@ -29,7 +29,7 @@ export default defineConfig({ viteVueCSSVars({ include: [/.vue/], includeCompile: ['**/**.scss'], - server: true, + server: false, }), ], }) From 2dbd5757b302621b7399a598f38f4e605900ead1 Mon Sep 17 00:00:00 2001 From: baiwusanyu-c <740132583@qq.com> Date: Fri, 31 Mar 2023 19:15:09 +0800 Subject: [PATCH 2/2] fix: Modify the injection strategy in build mode to avoid error reporting --- .../__snapshots__/inject-css.spec.ts.snap | 20 +++++++------------ packages/core/inject/inject-css.ts | 20 ++++++++++++------- .../__snapshots__/process-css.spec.ts.snap | 1 + packages/core/runtime/process-css.ts | 5 +++-- play/src/App.vue | 1 - 5 files changed, 24 insertions(+), 23 deletions(-) diff --git a/packages/core/inject/__test__/__snapshots__/inject-css.spec.ts.snap b/packages/core/inject/__test__/__snapshots__/inject-css.spec.ts.snap index 36b3215..2a36b52 100644 --- a/packages/core/inject/__test__/__snapshots__/inject-css.spec.ts.snap +++ b/packages/core/inject/__test__/__snapshots__/inject-css.spec.ts.snap @@ -2,37 +2,31 @@ exports[`inject-css > injectCssOnBuild: basic 1`] = ` " - - -" + " `; exports[`inject-css > injectCssOnBuild: no lang 1`] = ` " - - -" + " `; exports[`inject-css > injectCssOnBuild: no styles 1`] = ` "test - -" + " `; diff --git a/packages/core/inject/inject-css.ts b/packages/core/inject/inject-css.ts index 49881db..ebc6208 100644 --- a/packages/core/inject/inject-css.ts +++ b/packages/core/inject/inject-css.ts @@ -1,5 +1,6 @@ import { transformInjectCSS } from '../transform/transform-inject-css' import { parseImports } from '../parser' +import type { TInjectCSSContent } from '../runtime/process-css' import type { SFCDescriptor } from '@vue/compiler-sfc' import type { TMatchVariable } from '../parser' @@ -15,18 +16,23 @@ export function injectCssOnServer( export function injectCssOnBuild( code: string, - injectCSSContent: Set<{ content: string, lang: string }>, + injectCSSContent: TInjectCSSContent, descriptor: SFCDescriptor) { const cssContent = [...injectCSSContent] let resCode = '' - descriptor.styles && descriptor.styles.forEach((value) => { - resCode = `${resCode}\n` - }) - cssContent.forEach((value) => { - resCode = `${resCode}\n` + + descriptor.styles && descriptor.styles.forEach((value, index) => { + let injectCssCode = '' + cssContent.forEach((value) => { + if (value.styleTagIndex === index) + injectCssCode = `${injectCssCode}\n${transformInjectCSS(value.content, parseImports(value.content).imports)}` + }) + const lang = value.lang || 'css' + const scoped = value.scoped ? 'scoped' : '' + resCode = `` }) code = removeStyleTagsAndContent(code) - return `${code}\n${resCode}` + return `${code}\n ${resCode}` } export function removeStyleTagsAndContent(html: string): string { diff --git a/packages/core/runtime/__test__/__snapshots__/process-css.spec.ts.snap b/packages/core/runtime/__test__/__snapshots__/process-css.spec.ts.snap index 5d369e4..4a323a1 100644 --- a/packages/core/runtime/__test__/__snapshots__/process-css.spec.ts.snap +++ b/packages/core/runtime/__test__/__snapshots__/process-css.spec.ts.snap @@ -25,6 +25,7 @@ exports[`process css > getVBindVariableListByPath: basic 1`] = ` { "content": "content foo color", "lang": "scss", + "styleTagIndex": 0, }, }, "vbindVariableListByPath": [ diff --git a/packages/core/runtime/process-css.ts b/packages/core/runtime/process-css.ts index ee2343a..f6bb7e1 100644 --- a/packages/core/runtime/process-css.ts +++ b/packages/core/runtime/process-css.ts @@ -32,13 +32,14 @@ export const getCSSFileRecursion = ( * @param server */ // TODO: unit test +export type TInjectCSSContent = Set<{ content: string, lang: string, styleTagIndex: number }> export const getVBindVariableListByPath = ( descriptor: SFCDescriptor, id: string, cssFiles: ICSSFileMap, server: boolean) => { const vbindVariable: Set = new Set() - const injectCSSContent = new Set<{ content: string, lang: string }>() + const injectCSSContent: TInjectCSSContent = new Set() // 遍历 sfc 的 style 标签内容 for (let i = 0; i < descriptor.styles.length; i++) { const content = descriptor.styles[i].content @@ -57,7 +58,7 @@ export const getVBindVariableListByPath = ( // 根据 @import 信息，从 cssFiles 中，递归的获取所有在预处理时生成的 cssvars 样式 getCSSFileRecursion(key, cssFiles, (res: ICSSFile) => { if (res.vBindCode) { - !server && injectCSSContent.add({ content: res.content, lang: res.lang }) + !server && injectCSSContent.add({ content: res.content, lang: res.lang, styleTagIndex: i }) res.vBindCode.forEach((vb) => { vbindVariable.add(vb) }) diff --git a/play/src/App.vue b/play/src/App.vue index 4be97c4..34a29c4 100644 --- a/play/src/App.vue +++ b/play/src/App.vue @@ -131,5 +131,4 @@ export default defineComponent({ .mobile .fixed-header { width: 100%; } -