dependencies, deprecated / and lint job doesn't work out of the box.

[hansschuijff]

trafficstars

Thanks for this great jumpstart. There are some small issues, you perhaps want to fix:

1. the dependencies in package.json should probably be devDependencies and can be updated to the latest versions.

  "devDependencies": {
    "autoprefixer": "^10.3.2",
    "browser-sync": "^2.27.5",
    "copyfiles": "^2.4.1",
    "cssnano": "^5.0.8",
    "npm-run-all": "^4.1.5",
    "onchange": "^7.1.0",
    "postcss-cli": "^8.3.1",
    "sass": "^1.38.1",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-order": "^4.1.0",
    "stylelint-scss": "^3.20.1",
    "stylelint-selector-bem-pattern": "^2.1.1"
  }

2. ./sass/_buttons.scss uses a / to divide the border-radius ( border-radius: $tdbc-border-radius/2; ) , but that use is deprecated and you should change it to math.div().

> sass src/sass:public/css

Deprecation Warning: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($tdbc-border-radius, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

   ╷
11 │   border-radius: $tdbc-border-radius/2;
   │                  ^^^^^^^^^^^^^^^^^^^^^
   ╵
    src\sass\_buttons.scss 11:18  @import

After changing that the message changed to:

Error: There is no module with the namespace "math".
   ╷
11 │   border-radius: math.div($tdbc-border-radius, 2);
   │                  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  src\sass\_buttons.scss 11:18  @import

That error was resolved when I added @use "sass:math"; as a first line in _buttons.scss, but after that the lint job reported:

src/sass/_buttons.scss
 1:1  ✖  Unexpected unknown at-rule "@use"   at-rule-no-unknown

and I have no solution for that yet.

3. The lint and lint:fix script didn't work for me out of the box.

> [email protected] lint
> stylelint 'src/sass/**/*.scss' 'src/sass/**/**/*.scss' 'src/sass/**/**/**/*.scss'

Error: No files matching the pattern "'src/sass/**/*.scss', 'src/sass/**/**/*.scss', 'src/sass/**/**/**/*.scss'" were found.
    at C:\Users\Hans\Local Sites\html-sass-jumpstart\node_modules\stylelint\lib\standalone.js:212:12
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

The error was solved when I changed the single quotes in the definition by escaped double quotes .

    "lint": "stylelint \"src/sass/**/*.scss\" \"src/sass/**/**/*.scss\" \"src/sass/**/**/**/*.scss\"",
    "lint:fix": "stylelint --fix \"src/sass/**/*.scss\" \"src/sass/**/**/*.scss\" \"src/sass/**/**/**/*.scss\"",

After those changes it worked and the only remaining error is a lint-error about the @use. Probably you know better how to solve that one.

My local environment is git bash on a windows 10 machine, using vscode as an editor and firefox dev ed as browser.

Thanks

[trasherdk]

How about changing border-radius: $tdbc-border-radius/2; to border-radius: $tdbc-border-radius * 0.5;

Why the single quotes 'src/sass/**/*.scss' ?

Why quotes at all ?

"lint": "stylelint src/sass/**/*.scss src/sass/**/**/*.scss src/sass/**/**/**/*.scss"

If you was really running in git bash, your path would look something like:

admin@ACER-64BIT MINGW64 /c/Workspace/NodeJS/electron-boilerplate (master)
$ pwd
/c/Workspace/NodeJS/electron-boilerplate

[hansschuijff]

Thank you, and you're right, border-radius: $tdbc-border-radius * 0.5; does the job too and doing that solves the @use lint-error.

I've tried removing the single quotes and that also works , so they can just be removed instead of changing them to double quotes. I hadn't tried that yet, but both solutions will work.

I don't know what you mean when you say "if you was really running git bash". I am running on a windows machine, so I am running git bash, but its a windows-version, so it just simulates some linux commands, but it's not a complete linux install. It doesn't really matter for this issues though. pwd reports my path as /c/Users/Hans/Local Sites/html-sass-jumpstart and that's where I installed the boilerplate.

The changes you propose solve the second en third issue I had, and I might not be important here that the packages are not installed as dev, since there are no production packages to be used here and none of the packages will be deployed.

Thanks again. You can change it in the original if you like, but I'm fine with this.