SFC: Invalid root tag structure should throw error

[hibiyasleep]

Moved from: vue-loader#1161

What problem does this feature solve?

In Single File Component, <script> tag may or may not closed, so this works:

<template>
  <div class="chicken">
    Chicken: {{ chicken }}
  </div>
</template>

<script>
export default {
  data() { return { chicken: 'fried' } }
}
// (EOF)

However, <style> isn't; if there's no </style>, styles are simply ignored without any warning or errors.

<template>
  <div class="chicken">
    Chicken: {{ chicken }}
  </div>
</template>

<script>
export default {
  data() { return { chicken: 'fried' } }
}
</script>

<style scoped>
.chicken { /* super important */
  font-weight: 900;
}
/* (EOF) */

What does the proposed API look like?

Any <template>, <script>, <style> tags should explicitly:

• Closed - unclosed tag should throw a warning and refuse to build.
• or May not closed - contents should build correctly even it's not closed.

[ameerthehacker]

@posva can I take up this issue.

[hibiyasleep]

Even on this stupid situation, SFC compiler doesn't throw any error.

At least, with my config, <script type="sass"> seems invoke both of sass-loader and eslint, and sass got transpiled and worked. is this intended behavior?

[hibiyasleep]

Also when multiple <script> tag exists, all but last tags are simply ignored.