chore: replace scss-lint (deprecated) by prettier

.scss-lint.yml

@@ -1,264 +0,0 @@
-exclude:
-  - 'app/assets/stylesheets/reset.scss'
-  - 'app/assets/stylesheets/direct_uploads.scss'
-  - 'app/assets/stylesheets/dsfr_override.scss'
-  - 'app/assets/stylesheets/manager.scss'
-
-linters:
-  BangFormat:
-    enabled: true
-    space_before_bang: true
-    space_after_bang: false
-
-  BemDepth:
-    enabled: false
-    max_elements: 1
-
-  BorderZero:
-    enabled: true
-    convention: none
-
-  # To enable later
-  ChainedClasses:
-    enabled: false
-
-  ColorKeyword:
-    enabled: true
-
-  # To enable later
-  ColorVariable:
-    enabled: false
-
-  Comment:
-    enabled: true
-    style: silent
-
-  DebugStatement:
-    enabled: true
-
-  DeclarationOrder:
-    enabled: true
-
-  DisableLinterReason:
-    enabled: false
-
-  DuplicateProperty:
-    enabled: true
-
-  ElsePlacement:
-    enabled: true
-    style: same_line
-
-  EmptyLineBetweenBlocks:
-    enabled: true
-    ignore_single_line_blocks: false
-
-  EmptyRule:
-    enabled: true
-
-  ExtendDirective:
-    enabled: false
-
-  FinalNewline:
-    enabled: true
-    present: true
-
-  HexLength:
-    enabled: true
-    style: long
-
-  HexNotation:
-    enabled: true
-    style: uppercase
-
-  HexValidation:
-    enabled: true
-
-  # To enable later
-  IdSelector:
-    enabled: false
-
-  # To enable later
-  ImportantRule:
-    enabled: false
-
-  ImportPath:
-    enabled: false
-    leading_underscore: false
-    filename_extension: false
-
-  Indentation:
-    enabled: true
-    allow_non_nested_indentation: false
-    character: space
-    width: 2
-
-  LeadingZero:
-    enabled: true
-    style: include_zero
-
-  MergeableSelector:
-    enabled: false
-    force_nesting: true
-
-  NameFormat:
-    enabled: true
-    allow_leading_underscore: false
-    convention: hyphenated_lowercase
-
-  # To enable later
-  NestingDepth:
-    enabled: false
-    max_depth: 3
-    ignore_parent_selectors: false
-
-  # To enable later
-  PlaceholderInExtend:
-    enabled: false
-
-  PrivateNamingConvention:
-    enabled: false
-    prefix: _
-
-  PropertyCount:
-    enabled: false
-    include_nested: false
-    max_properties: 10
-
-  PropertySortOrder:
-    enabled: false
-    ignore_unspecified: false
-    min_properties: 2
-    separate_groups: false
-
-  PropertySpelling:
-    enabled: true
-    extra_properties:
-      - scroll-padding
-    disabled_properties: []
-
-  # To enable later
-  PropertyUnits:
-    enabled: false
-    global: [
-      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
-      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
-      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
-      'deg', 'grad', 'rad', 'turn',            # Angle
-      'ms', 's',                               # Duration
-      'Hz', 'kHz',                             # Frequency
-      'dpi', 'dpcm', 'dppx',                   # Resolution
-      '%']                                     # Other
-    properties: {}
-
-  PseudoElement:
-    enabled: false # otherwise rules on ::marker fails
-
-  # To enable later
-  QualifyingElement:
-    enabled: false
-    allow_element_with_attribute: false
-    allow_element_with_class: false
-    allow_element_with_id: false
-
-  # To enable later
-  SelectorDepth:
-    enabled: false
-    max_depth: 3
-
-  SelectorFormat:
-    enabled: true
-    # hyphenated_lowercase + any dsfr selector which are not hyphenated
-    convention: ^(?:fr-[^A-Z]+|[^_A-Z]+)$
-
-  Shorthand:
-    enabled: false
-    allowed_shorthands: [1, 2, 3, 4]
-
-  SingleLinePerProperty:
-    enabled: true
-    allow_single_line_rule_sets: false
-
-  SingleLinePerSelector:
-    enabled: true
-
-  SpaceAfterComma:
-    enabled: true
-    style: one_space
-
-  SpaceAfterComment:
-    enabled: true
-    style: one_space
-    allow_empty_comments: true
-
-  SpaceAfterPropertyColon:
-    enabled: true
-    style: one_space
-
-  SpaceAfterPropertyName:
-    enabled: true
-
-  SpaceAfterVariableColon:
-    enabled: true
-    style: one_space
-
-  SpaceAfterVariableName:
-    enabled: true
-
-  SpaceAroundOperator:
-    enabled: true
-    style: one_space
-
-  SpaceBeforeBrace:
-    enabled: true
-    style: space
-    allow_single_line_padding: false
-
-  SpaceBetweenParens:
-    enabled: true
-    spaces: 0
-
-  StringQuotes:
-    enabled: true
-    style: double_quotes
-
-  TrailingSemicolon:
-    enabled: true
-
-  TrailingWhitespace:
-    enabled: true
-
-  TrailingZero:
-    enabled: true
-
-  # To enable later
-  TransitionAll:
-    enabled: false
-
-  UnnecessaryMantissa:
-    enabled: true
-
-  UnnecessaryParentReference:
-    enabled: true
-
-  UrlFormat:
-    enabled: true
-
-  UrlQuotes:
-    enabled: true
-
-  VariableForProperty:
-    enabled: false
-    properties: []
-
-  VendorPrefix:
-    enabled: true
-    identifier_list: base
-    additional_identifiers: []
-    excluded_identifiers: []
-
-  ZeroUnit:
-    enabled: false
-
-  Compass::*:
-    enabled: false

Gemfile

@@ -147,7 +147,6 @@ group :development do
   gem 'rubocop-performance', require: false
   gem 'rubocop-rails', require: false
   gem 'rubocop-rspec', require: false
-  gem 'scss_lint', require: false
   gem 'stackprof'
   gem 'web-console'
 end

Gemfile.lock

@@ -690,11 +690,6 @@ GEM
     sanitize (6.1.2)
       crass (~> 1.0.2)
       nokogiri (>= 1.12.0)
-    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)
     sassc (2.4.0)
       ffi (~> 1.9)
     sassc-rails (2.1.2)
@@ -703,8 +698,6 @@ GEM
       sprockets (> 3.0)
       sprockets-rails
       tilt
-    scss_lint (0.60.0)
-      sass (~> 3.5, >= 3.5.5)
     selectize-rails (0.12.6)
     selenium-devtools (0.126.0)
       selenium-webdriver (~> 4.2)
@@ -997,7 +990,6 @@ DEPENDENCIES
   rubocop-rspec
   saml_idp
   sassc-rails
-  scss_lint
   selenium-devtools
   selenium-webdriver
   sentry-delayed_job

app/assets/stylesheets/dossier_edit.scss

@@ -51,11 +51,9 @@ $dossier-actions-bar-border-width: 1px;
   }
 
   .dossier-edit-sticky-footer {
-    // scss-lint:disable VendorPrefix DuplicateProperty
     position: fixed;           // Fallback for IE 11, and other browser that don't support sticky
     position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
     position: sticky;
-    // scss-lint:enable VendorPrefix DuplicateProperty
 
     // IE 11 uses `position:fixed` – and thus needs an explicit width, content-box for better layout, etc.
     width: 100%;

app/assets/stylesheets/dsfr.scss

@@ -118,7 +118,6 @@ trix-editor.fr-input {
 
 // Fix firefox < 80, Safari < 15.4, Chrome < 83 not supporting "appearance: auto" on inputs
 // This rule was set by DSFR for DSFR design, but broke our legacy forms.
-// scss-lint:disable DuplicateProperty
 input[type="checkbox"] {
   -moz-appearance: checkbox;
   -moz-appearance: auto;
@@ -134,7 +133,6 @@ input[type="radio"] {
   -webkit-appearance: radio;
   -webkit-appearance: auto;
 }
-// scss-lint:enable DuplicateProperty
 
 // remove additional calendar icon on date input already handle by Firefox navigator
 @-moz-document url-prefix() {

app/assets/stylesheets/forms.scss

@@ -52,7 +52,6 @@
   // Don't cumulate margin-bottoms for inlined elements (radio...), because .fr-fieldset has already its own
   // This is important because of multilpe conditional hidden elements to not take additional space,
   // but we need the usual margin when there are an error or conditional spinner is visible.
-  // scss-lint:disable SingleLinePerSelector
   .fr-fieldset__element
     > .fr-fieldset:not(.fr-fieldset--error):not(:has(+ .spinner))
     > .fr-fieldset__element.fr-fieldset__element--inline {
@@ -208,7 +207,7 @@
     }
   }
 
-  .drop_down_other { // scss-lint:disable SelectorFormat
+  .drop_down_other {
     label {
       font-weight: normal;
     }
@@ -279,7 +278,7 @@
     }
   }
 
-  div.field_with_errors > input { // scss-lint:disable SelectorFormat
+  div.field_with_errors > input {
     border: 1px solid $dark-red;
   }
 
@@ -384,7 +383,7 @@
     }
   }
 
-  .editable-champ-titre_identite { // scss-lint:disable SelectorFormat
+  .editable-champ-titre_identite {
     margin-bottom: 2 * $default-padding;
   }
 

app/assets/stylesheets/icons.scss

@@ -134,7 +134,6 @@
 // 3. Follow the first example : create the class then add the mask-image property with data url you copied
 // 4. Keep this list alphabetic :)
 .fr-icon {
-  // scss-lint:disable VendorPrefix
   &-align-center {
     &:before,
     &:after {
@@ -230,5 +229,4 @@
       mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 3V12C8 14.2091 9.79086 16 12 16C14.2091 16 16 14.2091 16 12V3H18V12C18 15.3137 15.3137 18 12 18C8.68629 18 6 15.3137 6 12V3H8ZM4 20H20V22H4V20Z' fill='currentColor'%3E%3C/path%3E%3C/svg%3E");
     }
   }
-  // scss-lint:enable VendorPrefix
 }

app/assets/stylesheets/layouts.scss

@@ -54,17 +54,13 @@
 
 .sticky--top {
   position: sticky;
-  // scss-lint:disable VendorPrefix
   position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
-  // scss-lint:enable VendorPrefix
   top: 1rem;
 }
 
 .sticky--bottom {
   position: sticky;
-  // scss-lint:disable VendorPrefix
   position: -webkit-sticky; // This is needed on Safari (tested on 12.1)
-  // scss-lint:enable VendorPrefix
   bottom: 0;
 
   z-index: 10; // above DSFR btn which are at 1

app/assets/stylesheets/procedure_form.scss

@@ -1,8 +1,6 @@
 @import "colors";
 @import "constants";
 
-// scss-lint:disable SelectorFormat
-
 .procedure-form .page-title {
   text-align: left;
 }

lib/tasks/lint.rake

@@ -3,11 +3,11 @@
 task :lint do
   sh "bundle exec rubocop --parallel"
   sh "bundle exec haml-lint app/views/ app/components/"
-  sh "bundle exec scss-lint app/assets/stylesheets/"
   sh "bundle exec i18n-tasks missing --locales fr"
   sh "bundle exec i18n-tasks unused --locale en" # TODO: check for all locales
   sh "bundle exec i18n-tasks check-consistent-interpolations"
   sh "bundle exec brakeman --no-pager"
   sh "bun lint:js"
   sh "bun lint:types"
+  sh "bun lint:css"
 end

package.json

@@ -109,6 +109,7 @@
     "clean": "del tmp public/graphql && bin/vite clobber",
     "lint:js": "eslint --ext .js,.jsx,.ts,.tsx ./app/javascript",
     "lint:types": "tsc",
+    "lint:css": "prettier app/assets/stylesheets --check",
     "graphql:doc:build": "RAILS_ENV=production bin/rake graphql:schema:idl && spectaql spectaql_config.yml",
     "postinstall": "patch-package",
     "test": "vitest",