Replace scss-lint with stylelint

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

@@ -78,6 +78,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

.stylelintrc.json

@@ -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"
+  ]
+}

Gemfile.development_dependencies

@@ -36,7 +36,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.lock

@@ -318,11 +318,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)
@@ -333,8 +328,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)
     selenium-webdriver (4.9.0)
@@ -437,7 +430,6 @@ DEPENDENCIES
   rubocop-performance (~> 1.20.0)
   rubocop-rspec (~> 2.26)
   sass-rails (~> 6.0)
-  scss_lint
   sdoc
   selenium-webdriver (= 4.9.0)
   shakapacker (= 8.2.0)

package.json

@@ -71,6 +71,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",
     "ts-jest": "^29.2.5",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.35.0"
@@ -98,6 +100,7 @@
     "build": "yarn run clean && yarn run tsc --declaration",
     "build-watch": "yarn run clean && yarn run tsc --watch",
     "lint": "nps eslint",
+    "lint:scss": "stylelint \"spec/dummy/app/assets/stylesheets/**/*.scss\" \"spec/dummy/client/**/*.scss\"",
     "check": "yarn run lint && yarn run test && yarn run type-check",
     "type-check": "yarn run tsc --noEmit --noErrorTruncation",
     "release:patch": "node_package/scripts/release patch",

rakelib/docker.rake

@@ -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/lint.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"