Merge pull request #19472 from overleaf/rd-stylelint-ci

[web] Add Stylelint formatting to the CI

GitOrigin-RevId: f31139f9f6f70aa96214b59db37ad1f79cd1e733

services/web/.stylelintrc.json

@@ -1,3 +1,9 @@
 {
-  "extends": ["stylelint-config-standard-scss"]
+  "extends": ["stylelint-config-standard-scss"],
+  "rules": {
+    "function-url-quotes": null,
+    "no-descending-specificity": null,
+    "scss/at-extend-no-missing-placeholder": null,
+    "scss/operator-no-newline-after": null
+  }
 }

services/web/Makefile

@@ -397,6 +397,10 @@ lint: lint_eslint
 lint_eslint:
 	npm run lint
 
+lint: lint_stylelint
+lint_stylelint:
+	npm run lint:styles
+
 lint: lint_pug
 lint_pug:
 	bin/lint_pug_templates

services/web/app/views/layout/language-picker-bootstrap-5.pug

@@ -20,7 +20,7 @@ li.dropdown.dropup.subdued(dropdown).language-picker
 		each subdomainDetails, subdomain in settings.i18n.subdomainLang
 			if !subdomainDetails.hide
 				- let isActive = subdomainDetails.lngCode === currentLngCode
-				li.lngOption
+				li.lng-option
 					a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams, role="menuitem", class=isActive ? 'dropdown-item active' : 'dropdown-item', aria-selected=isActive ? 'true' : 'false')
 						| #{settings.translatedLanguages[subdomainDetails.lngCode]}
 						if subdomainDetails.lngCode === currentLngCode

services/web/app/views/layout/language-picker.pug

@@ -19,6 +19,6 @@ li.dropdown.dropup.subdued(dropdown).language-picker
 		li.dropdown-header #{translate("language")}
 		each subdomainDetails, subdomain in settings.i18n.subdomainLang
 			if !subdomainDetails.hide
-				li.lngOption
+				li.lng-option
 					a.menu-indent(href=subdomainDetails.url+currentUrlWithQueryParams role="menuitem")
 						| #{settings.translatedLanguages[subdomainDetails.lngCode]}

services/web/frontend/js/features/settings/components/emails-section.tsx

@@ -46,7 +46,7 @@ function EmailsSectionContent() {
       <>
         <EmailsHeader />
         {isInitializing ? (
-          <div className="affiliations-table-row--highlighted">
+          <div className="affiliations-table-row-highlighted">
             <div className="affiliations-table-cell text-center">
               <Icon type="refresh" fw spin /> {t('loading')}...
             </div>

services/web/frontend/js/features/settings/components/emails/add-email/country-input.tsx

@@ -127,7 +127,7 @@ function Downshift({ setValue, inputRef }: CountryInputProps) {
                   role={undefined}
                   className={classnames({
                     active: selectedItem?.name === item.name,
-                    'dropdown-item--highlighted': highlightedIndex === index,
+                    'dropdown-item-highlighted': highlightedIndex === index,
                   })}
                   trailingIcon={
                     selectedItem?.name === item.name ? 'check' : undefined

services/web/frontend/js/features/settings/components/emails/add-email/layout.tsx

@@ -12,7 +12,7 @@ type LayoutProps = {
 
 function Layout({ isError, error, children }: LayoutProps) {
   return (
-    <div className="affiliations-table-row--highlighted">
+    <div className="affiliations-table-row-highlighted">
       <OLRow>{children}</OLRow>
       {isError && (
         <OLNotification

services/web/frontend/js/features/settings/components/emails/downshift-input.tsx

@@ -171,7 +171,7 @@ function Downshift({
                   role={undefined}
                   className={classnames({
                     active: selectedItem === item,
-                    'dropdown-item--highlighted': highlightedIndex === index,
+                    'dropdown-item-highlighted': highlightedIndex === index,
                   })}
                   trailingIcon={selectedItem === item ? 'check' : undefined}
                 >

services/web/frontend/stylesheets/app/account-settings.less

@@ -32,7 +32,7 @@
   padding-left: @margin-sm;
   border-left: 2px solid @table-border-color; // don't migrate this line of style
 }
-.affiliations-table-row--highlighted {
+.affiliations-table-row-highlighted {
   background-color: tint(@content-alt-bg-color, 6%);
 }
 .affiliations-table-email {

services/web/frontend/stylesheets/bootstrap-5/abstracts/mixins.scss

@@ -56,9 +56,11 @@
 @mixin modal-lg {
   max-width: 960px;
 }
+
 @mixin modal-md {
   max-width: 640px;
 }
+
 @mixin modal-sm {
   max-width: 480px;
 }

services/web/frontend/stylesheets/bootstrap-5/abstracts/variable-overrides.scss

@@ -3,7 +3,6 @@
 $prefix: bs-;
 
 // Options
-//
 // Quickly modify global styling by enabling or disabling optional features.
 
 $enable-validation-icons: false;
@@ -17,7 +16,6 @@ $font-size-sm: var(--font-size-02);
 $line-height-base: 1.5;
 
 // Components
-//
 // Define common padding and border radius sizes and more.
 
 $focus-ring-width: 2px;
@@ -40,25 +38,17 @@ $table-cell-padding-y: $spacing-04;
 $table-cell-padding-x: $spacing-04;
 $table-cell-padding-y-sm: $spacing-02;
 $table-cell-padding-x-sm: $spacing-02;
-
 $table-color: var(--content-secondary);
 $table-bg: var(--bg-light-primary);
-
 $table-th-font-weight: 600;
-
 $table-striped-color: $table-color;
 $table-striped-bg: var(--bg-light-secondary);
-
 $table-active-color: $table-color;
 $table-active-bg: $bg-accent-03;
-
 $table-hover-color: $table-color;
 $table-hover-bg: var(--bg-light-tertiary);
-
 $table-border-color: $border-divider;
-
 $table-striped-order: even;
-
 $table-caption-color: var(--content-secondary);
 
 // Forms
@@ -88,25 +78,19 @@ $input-line-height-sm: 1.25; // equivalent of var(--line-height-02) - BS expects
 $input-padding-y-lg: $spacing-05;
 $input-padding-x-lg: $spacing-05;
 $input-font-size-lg: var(--font-size-03);
-
 $input-bg: $bg-light-primary;
 $input-disabled-color: var(--content-disabled);
 $input-disabled-bg: $bg-light-disabled;
 $input-disabled-border-color: var(--border-disabled);
-
 $input-color: $content-primary;
 $input-border-color: $neutral-60;
 $input-border-width: var(--bs-border-width);
-
 $input-border-radius: $border-radius-base;
 $input-border-radius-sm: $border-radius-base;
 $input-border-radius-lg: $border-radius-base;
-
 $input-focus-border-color: var(--border-active);
-
 $input-placeholder-color: var(--content-placeholder);
 $input-plaintext-color: $content-primary;
-
 $input-height-border: calc(
   #{$input-border-width} * 2
 ); // stylelint-disable-line function-disallowed-list
@@ -126,11 +110,9 @@ $input-height-lg: add(
 
 // form-check-variables
 $form-check-label-color: var(--content-primary);
-
 $form-check-input-border: var(--bs-border-width) solid var(--border-primary);
 $form-check-input-border-radius: $border-radius-base;
 $form-check-input-focus-border: var(--border-primary);
-
 $form-check-input-disabled-opacity: 1;
 
 // Form validation
@@ -155,6 +137,7 @@ $form-validation-states: (
     'border-color': var(--#{$prefix}form-invalid-border-color),
   ),
 );
+
 // Close buttons
 $btn-close-color: $content-primary;
 $btn-close-opacity: 1;

services/web/frontend/stylesheets/bootstrap-5/components/badge.scss

@@ -20,7 +20,6 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-
   padding: 0 $spacing-02;
   margin: 0 (-$spacing-02) 0 $spacing-02;
   border-top-right-radius: inherit;
@@ -39,11 +38,13 @@
 
 .badge-content {
   @include text-truncate;
+
   padding: var(--bs-badge-padding-y) 0;
 }
 
 .badge-tag {
   @include body-sm;
+
   color: $dark;
 
   &:hover {

services/web/frontend/stylesheets/bootstrap-5/components/button.scss

@@ -86,6 +86,7 @@
 
     background: var(--premium-gradient);
     transition: none;
+
     &:hover {
       background: var(--blue-70);
     }
@@ -109,8 +110,10 @@
   &[disabled],
   fieldset[disabled] & {
     background-color: transparent;
+
     @include box-shadow(none);
   }
+
   &:hover,
   &:focus {
     color: var(--link-ui-hover);
@@ -120,11 +123,13 @@
 
   &.btn-danger {
     color: var(--content-danger);
-    //since it's a link, override the button states
+
+    // since it's a link, override the button states
     &:active {
       color: var(--content-danger);
       background-color: transparent;
     }
+
     &:focus-visible {
       background-color: transparent;
       outline: -webkit-focus-ring-color auto 1px;
@@ -134,6 +139,7 @@
 
 .btn-inline-link {
   @extend .btn-link;
+
   font-size: inherit;
   padding: 0;
   vertical-align: inherit;

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

@@ -147,6 +147,6 @@
   overflow-x: hidden;
 }
 
-.dropdown-item--highlighted {
+.dropdown-item-highlighted {
   background-color: var(--bg-light-secondary);
 }

services/web/frontend/stylesheets/bootstrap-5/components/footer.scss

@@ -1,3 +1,5 @@
+@use 'sass:map';
+
 footer.site-footer {
   background-color: var(--bg-light-primary);
   border-top: 1px solid var(--border-primary-dark);
@@ -23,7 +25,7 @@ footer.site-footer {
     }
   }
 
-  li.lngOption {
+  li.lng-option {
     text-align: left;
     display: list-item;
 
@@ -224,7 +226,7 @@ footer.site-footer {
 
   @include media-breakpoint-up(md) {
     .fat-footer-container {
-      width: (map-get($grid-breakpoints, 'md') - ($spacing-04 * 2));
+      width: (map.get($grid-breakpoints, 'md') - ($spacing-04 * 2));
     }
 
     #footer-brand {
@@ -270,7 +272,7 @@ footer.site-footer {
 
   @include media-breakpoint-up(lg) {
     .fat-footer-container {
-      width: (map-get($grid-breakpoints, 'lg') - $spacing-07);
+      width: (map.get($grid-breakpoints, 'lg') - $spacing-07);
     }
 
     .fat-footer-sections {
@@ -280,7 +282,7 @@ footer.site-footer {
 
   @include media-breakpoint-up(xl) {
     .fat-footer-container {
-      width: (map-get($grid-breakpoints, 'xl') - $spacing-09);
+      width: (map.get($grid-breakpoints, 'xl') - $spacing-09);
     }
 
     .fat-footer-sections {
@@ -305,7 +307,7 @@ footer.site-footer {
   z-index: 100;
   color: var(--content-secondary);
   background: var(--bg-light-secondary);
-  box-shadow: 0px -5px 8px 0px #0000001a;
+  box-shadow: 0 -5px 8px 0 #0000001a;
 
   .cookie-banner-actions {
     padding-top: var(--spacing-04);

services/web/frontend/stylesheets/bootstrap-5/components/form.scss

@@ -2,9 +2,11 @@
   @function form-check-box-svg($color) {
     @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
   }
+
   @function form-check-radio-svg($color) {
     @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='2' fill='#{$color}'/></svg>");
   }
+
   @function form-check-indeterminate-svg($color) {
     @return url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='#{$color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
   }
@@ -115,9 +117,12 @@
 
   .form-control-start-icon {
     left: 0;
+    padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
   }
+
   .form-control-end-icon {
     right: 0;
+    padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
   }
 
   --icon-width: 20px;
@@ -134,14 +139,6 @@
     --form-control-icon-offset-y: var(--spacing-05);
   }
 
-  .form-control-start-icon {
-    padding-left: calc(var(--form-control-padding-x) + var(--bs-border-width));
-  }
-
-  .form-control-end-icon {
-    padding-right: calc(var(--form-control-padding-x) + var(--bs-border-width));
-  }
-
   .form-control-offset-start {
     padding-left: calc(
       var(--form-control-padding-x) + var(--form-control-icon-offset-y) +

services/web/frontend/stylesheets/bootstrap-5/components/modal.scss

@@ -4,28 +4,29 @@
 
 @include media-breakpoint-up(sm) {
   .modal-dialog {
-    @include modal-md();
+    @include modal-md;
   }
 
   .modal-sm {
-    @include modal-sm();
+    @include modal-sm;
   }
 }
 
 @include media-breakpoint-up(md) {
   .modal-md {
-    @include modal-md();
+    @include modal-md;
   }
 }
 
 @include media-breakpoint-up(lg) {
   .modal-lg {
-    @include modal-lg();
+    @include modal-lg;
   }
 }
 
 .modal-content {
-  @include shadow-lg();
+  @include shadow-lg;
+
   border-radius: var(--border-radius-base);
 
   .modal-header {
@@ -34,6 +35,7 @@
 
       line-height: 35px;
     }
+
     .btn-close {
       margin-right: 0;
     }
@@ -42,6 +44,7 @@
   .modal-footer {
     padding: var(--spacing-06);
     gap: var(--spacing-04);
+
     > * {
       margin: 0;
     }

services/web/frontend/stylesheets/bootstrap-5/components/nav.scss

@@ -3,15 +3,12 @@
 :root {
   // Basics
   --navbar-item-spacing-horizontal: var(--spacing-06);
-
   --navbar-bg: var(--bg-dark-primary);
   --navbar-border: transparent;
-
   --navbar-padding-h: var(--spacing-05);
   --navbar-padding: 0 var(--navbar-padding-h);
-
   --navbar-brand-width: 130px;
-  --navbar-brand-image-url: url(../../../../public/img/ol-brand/overleaf-white.svg);
+  --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-white.svg');
 
   // Title, when used instead of a logo
   --navbar-title-font-size: var(--font-size-05);
@@ -39,7 +36,6 @@
   // Links
   --navbar-link-color: var(--white);
   --navbar-link-border-color: var(--navbar-link-color);
-
   --navbar-link-hover-color: var(--white);
   --navbar-link-hover-bg: var(--green-50);
   --navbar-link-hover-border-color: var(--navbar-link-hover-bg);

services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss

@@ -139,8 +139,8 @@
         // Dropdowns get custom display when collapsed
         .dropdown-menu.show {
           --bs-dropdown-spacer: 0;
-          box-shadow: none;
 
+          box-shadow: none;
           background-color: var(--navbar-hamburger-submenu-bg);
           width: auto;
 
@@ -191,19 +191,15 @@
 .website-redesign-navbar {
   --navbar-title-color: var(--content-primary);
   --navbar-title-color-hover: var(--content-secondary);
-
-  --navbar-brand-image-url: url(../../../../public/img/ol-brand/overleaf-black.svg);
-
+  --navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-black.svg');
   --navbar-subdued-color: var(--content-primary);
   --navbar-subdued-hover-bg: var(--bg-dark-primary);
   --navbar-subdued-hover-color: var(--content-primary-dark);
-
   --navbar-bg: var(--bg-light-primary);
 
   // Navbar links
   --navbar-link-color: var(--content-primary);
   --navbar-link-border-color: var(--border-primary);
-
   --navbar-link-hover-color: var(--navbar-link-color);
   --navbar-link-hover-bg: var(--bg-light-tertiary);
   --navbar-link-hover-border-color: var(--navbar-link-border-color);

services/web/frontend/stylesheets/bootstrap-5/helpers/visually-hidden.scss

@@ -1,5 +1,5 @@
 .visually-hidden-max-md {
   @include media-breakpoint-down(md) {
-    @include visually-hidden();
+    @include visually-hidden;
   }
 }

services/web/frontend/stylesheets/bootstrap-5/pages/account-settings.scss

@@ -12,7 +12,7 @@
   padding-left: var(--spacing-04);
 }
 
-.affiliations-table-row--highlighted {
+.affiliations-table-row-highlighted {
   background-color: var(--bg-light-secondary);
 }
 
@@ -38,17 +38,21 @@
   font-size: 1.3em;
   line-height: 1.3em;
   vertical-align: top;
+
   &.status-error,
   &.dropbox-sync-icon-error {
     color: var(--bg-danger-01);
   }
+
   &.status-success,
   &.dropbox-sync-icon-success {
     color: var(--content-positive);
   }
+
   &.status-pending,
   &.dropbox-sync-icon-updating {
     color: var(--bg-info-01);
+
     &::after {
       content: '\f021';
       position: absolute;
@@ -175,6 +179,7 @@
 
   .status-label {
     @include body-sm;
+
     border-radius: var(--border-radius-base);
     padding: var(--spacing-01) var(--spacing-02);
     margin-top: var(--spacing-02);

services/web/frontend/stylesheets/bootstrap-5/pages/project-list.scss

@@ -589,6 +589,7 @@
   }
 }
 
+/* stylelint-disable selector-class-pattern */
 .project-list-upload-project-modal-uppy-dashboard .uppy-Root {
   .uppy-Dashboard-AddFiles-title {
     display: flex;

services/web/frontend/stylesheets/bootstrap-5/pages/sidebar-v2-dash-pane.scss

@@ -1,5 +1,6 @@
 .project-list-sidebar-survey-link {
   @extend .text-white;
+
   font-weight: bold;
 }
 
@@ -7,6 +8,7 @@
   &:hover {
     background-color: transparent !important;
   }
+
   &:focus {
     background-color: transparent !important;
   }

services/web/frontend/stylesheets/components/footer.less

@@ -19,7 +19,7 @@ footer.site-footer {
       font-size: 1.2rem;
     }
   }
-  li.lngOption {
+  li.lng-option {
     text-align: left;
     display: list-item;
 

services/web/package.json

@@ -26,8 +26,8 @@
     "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 .",
-    "stylelint": "stylelint '**/*.scss'",
-    "stylelint:fix": "stylelint '**/*.scss' --fix",
+    "lint:styles": "stylelint '**/*.scss'",
+    "lint:styles:fix": "stylelint '**/*.scss' --fix",
     "type-check": "tsc --noEmit",
     "extract-translations": "i18next-scanner",
     "migrations": "MONGO_SOCKET_TIMEOUT=0 east",