styles are working. looking for a better solution

Author: nikos-fytros

.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",

example/components/uuid.vue

@@ -1,7 +1,7 @@
 <template>
     <div>
         <inner></inner>
-        <h2>Uuid: {{uuid ? uuid : 'no uuid'}}</h2>
+        <h2 class="test">Uuid: {{uuid ? uuid : 'no uuid'}}</h2>
     </div>
 </template>
 

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>

example/vueFiles/components/uuid.vue

@@ -16,6 +16,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 +65,13 @@ 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];
+                    // console.log(resultsArray[2]);
+                    let style = '';
+                    if (resultsArray[2]) {
+                        style = resultsArray[2];
+                    } else {
+                        style = resultsArray[1].styles ? resultsArray[1].styles : '';
+                    }
 
                     script.template = template;
 

example/vueFiles/components/uuid2.vue

@@ -104,14 +104,17 @@ 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);
+                        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);
                     }
                 })