[Bug]: Extension starts, but does not show stylelint errors

[jeffweim-hm]

trafficstars

How did you encounter this bug?

Upgraded to latest versions of stylelint and vscode stylelint and found that the vscode extension no longer shows errors

Code Snippet

code with obvious stylelint issues:

const Button = styled.a`
  
  padding: 3px 25px;
  color: ${ ({ theme }) => theme.colors.black };
  font-family: ${ ({ theme }) => `${ theme.fonts.InterRegular }` };
  font-size: 14px;

  display: inline-block;

  text-align: center;
  text-decoration: none;
  background: ${ ({ theme }) => theme.colors.flamingo[2] };
  border: 1px solid ${ ({ theme }) => theme.colors.flamingo[2] };
  border-radius: 45px;
  transition: all 0.25s;
  cursor: pointer;
`

Stylelint Configuration

const propertyOrder = require('./property-order')

module.exports = {
  customSyntax: '@stylelint/postcss-css-in-js',
  plugins: [
    'stylelint-order',
  ],
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
    'stylelint-config-standard',
  ],
  rules: {
    // Disable these so stylelint autofix doesn't break template literals containing theme breakpoints
    'media-feature-range-operator-space-after': null,
    'media-feature-range-operator-space-before': null,

    // Disable so not to conflict with eslint indentation rules
    indentation: null,

    'property-no-unknown': [
      true,
      {
        ignoreProperties: [
          // CSS Modules composition
          // https://github.com/css-modules/css-modules#composition
          'composes',
        ],
      },
    ],

    'selector-pseudo-class-no-unknown': [
      true,
      {
        ignorePseudoClasses: [
          // CSS Modules :global scope
          // https://github.com/css-modules/css-modules#exceptions
          'global',
          'local',
        ],
      },
    ],

    // Opinionated rule
    'string-quotes': 'single',

    // https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md
    'order/order': [
      'custom-properties',
      'dollar-variables',
      'declarations',
      'at-rules',
      'rules',
    ],

    // https://github.com/hudochenkov/stylelint-order/blob/master/rules/properties-order/README.md
    'order/properties-order': [
      propertyOrder,
      { unspecified: 'bottomAlphabetical' }
    ]
  },
}

Extension Configuration

{
  "stylelint.validate": [
    "postcss",
    "javascript",
    "javascriptreact",
    "js"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
}

Actual Behaviour

I can see in the output that the extension is starting:

[Info  - 9:20:37 AM] [language-server] Registering module | module: "auto-fix"
[Info  - 9:20:37 AM] [language-server] Module registered | module: "auto-fix"
[Info  - 9:20:37 AM] [language-server] Registering module | module: "code-action"
[Info  - 9:20:37 AM] [language-server] Module registered | module: "code-action"
[Info  - 9:20:37 AM] [language-server] Registering module | module: "completion"
[Info  - 9:20:37 AM] [language-server] Module registered | module: "completion"
[Info  - 9:20:37 AM] [language-server] Registering module | module: "formatter"
[Info  - 9:20:37 AM] [language-server] Module registered | module: "formatter"
[Info  - 9:20:37 AM] [language-server] Registering module | module: "old-stylelint-warning"
[Info  - 9:20:37 AM] [language-server] Module registered | module: "old-stylelint-warning"
[Info  - 9:20:37 AM] [language-server] Registering module | module: "validator"
[Info  - 9:20:37 AM] [language-server] Module registered | module: "validator"
[Info  - 9:20:37 AM] [language-server] Starting language server
[Info  - 9:20:37 AM] [language-server] Registering handlers
[Info  - 9:20:37 AM] [language-server] Handlers registered
[Info  - 9:20:37 AM] [language-server] Language server started

But, when I go to a file and save with known issues, no errors are presented and nothing in the stylelint output is shown.

Expected Behaviour

Within the stylelint output, I should see that styleint is running against the file that was saved

Logs

Logs should be showing that the file that was saved is having stylelint run against it, but it shows no output

Stylelint Version

v14.0.2

vscode-stylelint Version

v1.2.1

Node.js Version

v14.17.0

Operating System

macOS 11.4

Windows Subsystem for Linux

No response

Code of Conduct

• [X] I agree to follow vscode-stylelint's Code of Conduct

[Minori-ty]

the same problem...

[topheman]

Found the workaround :

This problem is due to one of the vscode updates in the last weeks. It upgraded vscode-stylelint from v0.x to v1.x, which contains a breaking change if you use stylelint < 14 : https://github.com/stylelint/vscode-stylelint#migrating-from-vscode-stylelint-0xstylelint-13x

Solutions: You can upgrade stylelint to the latest version OR downgrade vscode-stylelint to v0.87.6 (latest compatible version before breaking change).

[jeffweim-hm]

Found the workaround :

This problem is due to one of the vscode updates in the last weeks. It upgraded vscode-stylelint from v0.x to v1.x, which contains a breaking change if you use stylelint < 14 : https://github.com/stylelint/vscode-stylelint#migrating-from-vscode-stylelint-0xstylelint-13x

Solutions: You can upgrade stylelint to the latest version OR downgrade vscode-stylelint to v0.87.6 (latest compatible version before breaking change).

@topheman Which solution did you use? I'm currently using the latest of both stylelint and vscode-stylelint.

I had this issue several weeks back when I upgraded vscode. I downgraded vscode-stylelint and was able to get it working until the next vscode update broke it again

[topheman]

Found the workaround : This problem is due to one of the vscode updates in the last weeks. It upgraded vscode-stylelint from v0.x to v1.x, which contains a breaking change if you use stylelint < 14 : https://github.com/stylelint/vscode-stylelint#migrating-from-vscode-stylelint-0xstylelint-13x Solutions: You can upgrade stylelint to the latest version OR downgrade vscode-stylelint to v0.87.6 (latest compatible version before breaking change).

@topheman Which solution did you use? I'm currently using the latest of both stylelint and vscode-stylelint.

I had this issue several weeks back when I upgraded vscode. I downgraded vscode-stylelint and was able to get it working until the next vscode update broke it again

@jeffweim-hm I'm currently using the solution of downgrading vscode-stylelint to v0.87.6 (until I fix some dependencies problems to upgrade stylelint)

You shouldn't upgrade stylelint AND downgrade vscode-stylelint. Choose either one of the solutions.

[ZebraFlesh]

Solutions: You can upgrade stylelint to the latest version OR downgrade vscode-stylelint to v0.87.6 (latest compatible version before breaking change).

The upgrade solution doesn't work. I'm also seeing errors from stylelint on the command line but not through this extension.

Configuration: stylelint: 14.4.0 vscode-stylelint: 1.2.1 node: 14.17.6 operating system: macOS 12.2 config in package.json:

  "stylelint": {
    "plugins": [
      "stylelint-scss"
    ],
    "extends": "stylelint-config-standard-scss",
    "overrides": [
      {
        "files": [
          "**/*.scss"
        ],
        "customSyntax": "postcss-scss"
      }
    ],
    "rules": {
      "color-hex-length": "long",
      "indentation": 4,
      "string-quotes": "single"
    }
  },

[sergej-s]

Any news, guys? Im facing the same issue with linting styled-components. stylelint v14, vscode-stylelint v1.2.2.

module.exports = {
  overrides: [
    {
      files: ['**/*.js', '**/*.jsx'],
      customSyntax: '@stylelint/postcss-css-in-js',
    },
  ],
  extends: [
    'stylelint-config-standard',
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
  ],

It lints *.js when I run npm run stylelint but not via extension.

[kamilbedalaboratorium]

Same issue with Nuxt, stylelint 14.1.0 and vscode-stylelint v1.2.2

module.exports = {
  customSyntax: "postcss-html",
  extends: [
    "stylelint-config-standard",
    "stylelint-config-recommended-vue",
    "stylelint-config-prettier",
  ],
};

[infacto]

In my case just add the following to your settings.json of VSCode:

{
 "stylelint.validate": ["css", "scss"]
}

More info (I use the plugin stylelint-scss instead of postcss-scss). Make sure you use stylelint at version >= 14.

Update: Does still not report all problems. But it's maybe another issue.

[egor-xyz]

I want to finalize how to make it works for styled-components with typescript:

Don't forget to remove the processors from the stylelint config

stylelint.config.js

module.exports = {
  extends: [
    'stylelint-config-recommended',
    'stylelint-config-styled-components',
    'stylelint-config-standard'
  ],
  overrides: [
    {
      customSyntax: '@stylelint/postcss-css-in-js',
      files: ['**/*.ts', '**/*.tsx']
    }
  ]
};

VSCode config:

"editor.codeActionsOnSave": {
     "source.fixAll.stylelint": true
  },
"stylelint.validate": [
    "postcss",
    "typescript",
    "typescriptreact",
    "js"
  ],

But I'm still getting error:

Unexpected unknown function "${" (function-no-unknown)

[manandkumaar]

I am also facing this issue in my macbook pro. Following is my settings.

.vscode/settings.json

.stylelintrc

package.json

Stylelint installed in VScode

[jakes-space]

EDIT: Please disregard; vscode-stylelint was working after all. The issues I was testing it against were formatting ones, which I had not realized were deprecated in v15 in favor of using Prettier or similar.

@jeddy3 Thank you for the reply.

————————

Ditto for vscode-stylelint not highlighting or fixing errors on my Macbook Pro. I see plenty of CSS issues when I run npx stylelint "**/*.css".

All packages are current. I am running VS Code v1.75.1, Stylelint extension v1.2.3.

Here are the relevant sections of my configuration files:

package.json

{
  "devDependencies": {
    "stylelint": "^15.1.0",
    "stylelint-config-standard": "^30.0.1",
  }
}

settings.json

{
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "stylelint.validate": [
    "css",
    "scss"
  ],
  "stylelint.enable": true,
  "stylelint.config": null,
  "stylelint.reportNeedlessDisables": true,
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  }
}

.stylelintrc.json

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

Per the troubleshooting instructions, I ran NODE_ENV=development code. When I opened a CSS file with known errors and reloaded VS Code, the Stylelint extension produced this output: stylelint-output.txt. I don't see any obvious errors.

Any help is appreciated. Thank you.

[jeddy3]

@jakes-space Try removing "stylelint.config": null, from your VSCode settings, please.

[wendyzhaogogo]

Any solution? I still encoutered with this problem "stylelint": "^15.3.0", vscode-stylelint : v1.2.4

[mondeja]

Same problem here.

• stylelint v15.5.0
• vscode-stylelint v1.2.4

[ShayDavidson]

I fixed it on my end by debugging stylelint and the extension with throw new Error() (don't ask).

In my case, I had a root .stylelintrc.js config file with ignoreFiles: ['**/*']. Even with a "closer" config file with "ignoreFiles": ["!**/*"], the file was still getting ignored by the root config decleration.

Once I removed it, the extension started working and the file wasn't ignored anymore.

[tsavo-at-pieces]

+1 To all of the above.

[mqklin]

+1 for this. It works if I run stylelint 'src/**/*.js' from CLI, but doesn't highlight problems in vscode.

My config:

// .stylelintrc.js
module.exports = {
  extends: ['stylelint-config-standard'],
  customSyntax: 'postcss-styled-syntax',
};

// settings.json
"stylelint.validate": ["js"],

// package.json
"postcss": "^8.4.30",
"postcss-styled-syntax": "^0.5.0",
"stylelint": "^15.10.3",
"stylelint-config-standard": "^34.0.0",

[satoshionoda]

Found the answer at stackoverflow, setting "stylelint.config": null, at settings.json solved this problem.

I'm still struggling with the formatter not working with scss though this is a different issue.

[minierparedes]

Finally got it working. Thank you everyone and +1 👍 To all of the above. all packages at latest. VSCode v1.85.1. Stylelint extension v1.3.0.

---

my configuration files:

package.json
{
  "devDependencies": {
    "@nuxtjs/stylelint-module": "5.1.0",
    "stylelint": "15.11.0",
    "stylelint-config-recommended-vue": "1.5.0",
    "stylelint-order": "6.0.4",
  }
}
user settings.json
{
  "css.validate": false,
  "scss.validate": false,
  "stylelint.validate": ["css", "scss"],
  "stylelint.enable": true,
  "stylelint.config": null,
  "stylelint.reportNeedlessDisables": true,
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  }
}  
.stylelint.config.cjs
{
  "extends": ["stylelint-config-recommended-vue"],
  "plugins": ["stylelint-order"],
  "ignoreFiles": ["**/node_modules/**", "**/.nuxt/**", "**/dist/**"],
  "customSyntax": "postcss-scss",
  "overrides": [
    {
      "files": ["**/*.vue"],
      "customSyntax": "postcss-html",
    },
  ]
}  

---

linting and formatter working:

src/assets/style.scss

vscode problems:

Stylelint: Expected "color" to come before "background" (order/properties-order)

vscode output:

[Info  - 2:11:54 PM] [language-server] Registering module | module: "auto-fix"
[Info  - 2:11:54 PM] [language-server] Module registered | module: "auto-fix"
[Info  - 2:11:54 PM] [language-server] Registering module | module: "code-action"
[Info  - 2:11:54 PM] [language-server] Module registered | module: "code-action"
[Info  - 2:11:54 PM] [language-server] Registering module | module: "completion"
[Info  - 2:11:54 PM] [language-server] Module registered | module: "completion"
[Info  - 2:11:54 PM] [language-server] Registering module | module: "formatter"
[Info  - 2:11:54 PM] [language-server] Module registered | module: "formatter"
[Info  - 2:11:54 PM] [language-server] Registering module | module: "old-stylelint-warning"
[Info  - 2:11:54 PM] [language-server] Module registered | module: "old-stylelint-warning"
[Info  - 2:11:54 PM] [language-server] Registering module | module: "validator"
[Info  - 2:11:54 PM] [language-server] Module registered | module: "validator"
[Info  - 2:11:54 PM] [language-server] Starting language server
[Info  - 2:11:54 PM] [language-server] Registering handlers
[Info  - 2:11:54 PM] [language-server] Handlers registered
[Info  - 2:11:54 PM] [language-server] Language server started