Unsupported CSS preprocessors are interpreted as raw CSS

[neillrobson]

Summary

When using an unsupported CSS preprocessor, such as LESS CSS, the plugin defaults to interpreting the stylesheet as raw CSS. This configuration can lead to false positives with misleading error messages in ESLint violation reports.

Example

Given the following template:

<template>
    <div class="foo"><div class="foo-bar" /></div>
</template>
<style scoped lang="less">
.foo {
  &-bar {
  }
}
</style>

A warning against vue-scoped-css/no-unused-selectors will pop up, with the message "The selector .foo-bar is unused."

Although it appears that the plugin is interpreting the stylesheet properly, it is in fact treating .foo and -bar as two distinct VCSSClassSelector nodes. They have no whitespace (" ") VCSSSelectorCombinator in between them, creating the misleading warning message.

The correct LESS interpretation of the above template would be .foo-bar as a single VCSSClassSelector node.

Recommendation

Rather than defaulting to the raw CSSSelectorResolver when any unrecognized stylesheet format is encountered (link to relevant code), the plugin should refrain from parsing those stylesheets altogether. Potentially, it should also log the presence of the problematic stylesheets for debugging purposes, outside of any ESLint warning/error infrastructure.

The raw CSSSelectorResolver should only be used when the lang="" attribute is not specified at all on a given <style> block.