[Bug]: ESM-only stylelint configs fail to import with PNPM

[radum]

How did you encounter this bug?

Running the very latest version of VSCode and Stylelint extension when I try to use a pure ESM config the extension fails to load its dependencies.

I am using this ESM config https://github.com/radum/stylelint-config

Running the CLI works just fine. Using NPM to install the packages works just fine also.

Link to Minimal Reproducible Example

https://github.com/radum/stylelint-config

Code Snippet

No response

Stylelint Configuration

import radum from '@radum/stylelint-config';

export default radum(
	{
		scss: true
	}
);

Extension Configuration

{
  "stylelint.packageManager": "pnpm",
  "stylelint.config": {
    
  }
}

Actual Behaviour

The config deps are not loaded.

Expected Behaviour

The configuration modules should be loaded when using PNPM.

Logs

[Error - 09:46:47] [language-server] Error running lint | uri: "file:///project/src/components/Modal/Modal.scss" error: {"code":78,"name":"Error","message":"Could not find "stylelint-no-unsupported-browser-features". Do you need to install the package or use the "configBasedir" option?","stack":"Error: Could not find "stylelint-no-unsupported-browser-features". Do you need to install the package or use the "configBasedir" option?\n at configurationError (/project/node_modules/.pnpm/stylelint@16.11.0_typescript@5.7.2/node_modules/stylelint/lib/utils/configurationError.cjs:16:49)\n at getModulePath (/project/node_modules/.pnpm/stylelint@16.11.0_typescript@5.7.2/node_modules/stylelint/lib/utils/getModulePath.cjs:31:9)\n at toAbsolutePath (/project/node_modules/.pnpm/stylelint@16.11.0_typescript@5.7.2/node_modules/stylelint/lib/augmentConfig.cjs:156:11)\n at Array.map ()\n at absolutizePaths (/project/node_modules/.pnpm/stylelint@16.11.0_typescript@5.7.2/node_modules/stylelint/lib/augmentConfig.cjs:163:44)\n at augmentConfigBasic (/project/node_modules/.pnpm/stylelint@16.11.0_typescript@5.7.2/node_modules/stylelint/lib/augmentConfig.cjs:70:9)\n at async Object.augmentConfigFull (/project/node_modules/.pnpm/stylelint@16.11.0_typescript@5.7.2/node_modules/stylelint/lib/augmentConfig.cjs:114:24)\n at async search (/project/node_modules/.pnpm/cosmiconfig@9.0.0_typescript@5.7.2/node_modules/cosmiconfig/dist/Explorer.js:53:36)\n at async search (/project/node_modules/.pnpm/cosmiconfig@9.0.0_typescript@5.7.2/node_modules/cosmiconfig/dist/Explorer.js:71:28)\n at async search (/project/node_modules/.pnpm/cosmiconfig@9.0.0_typescript@5.7.2/node_modules/cosmiconfig/dist/Explorer.js:71:28)"}

Stylelint Version

16.11.0

vscode-stylelint Version

1.4.0

Node.js Version

22.0.0

Operating System

macOS

Windows Subsystem for Linux

No response

Code of Conduct

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

[radum]

Related to #464 ... I think.

[psychobolt]

As of now I am still using the workaround I've mentioned. Having a separate workspace without PnP or PNPM and instructing vscode-stylint to resolve into this workspace's node_modules. Definitely requires a bit of boilerplate code and involves bootstrapping the install process.

[radum]

So I just encountered an issue when using ESlint plugins that looked similar. Upon investigating that issue I found this thread pnpm/pnpm#8878 (comment) that talks about how PNPM works and its hoisting settings.

So I applied the same principles for stylelint, in the pnpm-workspace.yaml file I added the following:

publicHoistPattern:
- "stylelint-no-unsupported-browser-features"
- "@stylistic/stylelint-plugin"
- "postcss-scss"
- "stylelint-order"
- "stylelint-scss"

https://pnpm.io/settings#publichoistpattern

run pnpm install again to change the structure and restarted the editor. Now everything works just fine.

I think until a proper fix is found this should be part of the readme file for those that use PNPM.

PS: The list of hoisted patterns above is just for reference, I use those plugins, but it can be whatever you use in your config.