1
0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00

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

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

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