CSS properties in comments increase indefinitely. about vscode-stylelint HOT 24 OPEN

Yes, here is the setting data.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

@ybiquitous
No, the command does not reproduce.

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

from vscode-stylelint.

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

from vscode-stylelint.

Come to think of it, I use pnpm.

node is v18.19.0.

from vscode-stylelint.

Additional verification.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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.

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

from vscode-stylelint.

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

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

from vscode-stylelint.

same here

from vscode-stylelint.

/** @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",

from vscode-stylelint.