stylelint / vscode-stylelint

The official Visual Studio Code extension for Stylelint

Home Page:https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[Bug]: Error: Cannot find module 'postcss-scss'

firestar300 opened this issue · comments

How did you encounter this bug?

On save on a *.scss file, i got this error :

Error: Cannot find module 'postcss-scss'
Require stack: - /Projets/beapi/beapi-frontend-framework/web/app/themes/beapi-frontend-framework/node_modules/stylelint-config-recommended-scss/index.js - /Projets/beapi/beapi-frontend-framework/web/app/themes/beapi-frontend-framework/node_modules/stylelint/node_modules/cosmiconfig/dist/loaders.js - /Projets/beapi/beapi-frontend-framework/web/app/themes/beapi-frontend-framework/node_modules/stylelint/node_modules/cosmiconfig/dist/ExplorerBase.js - /Projets/beapi/beapi-frontend-framework/web/app/themes/beapi-frontend-framework/node_modules/stylelint/node_modules/cosmiconfig/dist/Explorer.js - /Projets/beapi/beapi-frontend-framework/web/app/themes/beapi-frontend-framework/node_modules/stylelint/node_modules/cosmiconfig/dist/index.js - /Projets/beapi/beapi-frontend-framework/web/app/themes/beapi-frontend-fr...

Code Snippet

/**
 * Assign inputs
 */

@function assign-inputs($inputs, $pseudo: null) {
    $list: ();

    @each $input in $inputs {
        $input: unquote($input);
        $input: if($pseudo, $input + ":" + $pseudo, $input);
        $list: append($list, $input, comma);
    }

    @return $list;
}

Stylelint Configuration

.stylelintrc

{
    "extends": [
        "stylelint-config-recommended-scss",
        "stylelint-config-recess-order"
    ],
    "plugins": [
        "stylelint-scss"
    ],
    "customSyntax": "postcss-scss",
    "rules": {
        "block-closing-brace-empty-line-before": null,
        "block-closing-brace-newline-after": null,
        "block-closing-brace-newline-before": null,
        "block-closing-brace-space-before": null,
        "block-opening-brace-newline-after": null,
        "block-opening-brace-space-after": null,
        "block-opening-brace-space-before": "always",
        "declaration-block-semicolon-newline-after": null,
        "declaration-block-semicolon-space-after": null,
        "declaration-block-semicolon-space-before": null,
        "declaration-block-trailing-semicolon": "always",
        "indentation": 4,
        "no-descending-specificity": null,
        "number-leading-zero": "never",
        "declaration-colon-newline-after": null,
        "max-line-length": 400,
        "no-eol-whitespace": [
            true,
            {
                "ignore": [
                    "empty-lines"
                ]
            }
        ],
        "at-rule-empty-line-before": [
            "always",
            {
                "ignore": [
                    "inside-block",
                    "blockless-after-same-name-blockless",
                    "blockless-after-blockless"
                ]
            }
        ],
        "at-rule-no-unknown": [
            true,
            {
                "ignoreAtRules": [
                    "extend",
                    "at-root",
                    "debug",
                    "warn",
                    "error",
                    "if",
                    "else",
                    "for",
                    "each",
                    "while",
                    "mixin",
                    "include",
                    "content",
                    "return",
                    "function"
                ]
            }
        ],
        "string-quotes": "double"
    }
}

package.json

{
  "name": "beapi-frontend-framework",
  "version": "5.0.0",
  "author": "Be API",
  "repository": {
    "type": "git",
    "url": "https://github.com/BeAPI/beapi-frontend-framework"
  },
  "scripts": {
    "start": "node_modules/.bin/webpack --watch --config config/webpack.dev.js",
    "build": "node_modules/.bin/webpack --config config/webpack.prod.js",
    "bundle-report": "node_modules/.bin/webpack --config config/webpack.prod.js --json=dist/stats.json && node_modules/.bin/webpack-bundle-analyzer dist/stats.json",
    "image": "node config/image-sizes.js"
  },
  "license": "GPL-2.0",
  "dependencies": {
    "lazysizes": "^5.3.2",
    "oneloop.js": "^3.0.0",
    "what-input": "^5.2.10"
  },
  "devDependencies": {
    "browser-sync": "^2.26.14",
    "browser-sync-webpack-plugin": "^2.3.0",
    "canvas": "^2.8.0",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^5.2.4",
    "cssnano": "^5.0.1",
    "esbuild-loader": "^2.13.1",
    "eslint": "^7.24.0",
    "eslint-config-prettier": "^8.2.0",
    "eslint-plugin-prettier": "^3.4.0",
    "eslint-webpack-plugin": "^2.5.4",
    "image-webpack-loader": "^7.0.1",
    "js-yaml": "^4.1.0",
    "json2csv": "^5.0.6",
    "mini-css-extract-plugin": "^1.5.0",
    "ora": "^5.4.0",
    "portfinder": "^1.0.28",
    "postcss": "8.4.14",
    "postcss-import": "^14.0.1",
    "postcss-loader": "^5.2.0",
    "postcss-preset-env": "^6.7.0",
    "postcss-pxtorem": "^6.0.0",
    "postcss-scss": "^4.0.4",
    "postcss-sort-media-queries": "^3.8.9",
    "prettier": "^2.2.1",
    "sass": "^1.32.11",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "stylelint": "14.9.0",
    "stylelint-config-recess-order": "3.0.0",
    "stylelint-config-recommended-scss": "^6.0.0",
    "stylelint-config-standard": "^21.0.0",
    "stylelint-scss": "^3.19.0",
    "stylelint-webpack-plugin": "3.3.0",
    "svg-sprite-loader": "^6.0.10",
    "svgo-loader": "^3.0.0",
    "webpack": "^5.35.0",
    "webpack-bundle-analyzer": "^4.4.1",
    "webpack-cli": "^4.6.0",
    "webpack-manifest-plugin": "^3.1.1",
    "webpack-merge": "^5.7.3",
    "webpackbar": "^5.0.0-3"
  },
  "volta": {
    "node": "16.15.0"
  }
}

Extension Configuration

{
  "workbench.colorTheme": "One Dark Pro Flat",
  "editor.wordWrap": "on",
  "editor.fontSize": 12,
  "editor.tabSize": 4,
  "editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true
  },
  "editor.snippetSuggestions": "top",
  "editor.renderWhitespace": "all",
  "editor.minimap.enabled": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": "active",
  "eslint.format.enable": true,
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ],
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[javascript]": {
    "editor.tabSize": 2,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[php]": {
    "editor.defaultFormatter": "wongjn.php-sniffer",
  },
  "phpcbf.enable": true,
  "phpcbf.executablePath": "./vendor/bin/phpcs",
  "phpcbf.documentFormattingProvider": true,
  "phpcbf.onsave": true,
  "phpcbf.standard": "./phpcs.xml.dist",
  "phpSniffer.autoDetect": true,
  "sync.gist": "",
  "editor.largeFileOptimizations": false,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "stylelint.enable": true,
  "stylelint.customSyntax": "postcss-scss",
  "stylelint.validate": [
    "css",
    "scss",
    "postcss"
  ],
  "search.useGlobalIgnoreFiles": true,
  "editor.inlineSuggest.enabled": true
}

Actual Behaviour

In Webpack, I got expected error :

src/scss/02-tools/_f-assign-inputs.scss
  9:17  ✖  Unquote function used with an               scss/function-unquote-no-unquoted-strings-inside
           already-unquoted string                                                                     
  9:17  ✖  Expected string.unquote instead of unquote  scss/no-global-function-names                   
 11:16  ✖  Expected list.append instead of append      scss/no-global-function-names 

But in VSCode I got the missing module error message.

Expected Behaviour

On save, it should autofix the stylelint issues in the file.

Logs

No response

Stylelint Version

14.9.0

vscode-stylelint Version

1.2.2

Node.js Version

v16.15.0

Operating System

macOS 12.2.1

Windows Subsystem for Linux

No response

Code of Conduct

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

It works after restarting VSCode.