diff --git a/driver/js/packages/hippy-vue-loader/lib/loaders/stylePostLoader.js b/driver/js/packages/hippy-vue-loader/lib/loaders/stylePostLoader.js index 4c7bdca2299..10cdc16a883 100644 --- a/driver/js/packages/hippy-vue-loader/lib/loaders/stylePostLoader.js +++ b/driver/js/packages/hippy-vue-loader/lib/loaders/stylePostLoader.js @@ -10,8 +10,14 @@ module.exports = function (source, inMap) { source, filename: this.resourcePath, id: `data-v-${query.id}`, + postcssPlugins: [...(() => { + const query = qs.parse(this.resourceQuery.slice(1)); + const { id, scoped } = query; + if (!scoped) return []; + return [require('postcss-class-prefix')(`v${id}.`)]; + })()], map: inMap, - scoped: !!query.scoped, + scoped: false, trim: true, }); diff --git a/driver/js/packages/hippy-vue-loader/lib/loaders/templateLoader.js b/driver/js/packages/hippy-vue-loader/lib/loaders/templateLoader.js index 4585e67ffa9..e5a83822034 100644 --- a/driver/js/packages/hippy-vue-loader/lib/loaders/templateLoader.js +++ b/driver/js/packages/hippy-vue-loader/lib/loaders/templateLoader.js @@ -21,10 +21,26 @@ module.exports = function (source) { // allow using custom compiler via options const compiler = options.compiler || require('vue-template-compiler'); + options.compilerOptions = { + modules: [{ + postTransformNode: (el, options) => { + if (!options.scopeId) { + return; + } + const id = options.scopeId.replace('data-v-', 'v'); + if (el.staticClass) { + el.staticClass = `"${id} ${el.staticClass.replace(/"/g, '')}"`; + } else { + el.staticClass = `"${id}"`; + } + }, + }], + }; + const compilerOptions = Object.assign({ outputSourceRange: true, }, options.compilerOptions, { - scopeId: query.scoped ? `data-v-${id}` : null, + scopeId: query.scoped ? `v${id}` : null, comments: query.comments, });