Vue-loader: `lang` attribute is misused to specify preprocessors

[Justineo]

lang is a global attribute for all HTML elements. Its valid values come from BCP47.

For <style>s, we should use <style type="text/stylus"> if the syntax is gonna be HTML compatible.

For <template>s, type attribute and our current lang values are all invalid for HTML syntax.

Of course, as .vue files are not actually HTML files so this may not be a big issue.

Just open this issue for discussion.

[octref]

Not a problem I think.
Code inside <template> is html, code outside it is vue's SFC.

Actually that's how I marked it in my VSCode extension.

After // is the language I marked the line with:

<template> // vue
<p>hello</p> // html
</template> // vue
// vue
<style lang="scss"> // vue
ul { // scss
  li { } // scss
} // scss
</style> // vue

[Justineo]

Yes we can justify that by saying Vue is just using an HTML-like DSL to organize its SFC. But from my POV it tries to align itself with HTML syntax (eg. scoped in <style> tags) so the lang here feels a little weird to me.

[michael-ciniawsky]

<style postcss scoped></style><!-- Remove 'sass/stylus/less/postcss'  attr during compilation -->
<template posthtml></template><!-- Remove 'md/pug/jade/posthtml' attr during compilation -->
<script babel></script><!-- Remove 'babel/coffee/typescript' attr during compilation -->

<style postcss="styles/file.css" scoped></style>
<template posthtml="templates/file.html"></template>
<script babel="scripts/file.js"></script>

No need for lang (reserved) or MIME-Types (unnecessary/verbose). The only question is, if parse5 would complain about it 😛

[yyx990803]

The root problem is two-fold:

1. The purpose of lang in Vue SFC is indicating the pre-processor to use for the language block, and we will use that to infer the corresponding webpack loader to use. Semantically this serves a different purpose from that of MIME types. (MIME types are also verbose)

2. Even if we use type to stick to HTML as much as possible, as you mentioned, type is not valid on <template>. So I don't really see a way to be fully HTML compliant if we want to keep the convention for all language blocks consistent.

The use of lang does conflict with the global lang attribute as specced in HTML, a more appropriate attribute might be something that is not in the spec at all - like preprocessor, loader or transform, but none of them are as concise as lang :P

[Justineo]

Closing this because it's really a trivial one. 😃