vscode-stylelint: [Bug]: Format Document not working ((still ask about "postcss-scss", and use the "customSyntax" option))

How did you encounter this bug?

I tried to use Format Document but it doesn’t work. Note: Fix all stylelint autofixable works all the time

My package.json:

{
	"private": true,
	"devDependencies": {
		"autoprefixer": "latest",
		"bootstrap": "4.6.1",
		"nodemon": "latest",
		"postcss": "latest",
		"postcss-cli": "latest",
		"postcss-scss": "^4.0.2",
		"sass": "^1.43.4",
		"stylelint": "latest",
		"stylelint-config-recommended": "latest",
		"stylelint-config-sass-guidelines": "latest",
		"stylelint-config-standard": "latest",
		"stylelint-config-standard-scss": "^2.0.1",
		"svgo": "latest"
	}
}

My .stylelintrc:

{
	"extends": [
		"stylelint-config-standard-scss"
	],
	"customSyntax": "postcss-scss",
	"rules": {
		"indentation": "tab",
		"max-nesting-depth": null,
		"selector-max-compound-selectors": null,
		"selector-no-qualifying-type": null,
		"selector-class-pattern": null,
		"selector-max-id": null
	}
}

Code Snippet

// ------- Main navigation -------
.cssext-main-menu {
	> ul > li > a {
		font-weight: bold;
		text-transform: uppercase;
	}

	.dropdown-menu {
		border: 0;
		margin-left: 15px;
		margin-right: 15px;
	}

	@media (min-width: 768px) {
		> ul > li {
			border-right: 1px dotted #a3a3a3;
		}

		> ul > li:last-child {
			border-right: 0;
		}

		.navbar-nav .nav-link:first-child, {
			padding-left: 0;
		}

		.navbar-nav .nav-link:last-child, {
			padding-right: 0;
		}

		.dropdown-menu {
			border-radius: 0;
			margin-left: -30px;
			margin-right: unset;
			margin-top: 16px;
			padding: 7px;
		}

		.dropdown-menu.show {
			display: grid;
			grid-auto-flow: column;
			grid-template-rows: 1fr 1fr 1fr;
		}

		.dropdown-item {
			text-align: left;

			&:active {
				background-color: #f8f9fa;
				color: #535353;
			}
		}

		.dropdown-menu .dropdown-item {
			text-align: left;
		}

		.dropdown-item::before {
			background: #dc3545;
			content: '';
			display: inline-block;
			height: 8px;
			margin-bottom: 1px;
			margin-right: 8px;
			width: 8px;
		}

		.dropdown::after {
			background-color: rgba(0, 0, 0, 0.7);
			bottom: 0;
			content: '';
			left: 0;
			opacity: 0;
			pointer-events: none;
			right: 0;
			top: 0;
			transition: opacity 0.15s ease-in-out;
			visibility: hidden;
		}

		.dropdown.show .nav-link {
			position: relative;
			z-index: 12;
		}

		.dropdown.show::after {
			opacity: 1;
			position: fixed;
			visibility: visible;
			z-index: 10;
		}
	}
}

Extension Configuration

{
    "stylelint.snippet": [
        "css",
        "scss"
    ],
    "stylelint.validate": [
        "css",
        "scss"
    ],
}

Actual Behaviour

Format Document not working

Expected Behaviour

Format Document should working

Logs

I am not sure when/where to use the NODE_ENV since I am using WLS2 on Windows? Anyway, the current Stylelint OUTPUT is as follows:

/var/www/xxxx/xxxxxx/xxxxxx/assets/scss/style.scss: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option
/var/www/xxxx/xxxxxx/xxxxxx/assets/scss/style.scss: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option
/var/www/xxxx/xxxxxx/xxxxxx/assets/scss/style.scss: When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option

Stylelint Version

14.1.0

vscode-stylelint Version

1.2.0

Node.js Version

v16.13.0

Operating System

Ubuntu 20.04 focal on WSL2

Windows Subsystem for Linux

WSL2 on Win 10 , x64 10.0.19043

Code of Conduct

• I agree to follow vscode-stylelint’s Code of Conduct