Replace scss-lint with stylelint and include in CI

- Remove scss_lint gem dependency and configuration files
- Add stylelint and stylelint-config-standard-scss npm packages
- Create .stylelintrc.json configuration matching previous scss-lint rules
- Update rake tasks to use stylelint instead of scss-lint
- Add stylelint to CI workflow (lint-js-and-ruby.yml)
- Include SCSS linting in main rake lint task and autofix task
- Add yarn script 'lint:scss' for running stylelint

Fixes #1688

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Justin Gordon <[email protected]>
Co-authored-by: Claude <[email protected]>

Author: 3 people

.github/workflows/lint-js-and-ruby.yml

@@ -137,6 +137,8 @@ jobs:
         run: yarn run eslint --report-unused-disable-directives
       - name: Check formatting
         run: yarn start format.listDifferent
+      - name: Lint SCSS with stylelint
+        run: yarn run lint:scss
       - name: Type-check TypeScript
         run: yarn run type-check
       - name: Pack for attw and publint

.scss-lint.yml

@@ -0,0 +1,28 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "color-keyword": null,
+    "color-hex-length": "long",
+    "color-hex-case": "upper",
+    "selector-id-pattern": null,
+    "number-leading-zero": "always",
+    "scss/at-rule-no-unknown": [true, {
+      "ignoreAtRules": ["include", "mixin", "each", "if", "else", "for", "while", "function", "return", "use", "forward"]
+    }],
+    "selector-class-pattern": null,
+    "custom-property-pattern": null,
+    "keyframes-name-pattern": null,
+    "scss/percent-placeholder-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "scss/at-function-pattern": null,
+    "scss/at-mixin-pattern": null,
+    "import-notation": null
+  },
+  "ignoreFiles": [
+    "spec/dummy/app/assets/stylesheets/application.css",
+    "**/*.js",
+    "**/*.jsx",
+    "**/*.ts",
+    "**/*.tsx"
+  ]
+}

.stylelintrc.json

@@ -38,7 +38,6 @@ group :development, :test do
   gem "rubocop", "1.61.0", require: false
   gem "rubocop-performance", "~>1.20.0", require: false
   gem "rubocop-rspec", "~>2.26", require: false
-  gem "scss_lint", require: false
   gem "spring", "~> 4.0"
   gem "lefthook", require: false
   # Added for Ruby 3.5+ compatibility to silence warnings

Gemfile.development_dependencies

@@ -55,6 +55,8 @@
     "react-dom": "^19.0.0",
     "react-on-rails-rsc": "19.0.2",
     "redux": "^4.2.1",
+    "stylelint": "^16.14.0",
+    "stylelint-config-standard-scss": "^13.1.0",
     "swc-loader": "^0.2.6",
     "ts-jest": "^29.2.5",
     "typescript": "^5.8.3",
@@ -67,6 +69,7 @@
     "build": "yarn workspace react-on-rails run build && yarn workspace react-on-rails-pro run build",
     "build-watch": "yarn workspaces run build-watch",
     "lint": "nps eslint",
+    "lint:scss": "stylelint \"spec/dummy/app/assets/stylesheets/**/*.scss\" \"spec/dummy/client/**/*.scss\"",
     "check": "yarn run lint && yarn workspaces run check",
     "type-check": "yarn workspaces run type-check",
     "yalc:publish": "yarn workspaces run yalc:publish",

package.json

@@ -6,7 +6,7 @@ namespace :docker do
     sh "docker-compose run lint rake lint:rubocop"
   end
 
-  desc "Run scss-lint linter from docker"
+  desc "Run stylelint linter from docker"
   task :scss do
     sh "docker-compose run lint rake lint:scss"
   end

rakelib/docker.rake

@@ -10,25 +10,26 @@ namespace :lint do
     sh_in_dir(gem_root, "bundle exec rubocop --version", "bundle exec rubocop .")
   end
 
-  desc "Run scss-lint as shell"
+  desc "Run stylelint as shell"
   task :scss do
-    sh_in_dir(gem_root, "bundle exec scss-lint spec/dummy/app/assets/stylesheets/")
+    sh_in_dir(gem_root, "yarn run stylelint \"spec/dummy/app/assets/stylesheets/**/*.scss\" \"spec/dummy/client/**/*.scss\"")
   end
 
   desc "Run eslint as shell"
   task :eslint do
     sh_in_dir(gem_root, "yarn run eslint --version", "yarn run eslint .")
   end
 
-  desc "Run all eslint & rubocop linters. Skip scss"
-  task lint: %i[eslint rubocop] do
+  desc "Run all eslint, rubocop & stylelint linters"
+  task lint: %i[eslint rubocop scss] do
     puts "Completed all linting"
   end
 
   desc "Auto-fix all linting violations"
   task :autofix do
     sh_in_dir(gem_root, "yarn run eslint . --fix")
     sh_in_dir(gem_root, "yarn run prettier --write .")
+    sh_in_dir(gem_root, "yarn run stylelint \"spec/dummy/app/assets/stylesheets/**/*.scss\" \"spec/dummy/client/**/*.scss\" --fix")
     sh_in_dir(gem_root, "bundle exec rubocop -A")
     puts "Completed auto-fixing all linting violations"
   end