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

[kanlukasz]

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

[coderwyd]

I have the same problem

[adalinesimonian]

Able to replicate this. To format documents, we take the formatting options (e.g. indent size, tabs or spaces) from VS Code, convert them into their respective Stylelint rules (e.g. the indentation rule), then give Stylelint this configuration to work with. However, it looks like Stylelint doesn't merge these options with the configuration it finds. Instead, when it sees configuration options passed via the API, it stops looking for config files. So effectively, it tries to run without the syntax settings in your Stylelint config and throws the error you see in the log.

I think that the best way to handle this is to have a way to tell Stylelint, "hey, these options are actually meant to override options you find, so keep looking for a config file." Otherwise, we'd have to effectively duplicate the logic Stylelint already has for searching for, reading, and making sense of config files, which I don't think would be the best way forward. I'll raise an issue upstream to try and figure out what's the best way to handle this issue and I'll link it here.

[coderwyd]

Now I can format the less file correctly, but I still can't format the styles in the Vue file.

[adalinesimonian]

Blocked by stylelint/stylelint#5723

Once implemented, we'll make changes here to resolve the Stylelint config for a given file and then use it as a base for the formatting options provided by the client.

[Clearmist]

If I'm following this conversation it might be the reason why my .stylelintrc file is being completely ignored. Right-clicking in a stylesheet and choosing to format the document ignores the stylelint config whereas saving the file will trigger the format in a different way and the config will be found.

[calvinwyoung]

@adalinesimonian Do you have a sense for when this issue might be resolved? It appears that stylelint/stylelint#5723 is fixed now.

Thanks for maintaining this extension!

[jeddy3]

I've labeled as help wanted now that the upstream issues is resolved.

Please consider contributing if you have time.

[EvanShaw]

I'm assuming since this issue hasn't been closed that no fix has been released yet? I'm also experiencing the same exact problem.

My stylelint config is in package.json. The only thing I'm doing is extending the SCSS standard like so:

"stylelint": {
    "extends": [
      "stylelint-config-standard-scss"
    ]
}

.vscode/settings.json:

{
  "stylelint.validate": ["css", "scss"],
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false
}

Package versions:

• stylelint-vscode: v1.2.2
• stylelint: v14.6.1
• stylelint-config-standard-scss: v3.0.0
• node: v16.14.2

Symptoms:
Running stylelint --fix directly from the command line works fine. Also, opening an .scss file in vscode and running the command Stylelint: Fix all auto-fixable Problems works fine. Syntax/rule errors also appear in .scss files in vscode.

The only thing that doesn't work is vscode's Format Document command. Invoking via right-click or hotkeys (Ctrl+Shift+I for me) makes no difference. The following error always occurs:

When linting something other than CSS, you should install an appropriate syntax, e.g. "postcss-scss", and use the "customSyntax" option

Installing postcss-scss directly and adding it as a customSyntax makes no difference.

[maxicasa]

Any update? I have the same problem...

[jimblue]

Thank you @EvanShaw for your perfect description of the bug. 👍🏼
I'm having the exact same problem with the same configuration.

[phederal]

I have the same problem!

[243083df]

Can you just delete default rules then?

[seyanaracore]

Same problem

[seyanaracore]

i could win
global settings.json

project settings.json

.stylelintrc.js

module.exports = {
  extends: [
    "stylelint-config-clean-order",
    "stylelint-config-standard-scss",
    "stylelint-config-html",
    "stylelint-config-recommended-vue",
    "stylelint-config-prettier",
  ],
  configBasedir: "./node_modules/",
  plugins: ["stylelint-order"],
  overrides: [
    {
      files: ["*.css", "**/*.css"],
    },
    {
      files: ["*.scss", "**/*.scss"],
    },
    {

  files: ["*.vue", "**/*.vue"],
  customSyntax: "postcss-html"
}

],
rules: {
"no-empty-source": null,
"declaration-empty-line-before": null,
"no-missing-end-of-source-newline": null,
"selector-class-pattern": null,
"keyframes-name-pattern": null
}
}

commenting on lines in settings.json allowed to read the project file soon

[abdel-ships-it]

@adalinesimonian I understand this was blocked by Blocked by stylelint/stylelint#5723. Great you managed to fix it in stylelint/stylelint#5734, did you have any plans for updating this plugin to use the new change ? :D Thanks for your time.

[Charton100774]

Hi ! Thanks for the great job on this extension ! I'm having the same problem on my side and i'm wondering if an update will be released soon ? :)

[nolimitdev]

Same problem still. VSCode Format Document is not working when stylelint uses settings automaticaly from .stylelintrc.json in project root or when configFile is used. To have Format Document working we must paste settings directly into VSCode setting.json (user or workspace) via stylelint.config. So commiting .stylelintrc.json to repo to share with team is useless when Format Document is not working :(

[lake2]

Same problem still. VSCode Format Document is not working when stylelint uses settings automaticaly from .stylelintrc.json in project root or when configFile is used. To have Format Document working we must paste settings directly into VSCode setting.json (user or workspace) via stylelint.config. So commiting .stylelintrc.json to repo to share with team is useless when Format Document is not working :(

fix by this.

[lake2]

same issue +1

[Philip-Isaacs]

I'm having this problem as well. Is there any update on this?

[satoshionoda]

I've been facing the same issue but finally found a workaround.

I stopped using this plugin as a formatter and instead run command line on save with Run on Save plugin.

This is my settings.json (you need to change extensions and package managers according to your environment)

{
  "stylelint.validate": ["css", "scss"],
  "css.validate": false,
  "scss.validate": false,
  "stylelint.config": null,
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "\\.*scss$",
        "isAsync": true,
        "cmd": "yarn stylelint ${file} --fix"
      }
    ]
  }
}

This workaround solved my problem but I hope this issue is solved in the future.