From 1a5bf091d61e8be712875db9f5f8c6038a4760cd Mon Sep 17 00:00:00 2001 From: Daniel Cherubini Date: Fri, 1 Sep 2017 11:21:20 +0200 Subject: [PATCH 1/2] fixes styles in grandchild components --- src/models/defaults.js | 5 +++++ src/parser/component.js | 23 +++++++++++------------ src/utils/require.js | 13 ++++++++++--- tests/example/components/inner.vue | 6 +++++- tests/index.js | 4 ++-- tests/parser/index.js | 2 +- 6 files changed, 34 insertions(+), 19 deletions(-) diff --git a/src/models/defaults.js b/src/models/defaults.js index 414b0da..4f75286 100644 --- a/src/models/defaults.js +++ b/src/models/defaults.js @@ -17,10 +17,15 @@ class Defaults { options: Object; vue: Object; data: Object; + style: string; constructor(options: Object = {}) { this.options = options; this.layout = new Layout.Layout(options.layout); + if (options.style) { + this.style = options.style; + } + if (options.rootPath) { this.rootPath = path.resolve(options.rootPath); } diff --git a/src/parser/component.js b/src/parser/component.js index 06e9491..e3dd849 100644 --- a/src/parser/component.js +++ b/src/parser/component.js @@ -3,7 +3,6 @@ const fs = require('fs'); const camelCase = require('camel-case'); const compiler = require('vue-template-compiler'); -const CleanCSS = require('clean-css'); const styleParser = require('./style'); const htmlParser = require('./html'); const scriptParser = require('./script'); @@ -28,13 +27,14 @@ function componentParser(templatePath: string, defaults: Object, type: string, C let error = `Could Not Find Component, I was expecting it to live here \n${templatePath} \nBut I couldn't find it there, ¯\\_(ツ)_/¯\n\n`; reject(error); } else { - parseContent(content, templatePath, defaults, type, Cache).then(contentObject => { + parseContent(content, templatePath, defaults, type, Cache) + .then(contentObject => { // set the cache for the component - Cache.set(templatePath, contentObject); - resolve(contentObject); - }).catch(error => { - reject(error); - }); + Cache.set(templatePath, contentObject); + resolve(contentObject); + }).catch(error => { + reject(error); + }); } }); } @@ -66,11 +66,10 @@ function parseContent(content: string, templatePath: string, defaults: Object, t Promise.all(promiseArray).then(resultsArray => { const template = resultsArray[0]; const script = resultsArray[1]; - let style = ''; - if (resultsArray[2]) { - style = resultsArray[2]; + if (defaults.style === undefined) { + defaults.style = resultsArray[2]; } else { - style = new CleanCSS({}).minify(resultsArray[1].styles ? resultsArray[1].styles : '').styles; + defaults.style += resultsArray[2]; } script.template = template; @@ -79,7 +78,7 @@ function parseContent(content: string, templatePath: string, defaults: Object, t template: template, parsedContent: parsedContent, type: type, - style: style, + style: defaults.style, name: camelCase(templateName), script: script }; diff --git a/src/utils/require.js b/src/utils/require.js index 9809e4c..6e1c5d5 100644 --- a/src/utils/require.js +++ b/src/utils/require.js @@ -22,10 +22,11 @@ class Options { } } -function getVueObject(componentPath: string, rootPath: string, vueComponentFileMatch: string, Cache: Object): Promise < {rendered:Object, match: string} > { +function getVueObject(componentPath: string, rootPath: string, vueComponentFileMatch: string, Cache: Object, Options: Options): Promise < {rendered:Object, match: string} > { const GlobalOptions = new Models.Defaults({ rootPath: rootPath, - component: componentPath + component: componentPath, + style: Options.defaults.style || '' }); return new Promise((resolve, reject) => { Utils.setupComponent(componentPath, GlobalOptions, Cache) @@ -34,6 +35,12 @@ function getVueObject(componentPath: string, rootPath: string, vueComponentFileM if (!rendered) { reject(new Error('Renderer Error')); } else { + if (Options.defaults.style) { + Options.defaults.style += rendered.layout.style; + } else { + Options.defaults.style = rendered.layout.style; + } + resolve({ rendered: rendered, match: vueComponentFileMatch @@ -99,7 +106,7 @@ function requireFromString(code: string, filename: string = '', optsObj: Object //this is because its easier to do string replace later const vueComponentFile = vueComponentFileMatch.match(options.vueFileRegex); if (vueComponentFile && vueComponentFile.length > 0) { - promiseArray.push(getVueObject(vueComponentFile[0], options.rootPath, vueComponentFileMatch, Cache)); + promiseArray.push(getVueObject(vueComponentFile[0], options.rootPath, vueComponentFileMatch, Cache, options)); } } Promise.all(promiseArray) diff --git a/tests/example/components/inner.vue b/tests/example/components/inner.vue index 80b547b..36d6f35 100644 --- a/tests/example/components/inner.vue +++ b/tests/example/components/inner.vue @@ -1,6 +1,6 @@ @@ -13,4 +13,8 @@ export default { diff --git a/tests/index.js b/tests/index.js index 4e1a688..4c1943f 100644 --- a/tests/index.js +++ b/tests/index.js @@ -20,8 +20,8 @@ const vueOptions = { } } -const exampleHead = `\nPage Title\n`; -const exampleScript = ``; +const exampleHead = `\nPage Title\n`; +const exampleScript = ``; test('renders App object', t => { const renderer = new ExpressVueRenderer(options); diff --git a/tests/parser/index.js b/tests/parser/index.js index 8690723..e5db515 100644 --- a/tests/parser/index.js +++ b/tests/parser/index.js @@ -65,7 +65,7 @@ test('it should parse components', t => { .then(function (layout) { const exampleLayout = { type: 'COMPONENT', - style: '.test{color:#00f}', + style: '.pink{color:pink;text-decoration:underline}.test{color:#00f}', name: 'component', script: { data() { From 27d83c8242e8f3c1b8c76b9cc83613feccbd9ae5 Mon Sep 17 00:00:00 2001 From: Daniel Cherubini Date: Fri, 1 Sep 2017 12:08:24 +0200 Subject: [PATCH 2/2] added more tests to model --- tests/models/models.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/tests/models/models.js b/tests/models/models.js index c41bd6c..0aed4f5 100644 --- a/tests/models/models.js +++ b/tests/models/models.js @@ -35,8 +35,8 @@ const options = { {foo: true} ] } - - } + }, + style: '.fart{color:brown}' }; const layout = new Layout.Layout(customLayout); @@ -55,7 +55,8 @@ const exampleObject = { cache: { max: 500, maxAge: 3600000 - } + }, + style: '.fart{color:brown}' }; test('Root Path', t => {