Linting SCSS unknown rule message

sage
,
1

Hi,

I just need some advice as to why the unknown rule messages are appearing. It even appears on the empty file such as the editor.scss . I’ve followed the guide here and for the most part it does work.

Error

resources/styles/app.scss
  1:1  ✖  Unknown rule declaration-colon-newline-after  declaration-colon-newline-after
  1:1  ✖  Unknown rule string-quotes                    string-quotes
  1:1  ✖  Unknown rule value-list-comma-newline-after   value-list-comma-newline-after
  5:1  ✖  Unexpected empty line before at-rule          at-rule-empty-line-before

resources/styles/editor.scss
  1:1  ✖  Unknown rule declaration-colon-newline-after  declaration-colon-newline-after
  1:1  ✖  Unknown rule string-quotes                    string-quotes
  1:1  ✖  Unknown rule value-list-comma-newline-after   value-list-comma-newline-after
  1:1  ✖  Unexpected empty source                       no-empty-source

resources/styles/base/_base.scss
  1:1  ✖  Unknown rule declaration-colon-newline-after  declaration-colon-newline-after
  1:1  ✖  Unknown rule string-quotes                    string-quotes
  1:1  ✖  Unknown rule value-list-comma-newline-after   value-list-comma-newline-after

app.scss

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

@import "base/base";
@import "navigation/navigation";

package.json

{
  "name": "sage",
  "private": true,
  "browserslist": [
    "extends @roots/browserslist-config"
  ],
  "engines": {
    "node": ">=20.0.0"
  },
  "type": "module",
  "scripts": {
    "dev": "bud dev",
    "build": "bud build",
    "lint": "yarn lint:js && yarn lint:css",
    "lint:js": "eslint resources/scripts",
    "lint:css": "stylelint \"resources/**/*.{css,scss,vue}\"",
    "test": "yarn lint",
    "translate": "npm run translate:pot && npm run translate:update",
    "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --include=\"theme.json,patterns,app,resources\"",
    "translate:update": "for file in ./resources/lang/*.po; do wp i18n update-po ./resources/lang/sage.pot $file; done",
    "translate:compile": "npm run translate:mo && npm run translate:js",
    "translate:js": "wp i18n make-json ./resources/lang --pretty-print",
    "translate:mo": "wp i18n make-mo ./resources/lang ./resources/lang"
  },
  "peerDependencies": {
    "jquery": "^3.7.1"
  },
  "devDependencies": {
    "@roots/bud": "6.22.0",
    "@roots/bud-eslint": "^6.22.0",
    "@roots/bud-postcss": "^6.22.0",
    "@roots/bud-prettier": "^6.22.0",
    "@roots/bud-sass": "^6.22.0",
    "@roots/bud-stylelint": "^6.22.0",
    "@roots/bud-tailwindcss": "6.22.0",
    "@roots/eslint-config": "^6.22.0",
    "@roots/sage": "6.22.0",
    "daisyui": "^4.12.12"
  },
  "dependencies": {
    "postcss-loader": "^8.1.1"
  }
}

Stylelintrc

{
  "extends": [
    "@roots/sage/stylelint-config",
    "@roots/bud-sass/stylelint-config",
    "@roots/bud-tailwindcss/stylelint-config"
  ]
}

Any help is appreciated!

2

This appears to be the same or very related issue:

https://stylelint.io/migration-guide/to-15/#deprecated-stylistic-rules

Edit: The sage package, from which stylelintrc pulls the rules is outdated, the bug should have been fixed since v6.23.0. It is a good idea to update all the @roots/* dependencies to the same newer version.

3

Thanks heaps! That fixed the problem.

Error message went down from 28 to 4 lol.