fixes grandchild styles

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);
         }

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
                     };

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)

tests/example/components/inner.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <p>Inner Text</p>
+        <p class="pink">Inner Text</p>
     </div>
 </template>
 
@@ -13,4 +13,8 @@ export default {
 </script>
 
 <style lang="css">
+.pink {
+    color: pink;
+    text-decoration: underline;
+}
 </style>

tests/index.js

@@ -20,8 +20,8 @@ const vueOptions = {
     }
 }
 
-const exampleHead = `<head>\n<title>Page Title</title>\n<style>.test{color:#00f}.red{color:#9acd32}</style></head>`;
-const exampleScript = `<script>(function(){"use strict";var u=function(){return new Vue({mixins:[{methods:{hello:function(){console.log(\'Hello\')}}}],data:function(){return{"title":"Express Vue","message":"Hello world","uuid":"farts"}},methods:{test:function(){console.error(\'test\')}},components:{uuid:{props:["uuid"],data:function(){return{}},components:{inner:{data:function(){return{}},template:"<div><p>Inner Text</p></div>"}},styles:"",template:"<div><inner></inner><h2 class=\\"test\\">Uuid: {{uuid ? uuid : \'no uuid\'}}</h2></div>"},uuid2:{props:["uuid2"],data:function(){return{}},template:"<div><h3 class=\\"red\\">Uuid2: {{uuid2 ? uuid2 : \'no uuid\'}}</h3></div>"}},styles:".test{color:#00f}.red{color:#9acd32}",template:"<div><h1>{{title}}</h1><p>Welcome to the {{title}} demo. Click a link:</p><input v-model=\\"message\\" placeholder=\\"edit me\\"><p>{{message}}</p><uuid :uuid=\\"uuid\\"></uuid><uuid2 :uuid2=\\"uuid2\\"></uuid2><button type=\\"button\\" name=\\"button\\" v-on:click=\\"this.hello\\">Test mixin</button> <button type=\\"button\\" name=\\"button\\" v-on:click=\\"this.test\\">Test method</button></div>"})};typeof module!==\'undefined\'&&module.exports?(module.exports=u):(this.app=u())}).call(this),app.$mount(\'#app\')</script>`;
+const exampleHead = `<head>\n<title>Page Title</title>\n<style>.red{color:#9acd32}.pink{color:pink;text-decoration:underline}.test{color:#00f}</style></head>`;
+const exampleScript = `<script>(function(){"use strict";var t=function(){return new Vue({mixins:[{methods:{hello:function(){console.log('Hello')}}}],data:function(){return{"title":"Express Vue","message":"Hello world","uuid":"farts"}},methods:{test:function(){console.error('test')}},components:{uuid:{props:["uuid"],data:function(){return{}},components:{inner:{data:function(){return{}},template:"<div><p class=\\"pink\\">Inner Text</p></div>"}},styles:".pink{color:pink;text-decoration:underline}",template:"<div><inner></inner><h2 class=\\"test\\">Uuid: {{uuid ? uuid : 'no uuid'}}</h2></div>"},uuid2:{props:["uuid2"],data:function(){return{}},template:"<div><h3 class=\\"red\\">Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3></div>"}},styles:".pink{color:pink;text-decoration:underline}.test{color:#00f}.red{color:#9acd32}",template:"<div><h1>{{title}}</h1><p>Welcome to the {{title}} demo. Click a link:</p><input v-model=\\"message\\" placeholder=\\"edit me\\"><p>{{message}}</p><uuid :uuid=\\"uuid\\"></uuid><uuid2 :uuid2=\\"uuid2\\"></uuid2><button type=\\"button\\" name=\\"button\\" v-on:click=\\"this.hello\\">Test mixin</button> <button type=\\"button\\" name=\\"button\\" v-on:click=\\"this.test\\">Test method</button></div>"})};typeof module!=='undefined'&&module.exports?(module.exports=t):(this.app=t())}).call(this),app.$mount('#app')</script>`;
 
 test('renders App object', t => {
     const renderer = new ExpressVueRenderer(options);

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 => {

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() {