DEV: Enable and fix more stylelint rules (#31200)

* `color-no-invalid-hex`
* `unit-no-unknown`
* `declaration-block-no-duplicate-custom-properties`
* `block-no-empty`
* `selector-type-no-unknown`
* `selector-pseudo-element-no-unknown`
* `scss/double-slash-comment-whitespace-inside`
* `font-family-no-missing-generic-family-keyword`
* `function-linear-gradient-no-nonstandard-direction`

app/assets/stylesheets/common/admin/admin_base.scss

@@ -3,8 +3,8 @@
 $mobile-breakpoint: 700px;
 
 :root {
-  --space-0: 0.125rem; //2px
-  --space-1: 0.25rem; //4px
+  --space-0: 0.125rem; // 2px
+  --space-1: 0.25rem; // 4px
   --space-2: calc(0.25rem * 2);
   --space-3: calc(0.25rem * 3);
   --space-4: calc(0.25rem * 4);

app/assets/stylesheets/common/admin/emails.scss

@@ -145,7 +145,7 @@
   }
 }
 
-//specific email admin modal styling
+// specific email admin modal styling
 .admin-incoming-email-modal {
   .incoming-emails {
     label {

app/assets/stylesheets/common/admin/users.scss

@@ -1,4 +1,4 @@
-//Styles for /admin/users
+// Styles for /admin/users
 .display-row.associations .value {
   width: 750px;
   @media (max-width: $mobile-breakpoint) {

app/assets/stylesheets/common/base/modal.scss

@@ -29,7 +29,7 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 0.5rem 0.5rem 0.5rem 1.5rem; //offset for close button padding
+    padding: 0.5rem 0.5rem 0.5rem 1.5rem; // offset for close button padding
     border-bottom: 1px solid var(--primary-low);
 
     .modal-close {
@@ -143,7 +143,7 @@
   }
 }
 
-//legacy
+// legacy
 .input-hint-text {
   margin-left: 0.5em;
   color: var(--secondary-high);

app/assets/stylesheets/common/base/onebox.scss

@@ -432,7 +432,7 @@ pre.onebox code ol.lines li {
   padding-left: 0.5em;
   margin-left: 0;
   border-left: 1px solid var(--primary-300);
-  min-height: 1.5em; //show empty li lines
+  min-height: 1.5em; // show empty li lines
   white-space: pre;
   width: max-content;
 }
@@ -635,7 +635,7 @@ pre.onebox code ol.lines li.selected {
   }
 }
 
-//Onebox - Github - Pull request
+// Onebox - Github - Pull request
 .onebox-body .github-commit-status {
   background: #f5f5f5;
   border-radius: 5px;
@@ -670,7 +670,7 @@ pre.onebox code ol.lines li.selected {
   background-color: #bd2c00;
 }
 
-//Onebox - Twitter - Status
+// Onebox - Twitter - Status
 aside.onebox.twitterstatus .onebox-body {
   h4 {
     margin-bottom: 0;

app/assets/stylesheets/common/components/d-select.scss

@@ -20,7 +20,7 @@
   &:focus-visible,
   &:focus:focus-visible,
   &:active {
-    //these importants are another great case for having a button element without that pesky default styling
+    // these `!important` flags are another great case for having a button element without that pesky default styling
     &:not(:disabled) {
       background-color: var(--secondary) !important;
       color: var(--primary) !important;

app/assets/stylesheets/common/components/date-input.scss

@@ -15,7 +15,6 @@ $calendar-icon: '<svg xmlns="http://www.w3.org/2000/svg" width="14px" height="16
     box-shadow: none;
     position: relative;
 
-    &::input-placeholder,
     &::placeholder {
       font-size: var(--font-0);
       color: var(--primary-medium);

app/assets/stylesheets/common/components/topic-map.scss

@@ -279,7 +279,7 @@ body:not(.archetype-private_message) {
 // DMenu popups
 .fk-d-menu,
 .fk-d-menu-modal {
-  //shared
+  // shared
   &__inner-content {
     .topic-map__likes-content &,
     .topic-map__links-content &,
@@ -316,7 +316,7 @@ body:not(.archetype-private_message) {
     }
   }
 
-  //per type
+  // per type
   &.topic-map__likes-content {
     li > a {
       display: grid;

app/assets/stylesheets/common/float-kit/d-menu.scss

@@ -90,7 +90,7 @@
   }
 }
 
-//should probably be renamed fk-d-menu__list
+// should probably be renamed fk-d-menu__list
 .dropdown-menu {
   min-width: 200px;
   padding: 0;

app/assets/stylesheets/common/form-kit/_alert.scss

@@ -1,5 +1,5 @@
 .form-kit__alert {
-  //reset
+  // reset
   margin: 0;
   width: 100%;
   border-radius: var(--d-border-radius);

app/assets/stylesheets/common/form-kit/_control-radio.scss

@@ -10,7 +10,7 @@
   }
 
   input[type="radio"] {
-    margin-right: 0; //old input overrule
+    margin-right: 0; // old input overrule
   }
 }
 
@@ -30,6 +30,6 @@
   align-items: center;
 
   input[type="radio"] {
-    margin-right: 0; //old input overrule
+    margin-right: 0; // old input overrule
   }
 }

app/assets/stylesheets/common/form-kit/_default-input-mixin.scss

@@ -18,7 +18,7 @@
   &:focus-visible,
   &:focus:focus-visible,
   &:active {
-    //these importants are another great case for having a button element without that pesky default styling
+    // these `!important` flags are another great case for having a button element without that pesky default styling
     &:not(:disabled) {
       background-color: var(--secondary) !important;
       color: var(--primary) !important;

app/assets/stylesheets/common/foundation/color_transformations.scss

@@ -2,7 +2,7 @@
 // any variables defined here can be added in theme color schemes
 // all variables should have the !default flag
 
-//primary
+// primary
 $primary-very-low: dark-light-diff($primary, $secondary, 97%, -82%) !default;
 $primary-low: dark-light-diff($primary, $secondary, 90%, -78%) !default;
 $primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%) !default;
@@ -10,7 +10,7 @@ $primary-medium: dark-light-diff($primary, $secondary, 50%, -35%) !default;
 $primary-high: dark-light-diff($primary, $secondary, 30%, -25%) !default;
 $primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%) !default;
 
-//primary-numbers
+// primary-numbers
 $primary-50: dark-light-diff($primary, $secondary, 97%, -82%) !default;
 $primary-100: dark-light-diff($primary, $secondary, 94%, -80%) !default;
 $primary-200: dark-light-diff($primary, $secondary, 90%, -78%) !default;
@@ -27,13 +27,13 @@ $header_primary-medium: blend-header-primary-background(55%) !default;
 $header_primary-high: blend-header-primary-background(70%) !default;
 $header_primary-very-high: blend-header-primary-background(90%) !default;
 
-//secondary
+// secondary
 $secondary-low: dark-light-diff($secondary, $primary, 70%, -70%) !default;
 $secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%) !default;
 $secondary-high: dark-light-diff($secondary, $primary, 30%, -35%) !default;
 $secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%) !default;
 
-//tertiary
+// tertiary
 $tertiary-very-low: dark-light-diff($tertiary, $secondary, 90%, -75%) !default;
 $tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%) !default;
 $tertiary-medium: dark-light-diff($tertiary, $secondary, 50%, -45%) !default;
@@ -43,7 +43,7 @@ $tertiary-hover: dark-light-choose(
   dark-light-diff($tertiary, $primary, 20%, 70%)
 ) !default;
 
-//tertiary-numbers
+// tertiary-numbers
 $tertiary-50: dark-light-diff($tertiary, $secondary, 90%, -75%) !default;
 $tertiary-100: dark-light-diff($tertiary, $secondary, 88%, -72%) !default;
 $tertiary-200: dark-light-diff($tertiary, $secondary, 87%, -69%) !default;
@@ -55,31 +55,31 @@ $tertiary-700: dark-light-diff($tertiary, $secondary, 40%, -38%) !default;
 $tertiary-800: dark-light-diff($tertiary, $secondary, 30%, -31%) !default;
 $tertiary-900: dark-light-diff($tertiary, $secondary, 20%, -25%) !default;
 
-//quaternary
+// quaternary
 $quaternary-low: dark-light-diff($quaternary, $secondary, 70%, -70%) !default;
 
-//highlight
+// highlight
 $highlight-bg: dark-light-diff($highlight, $secondary, 70%, -80%) !default;
 $highlight-low: dark-light-diff(
   $highlight,
   $secondary,
   70%,
   -80%
-) !default; //TO BE REMOVED IF POSS
+) !default; // TO BE REMOVED IF POSS
 $highlight-medium: dark-light-diff(
   $highlight,
   $secondary,
   50%,
   -55%
-) !default; //TO BE REMOVED IF POSS
+) !default; // TO BE REMOVED IF POSS
 $highlight-high: dark-light-diff(
   $highlight,
   $secondary,
   -50%,
   -10%
-) !default; //TO BE REMOVED IF POSS
+) !default; // TO BE REMOVED IF POSS
 
-//danger
+// danger
 $danger-low: dark-light-diff($danger, $secondary, 85%, -64%) !default;
 $danger-low-mid: dark-light-diff(
   rgba($danger, 0.7),
@@ -90,18 +90,18 @@ $danger-low-mid: dark-light-diff(
 $danger-medium: dark-light-diff($danger, $secondary, 30%, -35%) !default;
 $danger-hover: dark-light-diff($danger, $secondary, -20%, -20%) !default;
 
-//success
+// success
 $success-low: dark-light-diff($success, $secondary, 80%, -60%) !default;
 $success-medium: dark-light-diff($success, $secondary, 50%, -40%) !default;
 $success-hover: dark-light-diff($success, $secondary, -20%, -20%) !default;
 
-//love
+// love
 $love-low: dark-light-diff($love, $secondary, 85%, -60%) !default;
 
-//wiki
+// wiki
 $wiki: green !default;
 
-//blended variants
+// blended variants
 $blend-primary-secondary-5: blend-two-colors($primary, $secondary, 5%) !default;
 $primary-med-or-secondary-med: dark-light-choose(
   $primary-medium,

app/assets/stylesheets/common/foundation/mixins.scss

@@ -59,7 +59,6 @@ $breakpoints: (
   }
 }
 
-//noinspection CssOptimizeSimilarProperties
 @mixin linear-gradient($start-color, $end-color) {
   background-color: $start-color;
   background-image: linear-gradient(to bottom, $start-color, $end-color);

app/assets/stylesheets/common/modal/modal-overrides.scss

@@ -117,7 +117,7 @@
 .d-modal.choose-topic-modal {
   .d-modal {
     &__container {
-      width: 40em; //fixed width to avoid jumps when switching to different views
+      width: 40em; // fixed width to avoid jumps when switching to different views
     }
   }
 

app/assets/stylesheets/desktop/menu-panel.scss

@@ -13,7 +13,6 @@
 // Sidebar-hamburger hybrid
 .hamburger-panel .revamped {
   --d-sidebar-highlight-background: var(--d-hover);
-  --d-sidebar-row-horizontal-padding: 0.5rem;
   --d-sidebar-row-height: 30px;
 
   // 1.25rem gets text left-aligned with the hamburger icon

app/assets/stylesheets/desktop/topic-post.scss

@@ -704,7 +704,7 @@ span.highlighted {
 
   .topic-body {
     box-sizing: border-box;
-    width: calc(100% - 47px); //100% - [width of .topic-avatar + 2px]
+    width: calc(100% - 47px); // 100% - [width of .topic-avatar + 2px]
   }
 
   .embedded-posts {

app/assets/stylesheets/ember_cli.scss

@@ -1,6 +1,6 @@
 body.requires-ember-cli {
   margin: 2rem;
-  font-family: Arial, Helvetica;
+  font-family: Arial, Helvetica, sans-serif;
   background-color: white;
 }
 

app/assets/stylesheets/mobile/modal-overrides.scss

@@ -10,7 +10,7 @@
   }
 
   .picker-panel {
-    //mysteriously needed to prevent it from overlapping the timezone-input
+    // mysteriously needed to prevent it from overlapping the timezone-input
     position: relative;
     z-index: 0;
   }

app/assets/stylesheets/mobile/modal.scss

@@ -66,7 +66,7 @@ html:not(.keyboard-visible.mobile-view) {
   }
 }
 
-//legacy
+// legacy
 .modal {
   &.fade {
     transition: opacity 0.3s linear, top 0.3s ease-out;

plugins/chat/assets/stylesheets/common/chat-browse.scss

@@ -65,7 +65,7 @@
     margin: 0;
 
     &::before {
-      content: none; //there is a strange thing applied on nav-pills and this resets it
+      content: none; // there is a strange thing applied on nav-pills and this resets it
     }
   }
 

plugins/chat/assets/stylesheets/common/chat-footer.scss

@@ -53,7 +53,7 @@
       color: inherit;
 
       &.d-icon-discourse-threads {
-        font-size: var(--font-up-1); //visual correction
+        font-size: var(--font-up-1); // visual correction
       }
     }
 

plugins/chat/assets/stylesheets/common/chat-selection-manager.scss

@@ -33,9 +33,6 @@
   }
 
   @keyframes chat-quote-message-background-fade-highlight {
-    0% {
-    }
-
     100% {
       background-color: transparent;
       color: transparent;

plugins/chat/assets/stylesheets/common/chat-user-threads.scss

@@ -57,7 +57,7 @@
   color: var(--primary);
 }
 
-//sidebar
+// sidebar
 #sidebar-section-content-user-threads {
   padding-bottom: 0.35em;
 

plugins/chat/assets/stylesheets/mobile/chat-channel-row.scss

@@ -28,7 +28,7 @@
     box-sizing: border-box;
     transition: border-radius 0.25s ease-in-out;
 
-    //for sliding delete animation
+    // for sliding delete animation
     background: var(--primary-very-low);
     height: 100%;
 

plugins/chat/assets/stylesheets/mobile/chat-index.scss

@@ -19,7 +19,7 @@
   max-width: 100vw;
 }
 
-//thread index
+// thread index
 .chat-side-panel {
   min-width: 0;
 }

plugins/chat/assets/stylesheets/mobile/chat-message-actions.scss

@@ -130,7 +130,7 @@
     }
   }
 
-  //temporary until this uses a proper component instead of the modal
+  // temporary until this uses a proper component instead of the modal
   .d-modal {
     &__body {
       padding: 0;

plugins/discourse-details/assets/stylesheets/details.scss

@@ -84,7 +84,7 @@ summary::-webkit-details-marker {
     padding: 0;
 
     &:not([open]) {
-      //specificity needed to overrule non-elided
+      // specificity needed to overrule non-elided
       &:hover,
       &:focus,
       &:focus-within {

stylelint.config.mjs

@@ -1,15 +1,8 @@
 export default {
   extends: ["stylelint-config-standard-scss"],
   rules: {
-    "no-duplicate-at-import-rules": true,
-    "font-family-no-duplicate-names": true,
-    "keyframe-block-no-duplicate-selectors": true,
-    "declaration-block-no-duplicate-custom-properties": null,
-    "declaration-block-no-duplicate-properties": true,
-    "block-no-empty": null,
-    "comment-no-empty": true,
-    "no-invalid-double-slash-comments": true,
-    "no-empty-source": true,
+    "color-no-invalid-hex": true,
+    "unit-no-unknown": true,
     "at-rule-empty-line-before": null,
     "rule-empty-line-before": [
       "always",
@@ -24,21 +17,16 @@ export default {
     "declaration-block-no-redundant-longhand-properties": null,
     "no-descending-specificity": null,
     "keyframes-name-pattern": null,
-    "selector-type-no-unknown": null,
     "scss/dollar-variable-pattern": null,
     "number-max-precision": null,
-    "selector-pseudo-element-no-unknown": null,
     "scss/at-extend-no-missing-placeholder": null,
     "scss/load-no-partial-leading-underscore": null,
     "scss/operator-no-newline-after": null,
-    "scss/double-slash-comment-whitespace-inside": null,
     "scss/no-global-function-names": null,
     "selector-id-pattern": null,
     "no-invalid-position-at-import-rule": null,
-    "font-family-no-missing-generic-family-keyword": null,
     "scss/at-function-pattern": null,
     "scss/comment-no-empty": null,
-    "function-linear-gradient-no-nonstandard-direction": null,
     "scss/at-mixin-pattern": null,
     "media-feature-range-notation": "prefix",
     "property-no-vendor-prefix": [