Merge pull request #75 from express-vue/feature/fix_component_styles

nikos-fytros · web-flow · commit 8b564dc74fa2 · 2017-08-30T22:36:02.000+02:00
Feature/fix component styles
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -3,13 +3,17 @@
     // Hover to view descriptions of existing attributes.
     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
     "version": "0.2.0",
-    "configurations": [{
+    "configurations": [
+
+        {
             "name": "Attach to Process",
             "type": "node",
             "request": "attach",
             "port": 9229,
             "protocol": "inspector",
-            "restart": true
+            "restart": true,
+            "outFiles": ["${workspaceRoot}/lib"],
+            "sourceMaps": true
         },
         {
             "type": "node",
diff --git a/example/app.js b/example/app.js
@@ -15,7 +15,7 @@ var exampleMixin = {
 };
 
 const options = {
-    rootPath: path.join(__dirname, '/vueFiles'),
+    rootPath: path.join(__dirname, ''),
     vue: {
         head: {
             meta: [{
@@ -66,7 +66,7 @@ app.get('/', (req, res) => {
             ]
         }
     }
-    res.renderVue('main/main.vue', data, vueOptions)
+    res.renderVue('main.vue', data, vueOptions)
 });
 
 app.listen(3000);
diff --git a/example/components/uuid.vue b/example/components/uuid.vue
@@ -1,12 +1,12 @@
 <template>
     <div>
         <inner></inner>
-        <h2>Uuid: {{uuid ? uuid : 'no uuid'}}</h2>
+        <h2 class="test">Uuid: {{uuid ? uuid : 'no uuid'}}</h2>
     </div>
 </template>
 
 <script>
-import inner from '../components/inner.vue';
+import inner from './components/inner.vue';
 export default {
     props: ['uuid'],
     data: function () {
diff --git a/example/components/uuid2.vue b/example/components/uuid2.vue
@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h3>Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3>
+        <h3 class="red">Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3>
     </div>
 </template>
 
@@ -14,7 +14,7 @@ export default {
 </script>
 
 <style lang="css">
-.test {
-    color: blue;
+.red {
+    color: yellowgreen;
 }
 </style>
diff --git a/example/main.vue b/example/main.vue
diff --git a/example/vueFiles/components/uuid.vue b/example/vueFiles/components/uuid.vue
diff --git a/example/vueFiles/components/uuid2.vue b/example/vueFiles/components/uuid2.vue
diff --git a/example/vueFiles/main/main.vue b/example/vueFiles/main/main.vue
diff --git a/example/vueFiles/mixins/exampleMixin.js b/example/vueFiles/mixins/exampleMixin.js
diff --git a/src/parser/component.js b/src/parser/component.js
@@ -3,6 +3,7 @@
 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');
@@ -16,6 +17,7 @@ function componentParser(templatePath: string, defaults: Object, type: string, C
             scriptParser(cachedComponentContentObject.parsedContent.script, defaults, type, Cache).then(parsedScriptObject => {
                 cachedComponentContentObject.script = parsedScriptObject;
                 cachedComponentContentObject.script.template = cachedComponentContentObject.template;
+                cachedComponentContentObject.styles = parsedScriptObject.styles;
                 resolve(cachedComponentContentObject);
             }).catch(error => {
                 reject(error);
@@ -64,7 +66,12 @@ function parseContent(content: string, templatePath: string, defaults: Object, t
                 Promise.all(promiseArray).then(resultsArray => {
                     const template = resultsArray[0];
                     const script = resultsArray[1];
-                    const style = resultsArray[2];
+                    let style = '';
+                    if (resultsArray[2]) {
+                        style = resultsArray[2];
+                    } else {
+                        style = new CleanCSS({}).minify(resultsArray[1].styles ? resultsArray[1].styles : '').styles;
+                    }
 
                     script.template = template;
 
diff --git a/src/parser/style.js b/src/parser/style.js
@@ -12,17 +12,16 @@ type StyleObjectType = {
 
 function styleParser(styleObjectArray: StyleObjectType[]): Promise<string> {
     return new Promise((resolve) => {
-        if (!styleObjectArray || styleObjectArray.length === 0) {
-            resolve('');
-        } else {
+        let output = '';
+        if (styleObjectArray && styleObjectArray.length > 0) {
             for (const styleObject of styleObjectArray) {
                 if(styleObject.lang === 'scss' || styleObject.lang === 'less') {
                     console.error('Sorry please only use plain CSS in your files for now');
                 }
-                const output = new CleanCSS({}).minify(styleObject.content);
-                resolve(output.styles);
+                output += new CleanCSS({}).minify(styleObject.content).styles;
             }
         }
+        resolve(output);
     });
 }
 
diff --git a/src/utils/require.js b/src/utils/require.js
@@ -104,14 +104,19 @@ function requireFromString(code: string, filename: string = '', optsObj: Object
             }
             Promise.all(promiseArray)
                 .then(renderedItemArray => {
+                    let styles = '';
                     for (var renderedItem of renderedItemArray) {
                         const rawString = renderedItem.rendered.scriptStringRaw;
                         code = code.replace(renderedItem.match, rawString);
+                        if (renderedItem.rendered.layout && renderedItem.rendered.layout.style) {
+                            styles += renderedItem.rendered.layout.style;
+                        }
                     }
                     //check if its the last element and then render
                     const last_element = code.match(options.vueFileRegex);
                     if (last_element === undefined || last_element === null) {
                         m._compile(code, filename);
+                        m.exports.default.styles = styles;
                         resolve(m.exports.default);
                     }
                 })
diff --git a/tests/index.js b/tests/index.js
@@ -5,7 +5,7 @@ const Models = require('../src/models');
 const path = require('path');
 
 const options = {
-    rootPath: path.join(__dirname, '../example/vueFiles')
+    rootPath: path.join(__dirname, '../example')
 };
 
 const data = {
@@ -20,8 +20,8 @@ const vueOptions = {
     }
 }
 
-const exampleHead = `<head>\n<title>Page Title</title>\n</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{}},template:"<div><h2>Uuid: {{uuid ? uuid : 'no uuid'}}</h2></div>"},uuid2:{props:["uuid2"],data:function(){return{}},template:"<div><h3>Uuid2: {{uuid2 ? uuid2 : 'no uuid'}}</h3></div>"}},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>.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>`;
 
 test('renders App object', t => {
     const renderer = new ExpressVueRenderer(options);
diff --git a/tests/parser/index.js b/tests/parser/index.js
@@ -20,9 +20,9 @@ var cacheOptions = {
 var lruCache = LRU(cacheOptions);
 
 let types = new Types();
-const component = __dirname + '/../../example/vueFiles/components/uuid.vue';
+const component = __dirname + '/../../example/components/uuid.vue';
 const options = {
-    rootPath: path.join(__dirname, 'tests'),
+    rootPath: path.join(__dirname, '../../example'),
     component: 'uuid.vue'
 };
 
diff --git a/tests/utils/checkPathUtils.js b/tests/utils/checkPathUtils.js
@@ -5,7 +5,7 @@ import {
 } from '../../src/utils';
 import Models from '../../src/models';
 
-const rootPath = path.join(__dirname, '../../example/vueFiles/');
+const rootPath = path.join(__dirname, '../../example/');
 const defaults = new Models.Defaults();
 var LRU = require('lru-cache');
 var cacheOptions = {
@@ -15,7 +15,7 @@ var cacheOptions = {
 var lruCache = LRU(cacheOptions);
 
 test('correctPath Path', t => {
-    const filePath = path.join(rootPath, '../../example/vueFiles/components/uuid.vue');
+    const filePath = path.join(rootPath, '../example/components/uuid.vue');
     const correctPath = rootPath + 'components/uuid.vue';
 
     return PathUtils.getCorrectPathForFile(filePath, 'view', defaults, lruCache)

Original file line number	Diff line number	Diff line change
`@@ -15,7 +15,7 @@ var exampleMixin = {`
`15`	`15`	`};`
`16`	`16`
`17`	`17`	`const options = {`
`18`		`- rootPath: path.join(__dirname, '/vueFiles'),`
	`18`	`+ rootPath: path.join(__dirname, ''),`
`19`	`19`	`vue: {`
`20`	`20`	`head: {`
`21`	`21`	`meta: [{`
`@@ -66,7 +66,7 @@ app.get('/', (req, res) => {`
`66`	`66`	`]`
`67`	`67`	`}`
`68`	`68`	`}`
`69`		`- res.renderVue('main/main.vue', data, vueOptions)`
	`69`	`+ res.renderVue('main.vue', data, vueOptions)`
`70`	`70`	`});`
`71`	`71`
`72`	`72`	`app.listen(3000);`