[SOLVED] Is using `lang` attribute in a `style` tag allowed to mark CSS preprocessor language for VueJS? Any drawbacks if we use it?

Is using `lang` attribute in a `style` tag allowed to mark CSS preprocessor language for VueJS? Any drawbacks if we use it?

From time to time, I see people write thing like

<style lang="scss"> ... </style>

<style lang="stylus"> ... </style>

I searched the doc for style tag and lang is not part of the validate attribute. Is it recommended to use lang like this when writing scoped style that involve additional CSS preprocessor styles?

Solution

The Vue loader documentation specifically states to do this. So not only is it recommended, it appears to be required for the feature to work correctly.

It's a flagrant violation of the HTML standard all the same (misusing the lang attribute with custom values), but JavaScript frameworks and components aren't exactly known for standards compliance. For one, presumably, no one is actually running their components through a checker. This is probably one of the numerous cases where they don't bother with the data- prefix simply because it means unnecessary keystrokes. Which, IMHO, is an incredibly lousy excuse.