From 956ac4422b5f16b38ba76654bce324067a584046 Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Wed, 31 Jan 2018 23:56:01 +0800 Subject: [PATCH 1/3] removed module id for non-scoped component (close #853) --- lib/loader.js | 34 +++++++++++++----------- test/fixtures/style-import-twice-sub.vue | 3 +++ test/fixtures/style-import-twice.vue | 9 +++++++ test/test.js | 13 +++++++++ 4 files changed, 44 insertions(+), 15 deletions(-) create mode 100644 test/fixtures/style-import-twice-sub.vue create mode 100644 test/fixtures/style-import-twice.vue diff --git a/lib/loader.js b/lib/loader.js index 7f40251b7..7f87fa821 100644 --- a/lib/loader.js +++ b/lib/loader.js @@ -121,14 +121,15 @@ module.exports = function (content) { ) bubleTemplateOptions.transforms.stripWithFunctional = functionalTemplate - const templateCompilerOptions = - '?' + - JSON.stringify({ - id: moduleId, - hasScoped, - hasComment, - buble: bubleTemplateOptions - }) + const templateCompilerOptionsObject = { + hasScoped, + hasComment, + buble: bubleTemplateOptions + } + if (hasScoped) { + templateCompilerOptionsObject.id = moduleId + } + const templateCompilerOptions = '?' + JSON.stringify(templateCompilerOptionsObject) const defaultLoaders = { html: templateCompilerPath + templateCompilerOptions, @@ -592,16 +593,19 @@ module.exports = function (content) { let styleCompiler = '' if (type === 'styles') { // style compiler that needs to be applied for all styles + const styleCompilerOptionsObject = { + // a marker for vue-style-loader to know that this is an import from a vue file + vue: true, + scoped: !!scoped, + sourceMap: cssSourceMap + } + if (scoped) { + styleCompilerOptionsObject.id = moduleId + } styleCompiler = styleCompilerPath + '?' + - JSON.stringify({ - // a marker for vue-style-loader to know that this is an import from a vue file - vue: true, - id: moduleId, - scoped: !!scoped, - sourceMap: cssSourceMap - }) + + JSON.stringify(styleCompilerOptionsObject) + '!' // normalize scss/sass/postcss if no specific loaders have been provided if (!loaders[lang]) { diff --git a/test/fixtures/style-import-twice-sub.vue b/test/fixtures/style-import-twice-sub.vue new file mode 100644 index 000000000..6ae3d7173 --- /dev/null +++ b/test/fixtures/style-import-twice-sub.vue @@ -0,0 +1,3 @@ + + + diff --git a/test/fixtures/style-import-twice.vue b/test/fixtures/style-import-twice.vue new file mode 100644 index 000000000..1459b47e0 --- /dev/null +++ b/test/fixtures/style-import-twice.vue @@ -0,0 +1,9 @@ + + + + diff --git a/test/test.js b/test/test.js index e7f8ddcf2..fc3117044 100644 --- a/test/test.js +++ b/test/test.js @@ -256,6 +256,19 @@ describe('vue-loader', () => { }) }) + it('style import for a same file twice', done => { + test({ + entry: 'style-import-twice.vue' + }, (window) => { + const styles = window.document.querySelectorAll('style') + expect(styles[0].textContent).to.contain('h1 { color: red;\n}') + // import with scoped + const id = 'data-v-' + genId('style-import-twice.vue') + expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green;\n}') + done() + }) + }) + it('template import', done => { test({ entry: 'template-import.vue' From e615061b294af53b8469b40cfb5a5db4e36adf5b Mon Sep 17 00:00:00 2001 From: Jinjiang Date: Thu, 1 Feb 2018 01:17:50 +0800 Subject: [PATCH 2/3] improved test case for style import twice --- test/test.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/test/test.js b/test/test.js index fc3117044..22c29466a 100644 --- a/test/test.js +++ b/test/test.js @@ -121,6 +121,19 @@ function interopDefault (module) { : module } +function initStylesForAllSubComponents (module) { + if (module.components) { + for (const name in module.components) { + const sub = module.components[name] + const instance = {} + if (sub && sub.beforeCreate) { + sub.beforeCreate.forEach(hook => hook.call(instance)) + } + initStylesForAllSubComponents(sub) + } + } +} + describe('vue-loader', () => { it('basic', done => { test({ @@ -259,12 +272,16 @@ describe('vue-loader', () => { it('style import for a same file twice', done => { test({ entry: 'style-import-twice.vue' - }, (window) => { + }, (window, module) => { + initStylesForAllSubComponents(module) const styles = window.document.querySelectorAll('style') + expect(styles.length).to.equal(3) expect(styles[0].textContent).to.contain('h1 { color: red;\n}') // import with scoped const id = 'data-v-' + genId('style-import-twice.vue') expect(styles[1].textContent).to.contain('h1[' + id + '] { color: green;\n}') + const id2 = 'data-v-' + genId('style-import-twice-sub.vue') + expect(styles[2].textContent).to.contain('h1[' + id2 + '] { color: green;\n}') done() }) }) From 4944f494e3e068b7544d243a570c2c3a87516591 Mon Sep 17 00:00:00 2001 From: Evan You Date: Wed, 7 Mar 2018 00:29:57 -0500 Subject: [PATCH 3/3] Update helpers.js --- lib/helpers.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/helpers.js b/lib/helpers.js index 2367acea7..0a8d08bb3 100644 --- a/lib/helpers.js +++ b/lib/helpers.js @@ -95,7 +95,7 @@ function resolveLoaders ( const templateCompilerOptions = '?' + JSON.stringify({ - id: moduleId, + id: hasScoped ? moduleId : undefined, hasScoped, hasComment, optionsId, @@ -310,7 +310,7 @@ module.exports = function createHelpers ( // a marker for vue-style-loader to know that this is an import from a vue file optionsId, vue: true, - id: moduleId, + id: scoped ? moduleId : undefined, scoped: !!scoped, sourceMap: needCssSourceMap }) +