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

dan2kx · 2024-01-18T00:39:33Z

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

The text was updated successfully, but these errors were encountered:

ybiquitous · 2024-01-18T00:43:56Z

@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....

Mouvedia · 2024-01-18T01:17:21Z

This is oddly similar to stylelint/stylelint#7429.

dan2kx · 2024-01-18T02:15:21Z

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?

stefannikolei · 2024-01-18T07:55:06Z

Here is a example from your Demo site.

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

Mouvedia · 2024-01-18T09:37:10Z

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?

dan2kx · 2024-01-18T17:14:56Z

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

jeddy3 · 2024-01-20T10:32:03Z

@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.

dan2kx · 2024-01-22T17:39:43Z

@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"
}

dan2kx · 2024-01-25T17:58:36Z

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

ybiquitous · 2024-01-29T12:56:34Z

#489 looks like the same problem.

ybiquitous · 2024-01-29T14:36:55Z

@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;
}

ybiquitous · 2024-01-29T14:37:55Z

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

ybiquitous · 2024-01-29T14:47:06Z

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

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

dan2kx · 2024-01-30T18:24:46Z

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

ybiquitous · 2024-01-30T23:22:02Z

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

dan2kx · 2024-01-31T01:20:47Z

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

I have that too

ybiquitous · 2024-01-31T11:32:45Z

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

alokVishu · 2024-02-06T11:15:15Z

+1

fbasmaison-lucca · 2024-02-27T16:20:52Z

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;
}

fbasmaison-lucca · 2024-02-27T16:25:11Z

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
}

ybiquitous · 2024-02-28T00:11:53Z

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

azelky · 2024-06-08T23:03:59Z

I don't know if this could help anybody that still has the problem today, but just in case: the only way I found to resolve this bug is to add the "postcss-scss" custom syntax for stylelint directly in VS Code User Settings, as it did not work for me in the stylelint config file (still digging to find out why ^^)

More precisely, in VS Code, open the command palette and search "Preferences : Open User Settings (JSON)" and add this line in the json settings :

"stylelint.customSyntax": "postcss-scss"

jeddy3 changed the title ~~Single line (double slash) comments are appended to the nearest property causing error in vscode~~ Fix double slash comments being appended to the nearest property in VSCode Jan 20, 2024

ybiquitous mentioned this issue Jan 29, 2024

CSS properties in comments increase indefinitely. #489

Open

ybiquitous transferred this issue from stylelint/stylelint Jan 29, 2024

Mouvedia mentioned this issue Jan 29, 2024

Add --fix=lax and --fix=strict stylelint/stylelint#7497

Open

ybiquitous added the status: needs investigation triage needs further investigation label Feb 14, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

dan2kx commented Jan 18, 2024 •

edited

Loading

ybiquitous commented Jan 18, 2024

Mouvedia commented Jan 18, 2024

dan2kx commented Jan 18, 2024

stefannikolei commented Jan 18, 2024 •

edited

Loading

Mouvedia commented Jan 18, 2024 •

edited

Loading

dan2kx commented Jan 18, 2024 •

edited

Loading

jeddy3 commented Jan 20, 2024 •

edited

Loading

dan2kx commented Jan 22, 2024 •

edited

Loading

dan2kx commented Jan 25, 2024

ybiquitous commented Jan 29, 2024

ybiquitous commented Jan 29, 2024

ybiquitous commented Jan 29, 2024

ybiquitous commented Jan 29, 2024

dan2kx commented Jan 30, 2024

ybiquitous commented Jan 30, 2024

dan2kx commented Jan 31, 2024

ybiquitous commented Jan 31, 2024

alokVishu commented Feb 6, 2024

fbasmaison-lucca commented Feb 27, 2024 •

edited

Loading

fbasmaison-lucca commented Feb 27, 2024 •

edited

Loading

ybiquitous commented Feb 28, 2024

azelky commented Jun 8, 2024

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

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

Comments

dan2kx commented Jan 18, 2024 • edited Loading

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

What minimal configuration is needed to reproduce the bug?

How did you run Stylelint?

Which Stylelint-related dependencies are you using?

What did you expect to happen?

What actually happened?

Do you have a proposal to fix the bug?

ybiquitous commented Jan 18, 2024

Mouvedia commented Jan 18, 2024

dan2kx commented Jan 18, 2024

stefannikolei commented Jan 18, 2024 • edited Loading

Mouvedia commented Jan 18, 2024 • edited Loading

dan2kx commented Jan 18, 2024 • edited Loading

jeddy3 commented Jan 20, 2024 • edited Loading

dan2kx commented Jan 22, 2024 • edited Loading

dan2kx commented Jan 25, 2024

ybiquitous commented Jan 29, 2024

ybiquitous commented Jan 29, 2024

ybiquitous commented Jan 29, 2024

ybiquitous commented Jan 29, 2024

dan2kx commented Jan 30, 2024

ybiquitous commented Jan 30, 2024

dan2kx commented Jan 31, 2024

ybiquitous commented Jan 31, 2024

alokVishu commented Feb 6, 2024

fbasmaison-lucca commented Feb 27, 2024 • edited Loading

package.json

settings.json

test.scss before saving

test.scss after saving

fbasmaison-lucca commented Feb 27, 2024 • edited Loading

ybiquitous commented Feb 28, 2024

azelky commented Jun 8, 2024

dan2kx commented Jan 18, 2024 •

edited

Loading

stefannikolei commented Jan 18, 2024 •

edited

Loading

Mouvedia commented Jan 18, 2024 •

edited

Loading

dan2kx commented Jan 18, 2024 •

edited

Loading

jeddy3 commented Jan 20, 2024 •

edited

Loading

dan2kx commented Jan 22, 2024 •

edited

Loading

fbasmaison-lucca commented Feb 27, 2024 •

edited

Loading

fbasmaison-lucca commented Feb 27, 2024 •

edited

Loading