blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix(CLI): Vue SFC style binding failure (#12799)

Browse Source
This commit is contained in:
zoy 2024-04-20 15:41:20 +08:00 committed by GitHub
parent 7578bebfff
commit d7956abc5e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 22 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/vant-cli/src/compiler/compile-sfc.ts
View File

@ -6,6 +6,7 @@ import {
SFCBlock, SFCBlock,
compileTemplate, compileTemplate,
compileScript, compileScript,
compileStyle,
} from 'vue/compiler-sfc'; } from 'vue/compiler-sfc';
import { replaceExt } from '../common/index.js'; import { replaceExt } from '../common/index.js';
@ -37,7 +38,7 @@ function injectRender(script: string, render: string) {
} }
function injectScopeId(script: string, scopeId: string) { function injectScopeId(script: string, scopeId: string) {
script += `\n${VUEIDS}._scopeId = '${scopeId}'`; script += `\n${VUEIDS}.__scopeId = '${scopeId}'`;
return script; return script;
} }
@ -75,7 +76,8 @@ export async function compileSfc(filePath: string): Promise<any> {
const { template, styles } = descriptor; const { template, styles } = descriptor;
const hasScoped = styles.some((s) => s.scoped); const hasScoped = styles.some((s) => s.scoped);
const scopeId = hasScoped ? `data-v-${hash(source)}` : ''; const scopeId = hasScoped ? hash(source) : '';
const scopeKey = scopeId ? `data-v-${scopeId}` : '';
// compile js part // compile js part
if (descriptor.script || descriptor.scriptSetup) { if (descriptor.script || descriptor.scriptSetup) {
@ -87,35 +89,32 @@ export async function compileSfc(filePath: string): Promise<any> {
new Promise((resolve) => { new Promise((resolve) => {
let script = ''; let script = '';
let bindingMetadata; const { bindings, content } = compileScript(descriptor, {
if (descriptor.scriptSetup) { id: scopeKey,
const { bindings, content } = compileScript(descriptor, { });
id: scopeId,
});
script += content;
bindingMetadata = bindings;
} else {
script += descriptor.script!.content;
}
script += content;
script = injectStyle(script, styles, filePath); script = injectStyle(script, styles, filePath);
script = script.replace(EXPORT, `const ${VUEIDS} =`); script = script.replace(EXPORT, `const ${VUEIDS} =`);
if (template) { if (template) {
const render = compileTemplate({ const render = compileTemplate({
id: scopeId, id: scopeKey,
source: template.content, source: template.content,
scoped: !!scopeKey,
filename: filePath, filename: filePath,
compilerOptions: { compilerOptions: {
bindingMetadata, scopeId: scopeKey,
bindingMetadata: bindings,
}, },
}).code; }).code;
script = injectRender(script, render); script = injectRender(script, render);
} }
if (scopeId) { if (scopeKey) {
script = injectScopeId(script, scopeId); script = injectScopeId(script, scopeKey);
} }
script += `\n${EXPORT} ${VUEIDS}`; script += `\n${EXPORT} ${VUEIDS}`;
@ -136,20 +135,14 @@ export async function compileSfc(filePath: string): Promise<any> {
...styles.map(async (style, index: number) => { ...styles.map(async (style, index: number) => {
const cssFilePath = getSfcStylePath(filePath, style.lang || 'css', index); const cssFilePath = getSfcStylePath(filePath, style.lang || 'css', index);
const styleSource = trim(style.content); const styleSource = compileStyle({
source: style.content,
filename: path.basename(cssFilePath),
scoped: style.scoped,
id: scopeId,
});
// TODO support scoped return outputFile(cssFilePath, trim(styleSource.code));
// if (style.scoped) {
// styleSource = compileUtils.compileStyle({
// id: scopeId,
// scoped: true,
// source: styleSource,
// filename: cssFilePath,
// preprocessLang: style.lang,
// }).code;
// }
return outputFile(cssFilePath, styleSource);
}), }),
); );