fix(vuetransfomer): fix unknown asset language for vue scripts/templa… (

#7056)

* fix(vuetransfomer): fix unknown asset language for vue scripts/templates/styles

* test: loading external files from vue sfcs

Co-authored-by: Jasper De Moor <jasperdemoor@gmail.com>

packages/core/integration-tests/test/integration/vue-external-files/App.vue

@@ -0,0 +1,3 @@
+<template src="./main.pug"></template>
+<style src="./style.scss"></style>
+<script src="./script.ts"></script>

packages/core/integration-tests/test/integration/vue-external-files/main.pug

@@ -0,0 +1,5 @@
+div
+  h1 foo 
+  h2 bar
+  div.box
+    p {{ msg }}

packages/core/integration-tests/test/integration/vue-external-files/script.ts

@@ -0,0 +1,7 @@
+export default {
+  data () {
+    return {
+      msg: 'Hello World'
+    }
+  }
+}

packages/core/integration-tests/test/integration/vue-external-files/style.scss

@@ -0,0 +1,24 @@
+$cool-color: #c0ff33;
+
+div {
+  h1 {
+    color: red;
+  }
+}
+
+h2 {
+  color: blue;
+
+  &:hover {
+    color: $cool-color;
+  }
+}
+
+.box {
+  border: 1px solid black;
+
+  p {
+    color: $cool-color;
+    font-size: 10rem;
+  }
+}

packages/core/integration-tests/test/vue.js

@@ -105,4 +105,19 @@ describe('vue', function() {
     assert.equal(typeof output.render, 'function');
     assert.deepEqual(output.data(), {msg: 'Hello from Component A!'});
   });
+  it('should load external templates/styles/scripts properly', async function() {
+    let b = await bundle(
+      path.join(__dirname, '/integration/vue-external-files/App.vue'),
+    );
+    let output = (await run(b)).default;
+    assert.equal(typeof output.render, 'function');
+    assert.deepEqual(output.data(), {msg: 'Hello World'});
+    let contents = await outputFS.readFile(
+      path.join(distDir, 'App.css'),
+      'utf8',
+    );
+    assert(contents.includes('color: #c0ff33'));
+    assert(contents.includes('h2:hover'));
+    assert(contents.includes('.box p'));
+  });
 });

packages/transformers/vue/src/VueTransformer.js

@@ -207,7 +207,7 @@ async function processPipeline({
             await resolve(asset.filePath, template.src),
           )
         ).toString();
-        template.lang = extname(template.src);
+        template.lang = extname(template.src).slice(1);
       }
       let content = template.content;
       if (template.lang && !['htm', 'html'].includes(template.lang)) {
@@ -267,7 +267,7 @@ ${
             await resolve(asset.filePath, script.src),
           )
         ).toString();
-        script.lang = extname(script.src);
+        script.lang = extname(script.src).slice(1);
       }
       let type;
       switch (script.lang || 'js') {
@@ -323,7 +323,7 @@ ${
             if (!style.module) {
               style.module = MODULE_BY_NAME_RE.test(style.src);
             }
-            style.lang = extname(style.src);
+            style.lang = extname(style.src).slice(1);
           }
           switch (style.lang) {
             case 'less':