Giter VIP home page Giter VIP logo

Comments (22)

ybiquitous avatar ybiquitous commented on June 23, 2024

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

from vscode-stylelint.

Mouvedia avatar Mouvedia commented on June 23, 2024

This is oddly similar to stylelint/stylelint#7429.

from vscode-stylelint.

dan2kx avatar dan2kx commented on June 23, 2024

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?

from vscode-stylelint.

stefannikolei avatar stefannikolei commented on June 23, 2024

Here is a example from your Demo site.

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

from vscode-stylelint.

Mouvedia avatar Mouvedia commented on June 23, 2024

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?

from vscode-stylelint.

dan2kx avatar dan2kx commented on June 23, 2024

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

from vscode-stylelint.

jeddy3 avatar jeddy3 commented on June 23, 2024

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

from vscode-stylelint.

dan2kx avatar dan2kx commented on June 23, 2024

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

from vscode-stylelint.

dan2kx avatar dan2kx commented on June 23, 2024

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

from vscode-stylelint.

ybiquitous avatar ybiquitous commented on June 23, 2024

#489 looks like the same problem.

from vscode-stylelint.

ybiquitous avatar ybiquitous commented on June 23, 2024

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

from vscode-stylelint.

ybiquitous avatar ybiquitous commented on June 23, 2024

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

from vscode-stylelint.

ybiquitous avatar ybiquitous commented on June 23, 2024

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

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

from vscode-stylelint.

dan2kx avatar dan2kx commented on June 23, 2024

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

from vscode-stylelint.

ybiquitous avatar ybiquitous commented on June 23, 2024

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

from vscode-stylelint.

dan2kx avatar dan2kx commented on June 23, 2024

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

I have that too

from vscode-stylelint.

ybiquitous avatar ybiquitous commented on June 23, 2024

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

from vscode-stylelint.

alokVishu avatar alokVishu commented on June 23, 2024

+1

from vscode-stylelint.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.