[bug v9.2.1] throws error when .vue files have <style lang="stylus">

[beeplin]

Describe the bug? (A clear and concise description of what the bug is)

Currently stylelint support .vue files, but cannot handle stylus. Before v9.2.1 when we have <style lang="stylus"> in a .vue file, it will ignore lang="stylus" and treat it as normal css, which could be OK if we just write stylus in a css-compatible way. But in v9.2.1 it throws error.

sample .vue file:

<template>
  <div id="hello">
    Hello World!
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
}
</script>

<style scoped lang="stylus">
#hello {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: green;
  text-align: center;
}
</style>

command:

stylelint "src/MyComponent.vue"
Error: Cannot find module 'postcss-stylus'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at requireSyntax (C:\Users\beep\git\template-vue-component\node_modules\postcss-syntax\get-syntax.js:26:19)
    at getSyntax (C:\Users\beep\git\template-vue-component\node_modules\postcss-syntax\get-syntax.js:41:10)
    at LocalFixer.parse (C:\Users\beep\git\template-vue-component\node_modules\postcss-syntax\parse-style.js:54:34)
    at parseStyle (C:\Users\beep\git\template-vue-component\node_modules\postcss-syntax\parse-style.js:89:39)
    at styles.sort.forEach.style (C:\Users\beep\git\template-vue-component\node_modules\postcss-syntax\parse-style.js:104:17)
    at Array.forEach (<anonymous>)

It is because in postcss-syntax/get-syntax.js:18-27 it simply gets the name stylus and tries to require('postcss-stylus'), which is not existing:

# postcss-syntax/get-syntax.js:18-27
function requireSyntax (lang) {
	if (/^css$/i.test(lang)) {
		return cssSyntax();
	} else if (/^sugarss$/i.test(lang)) {
		lang = "sugarss";
	} else {
		lang = lang.toLowerCase().replace(/^(postcss-)?/i, "postcss-");
	}
	return normalize(require(lang));
}

in 9.2.0 it worked OK.

Which version of stylelint are you using?

e.g. 9.2.1

[alexander-akait]

/cc @stylelint/contributors what do you think about this? How we can handle syntax what does not support?

[Arcanemagus]

In other providers I've given users the option to ignore checks like this and continue anyway, but in general I only let the tools check things they actually support. In this case it's a complete coincidence that the stylus block might be able to be parsed as CSS.

As far as stylelint is concerned without something to turn it into parsable code, the following might as well be identical:

Stylus:

#hello {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  color: green;
  text-align: center;
}

INTERCAL "Hello, world!":

DO ,1 <- #13
PLEASE DO ,1 SUB #1 <- #238
DO ,1 SUB #2 <- #108
DO ,1 SUB #3 <- #112
DO ,1 SUB #4 <- #0
DO ,1 SUB #5 <- #64
DO ,1 SUB #6 <- #194
DO ,1 SUB #7 <- #48
PLEASE DO ,1 SUB #8 <- #22
DO ,1 SUB #9 <- #248
DO ,1 SUB #10 <- #168
DO ,1 SUB #11 <- #24
DO ,1 SUB #12 <- #16
DO ,1 SUB #13 <- #162
PLEASE READ OUT ,1
PLEASE GIVE UP