Cannot handle rules in <style> in Svelte properly

[winston0410]

I got the following error:

       apps/bootcamp/src/routes/__layout.svelte
        41:1  ✖  Unknown rule no-unsupported-browser-features          no-unsupported-browser-features        
        41:1  ✖  Unknown rule no-low-performance-animation-properties  no-low-performance-animation-properties
       
       apps/bootcamp/src/specific/Animated.svelte
        33:1  ✖  Unknown rule no-unsupported-browser-features          no-unsupported-browser-features        
        33:1  ✖  Unknown rule no-low-performance-animation-properties  no-low-performance-animation-properties
       
       apps/bootcamp/src/routes/courses/javascript/__layout.svelte
        21:1  ✖  Unknown rule no-unsupported-browser-features          no-unsupported-browser-features        
        21:1  ✖  Unknown rule no-low-performance-animation-properties  no-low-performance-animation-properties
       
       apps/bootcamp/src/routes/courses/javascript/index.svelte
        97:1  ✖  Unknown rule no-unsupported-browser-features          no-unsupported-browser-features        
        97:1  ✖  Unknown rule no-low-performance-animation-properties  no-low-performance-animation-properties

And these are the code where the plugin has failed. I notice that they all failed at the very first line of CSS. I am using Svelte for development so I have a style block.

<style lang="scss">
	// @debug vars.$sizes;

	footer {
		padding: 2rem;
	}
</style>

This is the configuration of my stylelint.config.js

module.exports = {
	extends: [
		"stylelint-config-recommended",
		"stylelint-config-standard-scss",
		"stylelint-no-unsupported-browser-features",
		"stylelint-high-performance-animation",
		"stylelint-config-prettier"
	],
	rules: {
		"plugin/no-unsupported-browser-features": [
			true,
			{
				severity: "warning"
			}
		],
		"plugin/no-low-performance-animation-properties": [
			true,
			{
				severity: "warning"
			}
		],
		// Scss doesn't understand space seperated values
		"color-function-notation": ["legacy"],
		"unit-disallowed-list": ["em"],
		"selector-not-notation": "complex",
		"value-keyword-case": "lower",
		"font-weight-notation": "numeric",
		"color-named": "never",
		"selector-pseudo-class-no-unknown": [true, {
			ignorePseudoClasses: ["global"]
		}]
	},
	customSyntax: "postcss-html"
};

[ismay]

Hi @winston0410. Yes it's quite possible that any non standard syntax will cause this plugin to fail. It doesn't officially support it. See here: #136 (comment).

It's in the readme (see the top paragraph):

Doiuse and this plugin are only compatible with standard css syntax, so syntaxes like scss, less and others aren't supported.

We could make that more prominent though. If you have a suggestion on how to do so feel free to submit a PR!