Replace scss-lint with stylelint (#1825)

## Summary
- Replace deprecated scss-lint with modern stylelint
- Remove scss_lint gem dependency and configuration files
- Add stylelint and stylelint-config-standard-scss npm packages
- Create .stylelintrc.json configuration matching original 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

## Configuration Philosophy
Maintains the original minimal approach - only enables essential CSS
validation rules while disabling formatting rules, matching the original
scss-lint configuration philosophy.

## Test Plan
- [x] Stylelint runs without errors on all SCSS files
- [x] Configuration disables unwanted formatting rules
- [x] Rake tasks work correctly with new linter
- [x] CI integration functions properly

Fixes #1688

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

<!-- Reviewable:start -->
- - -
This change is [<img src="https://reviewable.io/review_button.svg"
height="34" align="absmiddle"
alt="Reviewable"/>](https://reviewable.io/reviews/shakacode/react_on_rails/1825)
<!-- Reviewable:end -->


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- Chores
- Migrated SCSS linting from the legacy linter to Stylelint with the
standard SCSS config.
- Added Stylelint dev dependencies, a lint:scss script and autofix
support.
- Updated lint tasks and Docker orchestration to run Stylelint alongside
other linters.
- Removed legacy SCSS linter configuration, development dependency and
binstub.
  - Added ignore patterns to scope Stylelint to relevant files.

- CI
  - Added a CI step to run SCSS linting with Stylelint.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: claude[bot] <41898282+claude[bot]@users.noreply.github.com>
Co-authored-by: Justin Gordon <justin808@users.noreply.github.com>
Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Justin Gordon <justin@shakacode.com>

Author: 4 people

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

@@ -134,6 +134,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,46 @@
+{
+  "extends": "stylelint-config-standard-scss",
+  "rules": {
+    "color-named": null,
+    "color-hex-length": "long",
+    "selector-id-pattern": null,
+    "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,
+    "at-rule-empty-line-before": null,
+    "font-family-name-quotes": null,
+    "rule-empty-line-before": null,
+    "scss/dollar-variable-empty-line-before": null,
+    "function-url-quotes": 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

@@ -332,11 +332,6 @@ GEM
       rubocop (~> 1.40)
     ruby-progressbar (1.13.0)
     rubyzip (2.3.2)
-    sass (3.7.4)
-      sass-listen (~> 4.0.0)
-    sass-listen (4.0.0)
-      rb-fsevent (~> 0.9, >= 0.9.4)
-      rb-inotify (~> 0.9, >= 0.9.7)
     sass-rails (6.0.0)
       sassc-rails (~> 2.1, >= 2.1.1)
     sassc (2.4.0)
@@ -347,8 +342,6 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
-    scss_lint (0.60.0)
-      sass (~> 3.5, >= 3.5.5)
     sdoc (2.6.1)
       rdoc (>= 5.0)
     securerandom (0.4.1)
@@ -473,7 +466,6 @@ DEPENDENCIES
   rubocop-performance (~> 1.20.0)
   rubocop-rspec (~> 2.26)
   sass-rails (~> 6.0)
-  scss_lint
   sdoc
   selenium-webdriver (= 4.9.0)
   shakapacker (= 9.3.0)

Gemfile.lock

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

@@ -2,36 +2,47 @@
 
 require_relative "task_helpers"
 
-namespace :lint do
+namespace :lint do # rubocop:disable Metrics/BlockLength
   include ReactOnRails::TaskHelpers
 
   desc "Run Rubocop as shell"
   task :rubocop 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, stylelint_command)
   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, stylelint_fix_command)
     sh_in_dir(gem_root, "bundle exec rubocop -A")
     puts "Completed auto-fixing all linting violations"
   end
+
+  private
+
+  def stylelint_command
+    "yarn run stylelint \"spec/dummy/app/assets/stylesheets/**/*.scss\" \"spec/dummy/client/**/*.scss\""
+  end
+
+  def stylelint_fix_command
+    "#{stylelint_command} --fix"
+  end
 end
 
 desc "Runs all linters. Run `rake -D lint` to see all available lint options"