Using Sage 10 and bud 5.3.2 with sass and stylelint

sage
,
1

Hello guys,

I’m trying to use Sage with SASS only but I’m having a problem with stylelint.

When I type the yarn lint command, I get lots of errors about unknown functions.

11:5 ✖ Unexpected unknown at-rule "@extend" at-rule-no-unknown 
17:5 ✖ Unexpected unknown at-rule "@include" at-rule-no-unknown

package.json

  "devDependencies": {
    "@roots/bud": "5.3.2",
    "@roots/bud-eslint": "5.3.2",
    "@roots/bud-postcss": "5.3.2",
    "@roots/bud-prettier": "5.3.2",
    "@roots/bud-sass": "5.3.2",
    "@roots/bud-stylelint": "5.3.2",
    "@roots/sage": "5.3.2"
  },

.stylelintrc:

{
  "extends": [
    "@roots/bud-sass/stylelint-config",
    "@roots/sage/stylelint-config"
  ],
  "rules": {
    "custom-property-pattern": null
  }
}

Did I forget something in the configuration?

For information if I downgrade stylelint to version 5.0.2 everything works fine

2

Does this apply to your issue?

3

Hello @strarsis ,

Indeed, it seems related, I tried the solutions suggested by @kellymears but without success either

> yarn why stylelint-config-recommended
yarn why v1.22.17
[1/4] 🤔  Why do we have the module "stylelint-config-recommended"...?
[2/4] 🚚  Initialising dependency graph...
[3/4] 🔍  Finding dependency...
[4/4] 🚡  Calculating file sizes...
=> Found "stylelint-config-recommended@6.0.0"
info Reasons this module exists
   - "@roots#bud-sass#stylelint-config-recommended-scss" depends on it
   - Hoisted from "@roots#bud-sass#stylelint-config-recommended-scss#stylelint-config-recommended"
info Disk size without dependencies: "16KB"
info Disk size with unique dependencies: "16KB"
info Disk size with transitive dependencies: "16KB"
info Number of shared dependencies: 0
=> Found "stylelint-config-standard#stylelint-config-recommended@7.0.0"
info This module exists because "@roots#bud-stylelint#stylelint-config-standard" depends on it.
info Disk size without dependencies: "28KB"
info Disk size with unique dependencies: "28KB"
info Disk size with transitive dependencies: "28KB"
info Number of shared dependencies: 0
✨  Done in 0.19s.

I also tried to reverse the stylelint rules

4

You need stylelint configured to accept tailwindcss. You can use the preset if you want: @roots/bud-tailwindcss/stylelint-config, I believe.

edit: i’m a dummy. i’m seeing if i can reproduce.

5

Came upon this as well today while working to replace tailwind with bootstrap in Sage v10.6. Was wondering what .stylelintrc file was being referred to. Need to create it as referenced in following doc:

The .stylelintrc file at top level of theme:

{
  "plugins": ["stylelint-scss"],
  "customSyntax": "postcss-scss",
  "extends": [
    "@roots/sage/stylelint-config",
    "@roots/bud-sass/stylelint-config"
  ],
  "rules": {
    "no-descending-specificity": null,
    "selector-class-pattern": null,
    "function-no-unknown": null
  }
}

I see that @kellymears has closed this issue.

Using node v16, these are the dev packages:

  "devDependencies": {
    "@popperjs/core": "^2.11.7",
    "@roots/bud": "6.8.0",
    "@roots/bud-eslint": "^6.12.3",
    "@roots/bud-prettier": "^6.12.3",
    "@roots/bud-stylelint": "^6.12.3",
    "@roots/eslint-config": "^6.12.3",
    "@roots/sage": "6.8.0",
    "postcss-scss": "^4.0.6"
  },

Wait, I also had to yarn add @roots/bud-terser.

I’m now getting a TypeError:

bud.dashboard.setRenderer is not a function
6

I’m pretty sure this error is due to your bud / extensions not being in sync - bump them to 6.12.3. Coincidentally discussed in another thread today.

1 Like
7

Thanks. That does seem to help.

Then I got the following error, which also seems to be bud-related:

Could not find "@roots/bud-sass/stylelint-config". Do you need the
"configBasedir" or "--config-basedir" option?

Tried a couple of different fixes. Currently have

  "devDependencies": {
    "@popperjs/core": "^2.11.7",
    "@roots/bud": "^6.12.3",
    "@roots/bud-eslint": "^6.12.3",
    "@roots/bud-prettier": "^6.12.3",
    "@roots/bud-stylelint": "^6.12.3",
    "@roots/bud-terser": "^6.12.3",
    "@roots/eslint-config": "^6.12.3",
    "@roots/bud-sass": "^6.12.3",
    "@roots/sage": "6.12.3",
    "postcss-scss": "^4.0.6",
    "stylelint-config-standard": "^33.0.0"
  }

Running nicely now. Thanks.