Using Sage 10 and bud 5.3.2 with sass and stylelint

Aki · February 14, 2022, 10:17pm

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

strarsis · February 14, 2022, 10:25pm

Does this apply to your issue?

github.com/roots/bud

CSS lint errors for SCSS stylesheet files (e.g. `Unknown word`; ...)

opened 06:36PM - 28 Nov 21 UTC

strarsis

bug @roots/bud-sass

* [x] I've read the [guidelines for Contributing to Roots Projects](https://gith…ub.com/roots/.github/blob/master/CONTRIBUTING.md) * [x] This request isn't a duplicate of an existing issue * [x] I've read the [docs](https://roots.io/documentation/) and followed them (if applicable) * [x] This is not a personal support request that should be posted on the [Roots Discourse](https://discourse.roots.io/) community ## Description CSS lint errors occur with SCSS styles, e.g. `✖ Unknown word CssSyntaxError` for valid SCSS syntax for variables, single-line comments, etc. ## Steps to reproduce 1. Initialize new Sage 10 theme from `dev-master` for `bud`. 2. Install `@roots/bud-sass` as development dependency and it to `bud.use` ([instructions](https://github.com/roots/bud/blob/main/site/extensions/bud-sass.mdx); [minimal example](https://github.com/roots/bud/tree/main/examples/sass) in this repository) 3. Use SCSS files instead of CSS files (e.g. rename the existing `app.css` and `editor.css` to `app.scss` and `editor.scss`). 4. Add some SCSS specific syntax that would be invalid in CSS, e.g. a SCSS variable (`$`) or a single line comment (`//`). 5. Run the build. Notice the CSS lint errors that normally also prevent the build. **Expected behavior:** `bud` should configure (`webpack`) to use a different linter for SCSS files or let the existing linter correctly handle SCSS files as SCSS files and not CSS files. **Actual behavior:** Linter is configured to treat SCSS files as CSS files, causing lint errors. **Reproduces how often:** Every time. ## Versions `` Node `16.9.1` WSL `2` Last Sage 10 changelog entry: `Replace Laravel Mix with Bud ([#2643](https://github.com/roots/sage/pull/2643))`

Aki · February 14, 2022, 11:19pm

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

kellymears · February 15, 2022, 12:18am

~~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.