Merge pull request #17297 from overleaf/rd-sass-prettier-2

[web] Enable Prettier for Sass

GitOrigin-RevId: 8658a83010f04898e447230850f6f5bda788c1cc

services/web/frontend/stylesheets/bootstrap-5/foundations/elevation.scss

@@ -5,11 +5,12 @@
 
 // Tooltips, Callouts, Dropdowns, etc.
 @mixin shadow-md {
-  box-shadow: 0px 4px 24px rgba(30, 37, 48, 0.12), 0px 1px 4px rgba(30, 37, 48, 0.08);
+  box-shadow: 0px 4px 24px rgba(30, 37, 48, 0.12),
+    0px 1px 4px rgba(30, 37, 48, 0.08);
 }
 
 // Modals, drawers
 @mixin shadow-lg {
-  box-shadow: 0px 8px 24px rgba(30, 37, 48, 0.16), 0px 4px 8px rgba(30, 37, 48, 0.16);
+  box-shadow: 0px 8px 24px rgba(30, 37, 48, 0.16),
+    0px 4px 8px rgba(30, 37, 48, 0.16);
 }
-

services/web/frontend/stylesheets/bootstrap-5/main-light-style.scss

@@ -1,4 +1,4 @@
 @import 'main-style';
 @import 'css-variables/themes/light';
 
-$is-overleaf-light: true
+$is-overleaf-light: true;

services/web/frontend/stylesheets/bootstrap-5/scss/bootstrap-rule-overrides/buttons.scss

@@ -1,4 +1,9 @@
-@mixin ol-button-size($font-size, $line-height, $padding-y, $padding-x: var(--spacing-06)) {
+@mixin ol-button-size(
+  $font-size,
+  $line-height,
+  $padding-y,
+  $padding-x: var(--spacing-06)
+) {
   --bs-btn-font-size: #{$font-size};
   --bs-btn-line-height: #{$line-height};
   --bs-btn-padding-y: #{$padding-y};
@@ -48,14 +53,14 @@
   @include ol-button-size(
     $font-size: var(--font-size-03),
     $line-height: var(--line-height-03),
-    $padding-y: var(--spacing-03),
+    $padding-y: var(--spacing-03)
   );
 
   &.btn-lg {
     @include ol-button-size(
       $font-size: var(--font-size-03),
       $line-height: var(--line-height-03),
-      $padding-y: var(--spacing-05),
+      $padding-y: var(--spacing-05)
     );
   }
 
@@ -64,7 +69,7 @@
       $font-size: var(--font-size-02),
       $line-height: var(--line-height-02),
       $padding-y: var(--spacing-01),
-      $padding-x: var(--spacing-05),
+      $padding-x: var(--spacing-05)
     );
   }
 
@@ -74,7 +79,7 @@
       $color: var(--content-primary-dark),
       $background: var(--bg-accent-01),
       $hover-background: var(--bg-accent-02),
-      $hover-border: var(--bg-accent-02),
+      $hover-border: var(--bg-accent-02)
     );
   }
 
@@ -85,7 +90,7 @@
       $border: var(--border-primary),
       $hover-background: var(--bg-light-tertiary),
       $hover-border: var(--border-primary),
-      $borderless: false,
+      $borderless: false
     );
   }
 
@@ -93,8 +98,8 @@
     @include ol-button-variant(
       $color: var(--content-primary),
       $background: var(--bg-light-primary),
-      $hover-background: var(--bg-light-tertiary),
-    )
+      $hover-background: var(--bg-light-tertiary)
+    );
   }
 
   &.btn-danger {
@@ -102,22 +107,22 @@
       $color: var(--content-primary-dark),
       $background: var(--bg-danger-01),
       $border: var(--bg-danger-01),
-      $hover-background: var(--bg-danger-02),
-    )
+      $hover-background: var(--bg-danger-02)
+    );
   }
 
   &.btn-danger-ghost {
     @include ol-button-variant(
       $color: var(--content-danger),
       $background: var(--bg-light-primary),
-      $hover-background: var(--bg-danger-03),
-    )
+      $hover-background: var(--bg-danger-03)
+    );
   }
 
   &.btn-premium {
     @include ol-button-variant(
       $color: var(--content-primary-dark),
-      $background: var(--blue-70),
+      $background: var(--blue-70)
     );
     background: var(--premium-gradient);
   }

services/web/frontend/stylesheets/bootstrap-5/scss/components/dropdown-menu.scss

@@ -32,7 +32,7 @@
     color: inherit;
   }
 
-  &[variant="danger"] {
+  &[variant='danger'] {
     color: var(--content-danger);
 
     &:hover:not(.active) {
@@ -76,7 +76,7 @@
 
 // description text should look disabled when the dropdown item is disabled
 .dropdown-item.disabled .dropdown-item-description,
-.dropdown-item[aria-disabled="true"] .dropdown-item-description {
+.dropdown-item[aria-disabled='true'] .dropdown-item-description {
   background-color: transparent;
   color: var(--content-disabled);
 }
@@ -93,14 +93,16 @@
   padding-right: var(--spacing-05);
   padding-left: var(--spacing-05);
 
-  &.btn-primary, &.btn-danger {
+  &.btn-primary,
+  &.btn-danger {
     border-left: 1px solid rgb($neutral-90, 0.16);
   }
   &.btn-secondary {
     border-left: 1px solid var(--neutral-60);
   }
 
-  &[disabled], &[aria-disabled="true"] {
+  &[disabled],
+  &[aria-disabled='true'] {
     border-left: 1px solid var(--neutral-10);
   }
 }

services/web/package.json

@@ -22,8 +22,8 @@
     "webpack:profile": "webpack --config webpack.config.prod.js --profile --json > stats.json",
     "format": "prettier --list-different $PWD/'**/*.{js,jsx,mjs,ts,tsx,json}'",
     "format:fix": "prettier --write $PWD/'**/*.{js,jsx,mjs,ts,tsx,json}'",
-    "format:styles": "prettier --list-different $PWD/'**/*.{css,less}'",
-    "format:styles:fix": "prettier --write $PWD/'**/*.{css,less}'",
+    "format:styles": "prettier --list-different $PWD/'**/*.{css,less,scss}'",
+    "format:styles:fix": "prettier --write $PWD/'**/*.{css,less,scss}'",
     "lint": "eslint --max-warnings 0 --format unix --ext .js,.jsx,.mjs,.ts,.tsx .",
     "lint:fix": "eslint --fix --ext .js,.jsx,.mjs,.ts,.tsx .",
     "type-check": "tsc --noEmit",