Fix double slash comments being appended to the nearest property in VSCode

Question

Fix double slash comments being appended to the nearest property in VSCode

dan2kx opened this issue 4 months ago · comments

What minimal example or steps are needed to reproduce the bug?

a {
    // should allow comment
    color: red;
}

What minimal configuration is needed to reproduce the bug?

{
  "extends": [
    "stylelint-config-sass-guidelines",
    "stylelint-config-standard-scss",
    "stylelint-prettier/recommended"
  ],
  "ignoreFiles": ["node_modules/**", "dist/**", "**/*.tsx", "**/*.ts"],
  "overrides": [
    {
      "files": ["**/*.scss"],
      "customSyntax": "postcss-scss"
    }
  ],
}

How did you run Stylelint?

running in vscode plugin

Which Stylelint-related dependencies are you using?

{
    "stylelint": "^16.1.0",
    "stylelint-config-sass-guidelines": "^11.0.0",
    "stylelint-config-standard-scss": "^13.0.0",
    "stylelint-order": "^6.0.4",
    "stylelint-prettier": "^5.0.0",
}

What did you expect to happen?

would expect the comment to remain untouched

What actually happened?

a {
    // should allow comment
    color: red;
}

is converted to on save:

a {
  // should allow comment
  color: red;shouldallowcommentcolor
}

Do you have a proposal to fix the bug?

It worked correctly in version 15

Alok Vishwakarma commented 4 months ago

+1

Masafumi Koba · Answer 1 · Thu Jan 18 2024 08:43:56 GMT+0800 (China Standard Time)

@dan2kx Thanks for the report. Can you share a reproducible example on our demo site? A permalink with your demo should be sharable, e.g. https://stylelint.io/demo/#N4Igxg9....

Gary Gozlan · Answer 2 · Thu Jan 18 2024 09:17:21 GMT+0800 (China Standard Time)

This is oddly similar to stylelint/stylelint#7429.

Daniel McGowan · Answer 3 · Thu Jan 18 2024 10:15:21 GMT+0800 (China Standard Time)

This is oddly similar to stylelint/stylelint#7429.

Yes it does seem so.

So the likely culprit is the vs code extension then? Should I create this issue there?

Stefan Nikolei · Answer 4 · Thu Jan 18 2024 15:55:06 GMT+0800 (China Standard Time)

Here is a example from your Demo site.

https://stylelint.io/demo/#N4Igxg9gJgpiBcIBGBXALmiA7ABMAOlvmjgA4CGUUAllgObw4AMA3DgPTs5owDOakALaCYMLGkLEcg8gCc6tRq0IBfQiAA0IAGbUANjABy5EQhAwAHidIGAdGF69N4bLrpmCuHPnMWeWKF4fRgBtQhwI7xB+AE8DPVo0AFpILDck-nIAuSgfcJwAXVVnVLcAMQhZGTQzACtebGdYUidETwifWPjE4Ki9ch5+Hw18zrQ4mATxFNdqOgy0LKgc3p9+wYkQYpUgA

Gary Gozlan · Answer 5 · Thu Jan 18 2024 17:37:10 GMT+0800 (China Standard Time)

Here is a example from your Demo site.

stylelint.io/demo/#N4Igxg9gJgpiBcIBGBXALmiA7ABMAOlvmjgA4CGUUAllgObw4AMA3DgPTs5owDOakALaCYMLGkLEcg8gCc6tRq0IBfQiAA0IAGbUANjABy5EQhAwAHidIGAdGF69N4bLrpmCuHPnMWeWKF4fRgBtQhwI7xB+AE8DPVo0AFpILDck-nIAuSgfcJwAXVVnVLcAMQhZGTQzACtebGdYUidETwifWPjE4Ki9ch5+Hw18zrQ4mATxFNdqOgy0LKgc3p9+wYkQYpUgA

The problem with your example is that // is not valid in CSS.
i.e. you want /* */
So Iv changed your demo by extending using stylelint-config-standard-scss instead.
e.g.

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

and the bug is gone.

Whether it should be considered a regression is up for debate; should we care about invalid syntaxes?

Daniel McGowan · Answer 6 · Fri Jan 19 2024 01:14:56 GMT+0800 (China Standard Time)

The use of single line comments was not an issue in stylelint v15 with the same vscode extension

i think this use case is valid as per the sass documentation: https://sass-lang.com/documentation/syntax/comments/

I am also extending this plugin:

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

and others as you can see from the OP

Richard Hallows · Answer 7 · Sat Jan 20 2024 18:32:03 GMT+0800 (China Standard Time)

@dan2kx Does the problem also occur when you use the CLI rather than the VSCode extension?

npx stylelint "test.scss" --fix

Run this command on a single file containing:

a {
    // should allow comment
    color: red;
}

Rather than all your SCSS files, in case the problem does occur.

Be sure to use your current config.

If it does occur, can you remove "stylelint-prettier/recommended" from your configuration object and try again.

Can you also share your VSCode settings.json, please? If there's anything sensitive in there, you can strip it back to only stylelint. configuration properties.

Daniel McGowan · Answer 8 · Tue Jan 23 2024 01:39:43 GMT+0800 (China Standard Time)

@jeddy3 Thanks for the reply. the CLI seems to work without issue. The problem does still occur without the stylelint-prettier config.

Here is my vscode config

{
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.accessibilitySupport": "off",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.rulers": [100, 120],
  "editor.tabSize": 2,
  "eslint.codeActionsOnSave.rules": null,
  "files.associations": {
    ".env": "dotenv"
  },
  "git.confirmSync": false,
  "git.ignoreLimitWarning": true,
  "git.mergeEditor": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "redhat.telemetry.enabled": false,
  "scm.showActionButton": false,
  "stylelint.validate": ["css", "scss"],
  "typescript.updateImportsOnFileMove.enabled": "always"
}

Daniel McGowan · Answer 9 · Fri Jan 26 2024 01:58:36 GMT+0800 (China Standard Time)

@jeddy3 Have you tried to replicate this in vscode with my config?

Masafumi Koba · Answer 10 · Mon Jan 29 2024 20:56:34 GMT+0800 (China Standard Time)

#489 looks like the same problem.

Masafumi Koba · Answer 11 · Mon Jan 29 2024 22:36:55 GMT+0800 (China Standard Time)

@dan2kx Thanks for the info. I can reproduce the problem now. My files are below:

package.json (need to run npm install):

{
  "dependencies": {
    "stylelint": "^16.1.0",
    "stylelint-config-sass-guidelines": "^11.0.0",
    "stylelint-config-standard-scss": "^13.0.0",
    "stylelint-order": "^6.0.4",
    "stylelint-prettier": "^5.0.0"
  }
}

.stylelintrc.json:

{
  "extends": [
    "stylelint-config-sass-guidelines",
    "stylelint-config-standard-scss",
    "stylelint-prettier/recommended"
  ],
  "ignoreFiles": ["node_modules/**", "dist/**", "**/*.tsx", "**/*.ts"],
  "overrides": [
    {
      "files": ["**/*.scss"],
      "customSyntax": "postcss-scss"
    }
  ]
}

.vscode/settings.json:

{
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.accessibilitySupport": "off",
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.rulers": [100, 120],
  "editor.tabSize": 2,
  "eslint.codeActionsOnSave.rules": null,
  "files.associations": {
    ".env": "dotenv"
  },
  "git.confirmSync": false,
  "git.ignoreLimitWarning": true,
  "git.mergeEditor": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "redhat.telemetry.enabled": false,
  "scm.showActionButton": false,
  "stylelint.validate": ["css", "scss"],
  "typescript.updateImportsOnFileMove.enabled": "always"
}

test.scss:

a {
  // should allow comment
  color: red;
}

Screen.Recording.2024-01-29.at.23.36.29.mov

FYI, the CLI is not a problem:

$ npx stylelint test.scss --fix

test.scss
 3:10  ✖  Unexpected named color "red"  color-named

1 problem (1 error, 0 warnings)

$ cat test.scss   
a {
  // should allow comment
  color: red;
}

Masafumi Koba · Answer 12 · Mon Jan 29 2024 22:37:55 GMT+0800 (China Standard Time)

So, this problem seems specific to the VSCode extension. I'll transfer this issue to https://github.com/stylelint/vscode-stylelint

Masafumi Koba · Answer 13 · Mon Jan 29 2024 22:47:06 GMT+0800 (China Standard Time)

@dan2kx When I change editor.formatOnSave from true to false, the problem is gone. Can you try it?

- "editor.formatOnSave": true,
+ "editor.formatOnSave": false,

Daniel McGowan · Answer 14 · Wed Jan 31 2024 02:24:46 GMT+0800 (China Standard Time)

@ybiquitous It does stop the error but also stops the format from auto fixing issues which is useful to me

Masafumi Koba · Answer 15 · Wed Jan 31 2024 07:22:02 GMT+0800 (China Standard Time)

@dan2kx I'm afraid that I'm unfamiliar with VSCode, but can you use editor.codeActionsOnSave instead?

Daniel McGowan · Answer 16 · Wed Jan 31 2024 09:20:47 GMT+0800 (China Standard Time)

@dan2kx I'm afraid that I'm unfamiliar with VSCode, but can you use editor.codeActionsOnSave instead?

I have that too

Masafumi Koba · Answer 17 · Wed Jan 31 2024 19:32:45 GMT+0800 (China Standard Time)

Ah, right. Sorry, I missed the setting. I'm unsure which is the cause. 😕

Fabien Basmaison · Answer 18 · Wed Feb 28 2024 00:20:52 GMT+0800 (China Standard Time)

After minimising dependencies, I can reproduce the test case provided in the previous comment.

VS Codium 1.86.2.
vscode-stylelint v1.3.0.
node v18.17.1 (or v20.11.1, adding "volta": {"node": "20.11.1"}) to package.json.

Lint errors are highlighted properly by VS Codium before saving.

The only viable solution for now is to stick with stylelint 15.x.

package.json

{
  "dependencies": {
    "stylelint": "^16.1.0",
    "stylelint-config-standard-scss": "^13.0.0"
  },
  "stylelint": {
    "extends": [
      "stylelint-config-standard-scss"
    ]
  }
}

settings.json

{
  "redhat.telemetry.enabled": false,
  "[scss]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "stylelint.vscode-stylelint",
    "editor.codeActionsOnSave": {
      "source.fixAll.stylelint": "explicit"
    }
  },
  "stylelint.validate": ["css", "scss"]
}

test.scss before saving

a {
  // Double slash Line comment
  color: black;

  /* CSS Block comment */
  background-color: white;
}

test.scss after saving

a {
  // Double slash Line comment
  color: black;DoubleslashLinecommentcolor

  /* CSS Block comment */
  background-color: white;
}

Fabien Basmaison · Answer 19 · Wed Feb 28 2024 00:25:11 GMT+0800 (China Standard Time)

Starting with the previous faulty result, the errors spread to the following line.

After two saves:

a {
  // Double slash Line comment
  color: black;DoubleslashLinecommentcolorDoubleslashLinecommentcolor

  /* CSS Block comment */
  background-color: white;background-color
}

After three saves:

a {
  // Double slash Line comment
  color: black;DoubleslashLinecommentcolorDoubleslashLinecommentcolorDoubleslashLinecommentcolor

  /* CSS Block comment */
  background-color: white;background-colorbackground-color
}

Masafumi Koba · Answer 20 · Wed Feb 28 2024 08:11:53 GMT+0800 (China Standard Time)

Thanks for providing the reproduction. editor.formatOnSave and editor.codeActionsOnSave seem to conflict for some reason. 🤔