Fix whitespace output issues with self-closing style tags

Author: zephraph

globals.d.ts

@@ -15,7 +15,7 @@ declare module 'vue-template-compiler' {
         type: string;
         content: string;
         start: number;
-        end: number;
+        end?: number;
         lang?: string;
         src?: string;
         scoped?: boolean;
@@ -29,7 +29,7 @@ declare module 'vue-template-compiler' {
         type: string;
         content: string;
         start: number;
-        end: number;
+        end?: number;
         src?: string;
         attrs: {
             [attribute: string]: string

src/index.ts

@@ -15,11 +15,16 @@ export const parse = (source: string): SFCDescriptor =>
  * Note that whitespace is preserved for debugging purposes
  */
 export const removeStyleBlock = (source: string, styleDescriptor: SFCBlock): string => {
+  const isSelfClosing = styleDescriptor.end === undefined;
+
   const start = source.lastIndexOf('<', styleDescriptor.start - 1);
-  const end = source.indexOf('>', styleDescriptor.end);
+  const end = isSelfClosing
+    ? styleDescriptor.start
+    : source.indexOf('>', styleDescriptor.end);
   const lines = source.slice(start, end).split('\n').length;
+
   return source.substring(0, start)
-    + Array(lines).map(() => '').join('\n')
+    + '\n'.repeat(lines > 1 ? lines - 1 : isSelfClosing ? 1 : 0)
     + source.substring(end + 1, source.length);
 };
 

test/cases/mixed-use.in.vue

@@ -0,0 +1,15 @@
+<style>
+  h1 {
+    color: red;
+  }
+</style>
+
+<style theme="remove" src="./test.css"/>
+
+<style theme="remove">h1 { color: pink }</style>
+
+<style theme="test">
+div {
+  box-sizing: border-box;
+}
+</style>

test/cases/mixed-use.out.vue

@@ -0,0 +1,15 @@
+<style>
+  h1 {
+    color: red;
+  }
+</style>
+
+
+
+
+
+<style theme="test">
+div {
+  box-sizing: border-box;
+}
+</style>

test/cases/remove-self-closing.in.vue

@@ -1,3 +1,9 @@
+<style>
+  h1 {
+    color: blue;
+  }
+</style>
+
 <style src="./style.css" theme="remove" />
 
 <style src="./style2.css" />

test/cases/remove-self-closing.out.vue

@@ -1,3 +1,9 @@
+<style>
+  h1 {
+    color: blue;
+  }
+</style>
+
 
 
 <style src="./style2.css" />