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

strarsis · 2021-11-28T18:36:47Z

I've read the guidelines for Contributing to Roots Projects
This request isn't a duplicate of an existing issue
I've read the docs and followed them (if applicable)
This is not a personal support request that should be posted on the Roots Discourse 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

Initialize new Sage 10 theme from dev-master for bud.
Install @roots/bud-sass as development dependency and it to bud.use
(instructions; minimal example in this repository)
Use SCSS files instead of CSS files
(e.g. rename the existing app.css and editor.css to app.scss and editor.scss).
Add some SCSS specific syntax that would be invalid in CSS,
e.g. a SCSS variable ($) or a single line comment (//).
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)`

The text was updated successfully, but these errors were encountered:

strarsis · 2021-11-28T18:44:17Z

Also re-installed @types/sass and @roots/bud-sass as development dependencies,
as in examples package.json.

The issue is still there, the other files build, but no the styles to CSS files.
Scrolling up the build log one can see the linter/build errors.

kellymears · 2021-11-28T22:58:48Z

there are two things going on here. both of them are easy fixes for you right now and can be addressed in the repo in the next beta.

user ./.stylelintrc

partially, this is a stylelint config issue. you want to add the following to ./.stylelintrc. you also need to install stylelint-scss.

{
  "plugins": ["stylelint-scss"],
  "customSyntax": "postcss-scss",
  // ...config follows
}

with that rule in place scss syntax compiles for me in @roots/sage.

maybe @roots/bud-sass should check if @roots/bud-postcss and @roots/bud-stylelint are all installed to apply this automatically to the stylelint base config.

or maybe @roots/sage (the bud preset) should do the check. i'm not sure. @benword @QWp6t, thoughts?

`@roots/bud-sass` bug

there is still a warning thrown and if you use stuff like inline comments it will probably be an error. i'll address this in a PR on @roots/bud-sass today but you can add a pretty small workaround for now and be totally set. you should not need to install postcss-scss -- it is provided by @roots/bud-sass in the current beta.

/**
  * Add postcss-scss syntax
  *
  * @remarks
  * fix for @roots/bud@^5.0.0-next.16. 
  * can be removed in @roots/bud@^5.0.0-next.17.
  *
  * @see {@link https://git.io/JM8ym}
  */
config.tap(bud => {
  const options = bud.build.items.postcss.options(app);
  options.postcssOptions.syntax = 'postcss-scss';
}) 
// ...rest of sage configuration

strarsis · 2021-11-29T15:07:01Z

@kellymears: Hm, is there bud API that allows for manipulating the config files like .stylelintrc?
Or changing the file itself? Then the bud SASS extension can automatically do this configuration.

kellymears · 2021-11-29T16:06:59Z

@strarsis there is a way to override and/or provide base configuration for stylelint.

that's what i meant when i said

maybe @roots/bud-sass should check if @roots/bud-postcss and @roots/bud-stylelint are all installed to apply this automatically to the stylelint base config.

still curious what @retlehs and @QWp6t think. on the one hand i think of stylelint configs as the kind of thing that lives out in userland. but on the other hand it really would be nice to just have this magically work. i can't imagine use cases where someone wants to use stylelint and sass together without this stylelint plugin.

we'd handle it the same way i handled interfacing with postcss in #737

mensch · 2022-02-14T09:07:28Z

I believe this is broken again in 5.3.2. I have the following in my .stylelintrc, but the build task still outputs errors related to not recognising the syntax (e.g. Unexpected unknown function "math.floor").

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

devDependencies from 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",
    "@typescript-eslint/eslint-plugin": "^5.10.2",
    "@typescript-eslint/parser": "^5.10.2",
    "fork-ts-checker-webpack-plugin": "^7.0.0",
    "svg-spritemap-webpack-plugin": "^4.4.0",
    "typescript": "^4.5.5"
  },

kellymears · 2022-02-14T21:16:06Z

@mensch can you try changing the order of @roots/sage/stylelint-config and @roots/bud-sass/stylelint-config in your .stylelintrc and report back if it persists?

Additionally, the output of yarn why stylelint-config-recommended. Hopefully it looks something like this:

❯ 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 "[email protected]"
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"

Your error report makes me think you are on a version prior to 6.0.0. This might be resolved by removing the ^ from your versions:

    "@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",

which should probably be our default recommendation, regardless.

mensch · 2022-02-14T21:22:42Z

Just swapped those out, but no change, unfortunately. Remove either one of the entries, or all of them doesn't make a difference either.

This is the output of yarn why:

│  └─ stylelint-config-recommended@npm:6.0.0 (via npm:^6.0.0)
│
├─ stylelint-config-recommended-scss@npm:5.0.2 [b10d3]
│  └─ stylelint-config-recommended@npm:6.0.0 [2ab46] (via npm:^6.0.0 [2ab46])
│
├─ stylelint-config-standard@npm:25.0.0
│  └─ stylelint-config-recommended@npm:7.0.0 (via npm:^7.0.0)
│
└─ stylelint-config-standard@npm:25.0.0 [4289f]
   └─ stylelint-config-recommended@npm:7.0.0 [be706] (via npm:^7.0.0 [be706])```

kellymears · 2022-02-14T21:22:48Z

Also, I love godspeed.

mensch · 2022-02-14T21:28:16Z

Your error report makes me think you are on a version prior to 6.0.0. This might be resolved by removing the ^ from your versions:

I removed the ^ from the package version and did a clean install, but that doesn't seem to have any effect.

Also, I love godspeed.

Had that avatar for ages. But I think it's from one of their best albums, the more recent stuff doesn't do it for me really.

kellymears · 2022-02-15T01:12:55Z

stylelint-config-recommended-scss has not been updated to support the latest version of stylelint/stylelint-config-recommended. There was a new rule added which the stylelint-config-recommended-scss preset is unaware of.

add the following rule to your styelint until that config is updated:

    "function-no-unknown": null,

if coming from an older version of sass you will also need to import the math module at the top of your stylesheet. don't know if that applies here:

@use 'sass:math';

akiletour · 2022-02-15T01:20:17Z

@kellymears your temporary fix is ok for me :)

kellymears · 2022-02-23T04:21:29Z

I think the original scope of this issue is pretty fully covered. I'm going to go ahead and close this.

We'll roll out a point release as soon as stylelint-config-recommended-scss is updated. Until then disabling the function-no-unknown rule should fix it.

strarsis changed the title ~~CSS Lint errors for SCSS (Unknown word, ...)~~ CSS lint errors for SCSS (Unknown word, ...) Nov 28, 2021

strarsis changed the title ~~CSS lint errors for SCSS (Unknown word, ...)~~ CSS lint errors for SCSS stylesheet files (Unknown word, ...) Nov 28, 2021

strarsis mentioned this issue Nov 28, 2021

Installing @roots/bud-sass throws an error #700

Closed

4 tasks

strarsis closed this as completed Nov 28, 2021

strarsis reopened this Nov 28, 2021

kellymears self-assigned this Nov 28, 2021

kellymears added @roots/bud-sass bug Something isn't working labels Nov 28, 2021

kellymears mentioned this issue Nov 29, 2021

@roots/bud-sass does not include postcss-scss #732

Closed

strarsis changed the title ~~CSS lint errors for SCSS stylesheet files (Unknown word, ...)~~ CSS lint errors for SCSS stylesheet files (e.g. Unknown word; ...) Nov 29, 2021

kellymears mentioned this issue Nov 29, 2021

fix: @roots/bud-sass syntax #737

Merged

kellymears mentioned this issue Dec 19, 2021

Styles not compiling by default #746

Closed

4 tasks

kellymears mentioned this issue Jan 4, 2022

Bud v5.1.0 #885

Merged

3 tasks

kellymears mentioned this issue Jan 21, 2022

improve(bud) dependency strategy #1005

Merged

2 tasks

kellymears closed this as completed Feb 23, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

strarsis commented Nov 28, 2021 •

edited

Loading

strarsis commented Nov 28, 2021 •

edited

Loading

kellymears commented Nov 28, 2021 •

edited

Loading

strarsis commented Nov 29, 2021

kellymears commented Nov 29, 2021 •

edited

Loading

mensch commented Feb 14, 2022

kellymears commented Feb 14, 2022 •

edited

Loading

mensch commented Feb 14, 2022

kellymears commented Feb 14, 2022

mensch commented Feb 14, 2022 •

edited

Loading

kellymears commented Feb 15, 2022

akiletour commented Feb 15, 2022

kellymears commented Feb 23, 2022

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

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

Comments

strarsis commented Nov 28, 2021 • edited Loading

Description

Steps to reproduce

Versions

strarsis commented Nov 28, 2021 • edited Loading

kellymears commented Nov 28, 2021 • edited Loading

user ./.stylelintrc

@roots/bud-sass bug

strarsis commented Nov 29, 2021

kellymears commented Nov 29, 2021 • edited Loading

mensch commented Feb 14, 2022

kellymears commented Feb 14, 2022 • edited Loading

mensch commented Feb 14, 2022

kellymears commented Feb 14, 2022

mensch commented Feb 14, 2022 • edited Loading

kellymears commented Feb 15, 2022

akiletour commented Feb 15, 2022

kellymears commented Feb 23, 2022

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

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

strarsis commented Nov 28, 2021 •

edited

Loading

strarsis commented Nov 28, 2021 •

edited

Loading

kellymears commented Nov 28, 2021 •

edited

Loading

`@roots/bud-sass` bug

kellymears commented Nov 29, 2021 •

edited

Loading

kellymears commented Feb 14, 2022 •

edited

Loading

mensch commented Feb 14, 2022 •

edited

Loading