CSS properties in comments increase indefinitely.

[ddryo]

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

I use VS Code's stylelint plugin to automatically run fix when saving a file.

However, at this time, for some reason, the CSS property name being purchased within the comment is copied to the end of the comment. (There was no problem when I fixed it with the stylelint --fix command.

.test {
	color: red;
	background-color: #fff;

	// background-color: blue;
}

// .hoge{
//     color:yellow;
// }

CleanShot.2024-01-29.at.17.52.58.mp4

Also, this problem has been occurring since updating stylelint from v15 to v16.

What minimal configuration is needed to reproduce the bug?

.stylelintrc.cjs

module.exports = {
	extends: [
		'stylelint-config-recommended-scss',
	],
};

How did you run Stylelint?

This problem seems to occur when you use a VS Code extension to automatically format a file when saving it.

Which Stylelint-related dependencies are you using?

{
    "stylelint": "^16.2.0",
    "stylelint-config-recommended-scss": "^14.0.0",
}

What did you expect to happen?

I just want to save the file normally.

What actually happened?

CSS properties in comments increase indefinitely.

Do you have a proposal to fix the bug?

No response

[ybiquitous]

@ddryo Thanks for the report with a real reproduction video. Probably, this is the same problem as #490.

[ybiquitous]

@ddryo Can you provide your .vscode/settings.json?

[ddryo]

Yes, here is the setting data.

{
	"html.format.enable": false,
	"javascript.format.enable": false,
	"css.format.enable": false,
	"eslint.format.enable": false,
}

[ybiquitous]

Thanks for the quick response. But I cannot reproduce the problem for some reason. 🤔

Can you reproduce it on your console (CLI) instead? E.g.

npx stylelint test.scss --fix

[ddryo]

This problem occurred when tested in an environment with only the following two files

pckage.json

{
	"name": "stylelint-test",
	"version": "1.0",
	"description": "",
	"main": "dist/index.js",
	"module": "dist/index.js",
	"scripts": {},
	"private": true,
	"license": "MIT",
	"devDependencies": {
		"stylelint": "^16.2.0"
	}
}

test.scss

.test {
	color: red;
	background-color: #fff;

	// background-color: blue;
	
}

// .hoge{
//     color:yellow;
// }

[ddryo]

@ybiquitous
No, the command does not reproduce.

As explained at the beginning, this only occurs when auto-formatting with VS Code extensions.

[ddryo]

this plugin
https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

[ddryo]

Come to think of it, I use pnpm.

node is v18.19.0.

[ybiquitous]

@ddryo Thanks for the minimum reproduction. This problem seems specific to the VSCode extension, so I'll transfer this issue to https://github.com/stylelint/vscode-stylelint.

[ddryo]

Additional verification.

It does not occur in stylelint v.15.11.0, it occurs starting from v.16.0.0.

[ybiquitous]

Just to confirm, does this problem happen without the config file (.stylelintrc.cjs)?

[ddryo]

No, this occurred with or without .stylelintrc.cjs.

[ddryo]

If I wanted to use stylelint-prettier v5 or later, I had to use stylelint v16 or later to get it to work, so I updated to stylelint v16 and encountered this bug.

At first I thought it might be due to prettier, but as I described above, it also occurred in an environment with only 2 files (counted before node_module installation). So I think VS Code plugin and stylelint v16 are incompatible.

[ybiquitous]

It's strange. I cannot reproduce this problem for now with the 2 files and node_modules. 🤔

[ybiquitous]

So I think VS Code plugin and stylelint v16 are incompatible.

It may be correct. The main branch hasn't tested v16 yet:

vscode-stylelint/package.json

Line 249 in 39e7c76

"stylelint": "^15.10.2",

[ybiquitous]

I think there is no problem if Stylelint and the extension are configured properly. The following files are in my environment:

stylelint.config.mjs:

export default {
  customSyntax: "postcss-scss",
  rules: {
    "function-name-case": "upper",
  },
};

package.json (need to run npm install):

{
  "devDependencies": {
    "postcss-scss": "^4.0.9",
    "stylelint": "^16.2.0"
  }
}

.vscode/settings.json:

{
  "stylelint.validate": ["css", "scss"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

test.scss:

a {
  color: calc(1 + 2);
}

When the file above is saved, it's automatically converted to:

- color: calc(1 + 2);
+ color: CALC(1 + 2);

---

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

[ddryo]

Thank you very much！ However, the bug did occur...

CleanShot.2024-01-29.at.23.27.00-converted.mp4

[ybiquitous]

Hum, I cannot reproduce unintentionally inserted comments... 🤔

I wonder if .vscode/settings.json is different. Is your .vscode/settings.json the same as mine? ⬇️

{
  "stylelint.validate": ["css", "scss"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  }
}

[ddryo]

Yes. But for some reason, when I reload the project, the true part seems to be automatically switched to "explicit" as shown below.

{
  "stylelint.validate": ["css", "scss"],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "explicit"
  }
}

[ybiquitous]

The behavior doesn't seem to change between true and explicit.
See https://code.visualstudio.com/updates/v1_85#_code-actions-on-save-and-auto

[ybiquitous]

FYI, I've just opened PR #492 to reduce confusion in README.

[ajiho]

在stylelint16.x中我也遇到了同样的问题，格式化的时候，它会无限的追加注释

"stylelint": "^16.2.0",
"stylelint-config-recess-order": "^4.4.0",
"stylelint-config-standard-scss": "^13.0.0"

[mashirozx]

same here

[mashirozx]

/** @type {import('stylelint').Config} */
const config = {
  // extends: require.resolve('@umijs/max/stylelint'),
  extends: 'stylelint-config-standard-less',
  // extends: 'stylelint-config-standard',
  // plugins: ['stylelint-order'],
  // customSyntax: 'postcss-less',
  rules: {
    'selector-class-pattern': [
      '^([a-z][a-z0-9]*)(-[a-z0-9]+)*[a-zA-Z0-9]*$',
      {
        message: 'kebab-case or camelCase only',
      },
    ],
    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: ['global', 'local'],
      },
    ],
    'shorthand-property-no-redundant-values': [
      true,
      {
        severity: 'warning',
      },
    ],
    'length-zero-no-unit': [
      true,
      {
        severity: 'warning',
      },
    ],
    'declaration-block-no-redundant-longhand-properties': null,
    // 'declaration-colon-space-after': 'always',
    // 'selector-combinator-space-after': 'always',
    // 'block-opening-brace-space-before': 'always',
    'rule-empty-line-before': [
      'always',
      {
        except: ['after-single-line-comment', 'first-nested'],
      },
    ],
    'color-function-notation': 'modern',
    // 'max-empty-lines': [
    //   1,
    //   {
    //     ignore: ['comments'],
    //   },
    // ],
    'media-query-no-invalid': null,
  },
};

module.exports = config;

"stylelint": "16.3.1",
"stylelint-config-standard": "36.0.0",
"stylelint-config-standard-less": "3.0.1",
"stylelint-order": "6.0.4",