Fix ember lints after Ember 4 upgrade

.stylelintrc.js

@@ -2,4 +2,8 @@
 
 module.exports = {
   extends: ['stylelint-config-standard', 'stylelint-prettier/recommended'],
+  rules: {
+    // We use BEM naming conventions which aren't compatible with the kebap-case convention that stylelint-config-standard expects
+    'selector-class-pattern': null,
+  },
 };

app/components/cta-emberconf.hbs

@@ -10,9 +10,7 @@
           target="_blank"
         >
           <img
-            alt=""
-            role="presentation"
-            src="/images/brand/virtual-emberconf-2022-logo.svg"
+            alt="" src="/images/brand/virtual-emberconf-2022-logo.svg"
           >
         </a>
       </div>

app/components/ember-community-survey/introduction.hbs

@@ -1,7 +1,7 @@
 {{! template-lint-disable no-empty-headings }}
 <div class="bg-dark bg-shape-boxes">
   <div class="container">
-    <h1>
+    <h1 {{! template-lint-disable no-empty-headings }}>
       <img
         alt={{@surveyLogoAlt}}
         class="survey-logo"

app/styles/app.css

@@ -1,21 +1,20 @@
-/* stylelint-disable import-notation */
-@import "components/addon-tabs.css";
-@import "components/brand-logos.css";
-@import "components/community-trends.css";
-@import "components/ecosystem-icons.css";
-@import "components/cta-emberconf.css";
-@import "components/faqs.css";
-@import "components/homepage-image-grid.css";
-@import "components/homepage-hero-callout.css";
-@import "components/lts-table.css";
-@import "components/release-timeline.css";
-@import "components/survey-section.css";
-@import "components/surveys.css";
-@import "components/team-list.css";
-@import "components/terminal-code.css";
-@import "components/callout-banner.css";
-@import "components/mascots.css";
-@import "legacy/form.css";
+@import url("components/addon-tabs.css");
+@import url("components/brand-logos.css");
+@import url("components/community-trends.css");
+@import url("components/ecosystem-icons.css");
+@import url("components/cta-emberconf.css");
+@import url("components/faqs.css");
+@import url("components/homepage-image-grid.css");
+@import url("components/homepage-hero-callout.css");
+@import url("components/lts-table.css");
+@import url("components/release-timeline.css");
+@import url("components/survey-section.css");
+@import url("components/surveys.css");
+@import url("components/team-list.css");
+@import url("components/terminal-code.css");
+@import url("components/callout-banner.css");
+@import url("components/mascots.css");
+@import url("legacy/form.css");
 
 @media only percy {
   .hide-in-percy {

app/styles/components/addon-tabs.css

@@ -1,8 +1,12 @@
 /* stylelint-disable alpha-value-notation, color-function-notation, prettier/prettier, selector-class-pattern */
 .addon-tabs {
-  background: linear-gradient(0deg, rgba(52, 55, 62, 1) 0%, rgba(66, 69, 77, 1) 100%);
+  background: linear-gradient(
+    0deg,
+    rgb(52 55 62 / 100%) 0%,
+    rgb(66 69 77 / 100%) 100%
+  );
   border-radius: 15px;
-  box-shadow: 0 5px 15px -10px rgba(0, 0, 0, 0.75);
+  box-shadow: 0 5px 15px -10px rgb(0 0 0 / 75%);
   min-height: 364px;
   width: 100%;
 }

app/styles/components/brand-logos.css

@@ -14,7 +14,7 @@
 
 .brand-logos > li {
   border: 1px solid rgba($black, 0.3);
-  background-image: url('/images/brand/brand-bg.png');
+  background-image: url("/images/brand/brand-bg.png");
   border-radius: 4px;
   padding: 1rem 1.5rem;
 }
@@ -28,5 +28,5 @@
 }
 
 .brand-logos > li:nth-child(3) {
-  background-color: rgba(199, 52, 31, 0.9);
+  background-color: rgb(199 52 31 / 90%);
 }

app/styles/components/callout-banner.css

@@ -23,7 +23,7 @@
 }
 
 .callout-banner a + a::before {
-  content: '';
+  content: "";
   width: 3px;
   height: 3px;
   background: white;

app/styles/components/community-trends.css

@@ -7,20 +7,19 @@
   max-width: 600px;
 }
 
-@media (max-width: 1500px) {
+@media (width <= 1500px) {
   .uwu-logo {
     transform: none;
     right: 0;
     max-width: 400px;
   }
 }
 
-@media (max-width: 1000px) {
+@media (width <= 1000px) {
   .uwu-logo {
     transform: none;
     right: unset;
     left: 0;
     max-width: 200px;
   }
 }
-

app/styles/components/cta-emberconf.css

@@ -28,7 +28,7 @@
   margin-top: 1rem;
 }
 
-@media screen and (min-width: 450px) {
+@media screen and (width >= 450px) {
   .emberconf-announcement {
     padding-top: 3rem;
     margin-top: -5rem;

app/styles/components/ecosystem-icons.css

@@ -18,7 +18,7 @@
   margin: auto;
 }
 
-@media (max-width: 1007px) {
+@media (width <= 1007px) {
   .ecosystem-icons {
     grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
     width: inherit;

app/styles/components/homepage-hero-callout.css

@@ -22,7 +22,7 @@
 }
 
 .hero-callout-text > a:link {
-  color: #74B0CE;
+  color: #74b0ce;
   background: none;
   text-decoration: underline;
 }

app/styles/components/homepage-image-grid.css

@@ -28,13 +28,11 @@
 }
 
 .homepage-image-grid__img-tall-bottom {
-  grid-row-start: 2;
-  grid-row-end: 5;
+  grid-row: 2 / 5;
 }
 
 .homepage-image-grid__img-tall-top {
-  grid-row-start: 1;
-  grid-row-end: 4;
+  grid-row: 1 / 4;
 }
 
 .homepage-image-grid__img-short {
@@ -46,13 +44,13 @@
   width: max-content;
 }
 
-[class*=well-] img {
-  width: auto;
-}
-
 /* IN ht estyleguides */
 
 img {
   max-width: 100%;
   height: auto;
 }
+
+[class*="well-"] img {
+  width: auto;
+}

app/styles/components/survey-section.css

@@ -9,10 +9,7 @@
   align-items: flex-start;
   display: grid;
   grid-column-gap: 0.5rem;
-  grid-template-areas:
-    "hyperlink title";
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 1fr;
+  grid-template: "hyperlink title" 1fr / auto 1fr;
 }
 
 .survey-section__title-container__title {

app/styles/components/surveys.css

@@ -3,7 +3,7 @@
   height: 160px;
 }
 
- /* TODO this could be better, probably */
+/* TODO this could be better, probably */
 .survey-sponsor-link {
   background: transparent !important;
 }

app/styles/components/terminal-code.css

@@ -14,15 +14,15 @@
 }
 
 .terminal-code .dot.red {
-  background-color: rgb(238, 90, 90);
+  background-color: rgb(238 90 90);
 }
 
 .terminal-code .dot.yellow {
-  background-color: rgb(250, 208, 109);
+  background-color: rgb(250 208 109);
 }
 
 .terminal-code .dot.green {
-  background-color: rgb(116, 173, 111);
+  background-color: rgb(116 173 111);
 }
 
 .terminal-code code {

app/styles/legacy/form.css

@@ -1,10 +1,8 @@
-/* stylelint-disable alpha-value-notation, color-function-notation, media-feature-range-notation, prettier/prettier, selector-attribute-quotes */
-
 .tomster-form {
   margin-top: 1.5em;
 }
 
-@media screen and (min-width: 0) and (max-width: 991px) {
+@media screen and (width >= 0) and (width <= 991px) {
   .tomster-form {
     padding: 0.5em;
   }
@@ -41,14 +39,14 @@
   color: #c7341f;
 }
 
-.tomster-form input[type=radio] {
+.tomster-form input[type="radio"] {
   display: inline-block;
   margin-right: 20px;
 }
 
-.tomster-form input[type=text],
-.tomster-form input[type=email],
-.tomster-form input[type=file],
+.tomster-form input[type="text"],
+.tomster-form input[type="email"],
+.tomster-form input[type="file"],
 .tomster-form textarea {
   border: none;
   margin: 0;
@@ -59,10 +57,10 @@
   outline: 0;
   width: 100%;
   border-radius: 6px;
-  box-shadow: 0 1px #fdfdfd, inset -1px 1px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px #fdfdfd, inset -1px 1px 4px rgb(0 0 0 / 10%);
 }
 
-.tomster-form input[type=file] {
+.tomster-form input[type="file"] {
   padding: 15px 10px;
   background-color: transparent;
   cursor: pointer;
@@ -73,21 +71,21 @@
   height: 100px;
 }
 
-.tomster-form input[type=text]:focus,
-.tomster-form input[type=email]:focus,
-.tomster-form input[type=file]:focus,
+.tomster-form input[type="text"]:focus,
+.tomster-form input[type="email"]:focus,
+.tomster-form input[type="file"]:focus,
 .tomster-form textarea:focus {
   border-color: #888;
 }
 
-.tomster-form input[type=text].error,
-.tomster-form input[type=email].error,
-.tomster-form input[type=file].error,
+.tomster-form input[type="text"].error,
+.tomster-form input[type="email"].error,
+.tomster-form input[type="file"].error,
 .tomster-form textarea.error {
   border-color: #c7341f;
 }
 
-.tomster-form input[type=file]:focus {
+.tomster-form input[type="file"]:focus {
   border-color: #ddd;
 }
 
@@ -102,7 +100,7 @@
   margin-top: 0.5em;
 }
 
-@media screen and (min-width: 0) and (max-width: 991px) {
+@media screen and (width >= 0) and (width <= 991px) {
   .tomster-form fieldset .choice {
     text-align: left;
   }
@@ -121,7 +119,7 @@
   width: calc(100% - 20px);
 }
 
-.tomster-form input[type=submit] {
+.tomster-form input[type="submit"] {
   margin-top: 2em;
 }
 
@@ -131,7 +129,7 @@
   line-height: 40px;
 }
 
-.tomster-form .inline-field input[type=text] {
+.tomster-form .inline-field input[type="text"] {
   width: auto;
 }
 

app/templates/about/legal.hbs

@@ -33,7 +33,7 @@
       </p>
     </div>
     <div class="lg:col-1 sm:col-1">
-      <img role="presentation" alt="" class="right" src="/images/legal/license-cc_by_nc_sa.png" loading="lazy">
+      <img alt="" class="right" src="/images/legal/license-cc_by_nc_sa.png" loading="lazy">
     </div>
   </div>
   <p>

app/templates/community/index.hbs

@@ -3,7 +3,7 @@
   <h1 id="section-community">Get Involved: Join the Growing Ember.js Community</h1>
 
   <div class="lg:col-2">
-    <img alt="" role="presentation" class="img-content" src="/images/community/sos.png">
+    <img alt="" class="img-content" src="/images/community/sos.png">
   </div>
 
   <div class="lg:col-4">
@@ -51,7 +51,7 @@
   <section aria-labelledby="section-reporting-bugs">
     <div class="layout">
       <div class="lg:col-2 lg:start-5">
-        <img alt="" class="img-content" src="/images/community/bug.png" role="presentation" loading="lazy">
+        <img alt="" class="img-content" src="/images/community/bug.png" loading="lazy">
       </div>
       <div class="lg:col-4">
         <h2 id="section-reporting-bugs">Something Fishy? Report it to the Team</h2>
@@ -79,7 +79,7 @@
   <div class="container layout">
     <section class="layout" aria-labelledby="section-contribute-to-ember">
       <div class="lg:col-2">
-        <img alt="" class="img-content" src="/images/community/give.png" role="presentation" loading="lazy">
+        <img alt="" class="img-content" src="/images/community/give.png" loading="lazy">
       </div>
       <div class="lg:col-4">
         <h2 id="section-contribute-to-ember" class="text-center">In a Giving Mood? Contribute to the Project</h2>
@@ -91,7 +91,7 @@
 
     <section class="lg:col-3 text-center" aria-labelledby="section-meetups">
       <h2 id="section-meetups">Feeling Lonely? Join a Meetup</h2>
-      <img alt="" src="/images/community/meetup.png" role="presentation" loading="lazy">
+      <img alt="" src="/images/community/meetup.png" loading="lazy">
       <p>
         Joining an Ember.js meetup is a great way to learn more about Ember, meet other developers, find jobs, etc. Any and all things Ember and local.
       </p>
@@ -102,7 +102,7 @@
 
     <section class="lg:col-3 text-center" aria-labelledby="section-mascots">
       <h2 id="section-mascots">Met The Mascots? You'll Love Them!</h2>
-      <img alt="" src="/images/community/campster.png" role="presentation" loading="lazy">
+      <img alt="" src="/images/community/campster.png" loading="lazy">
       <p>
         Tomster and Zoey have been crafted with love, and are constantly getting makeovers. Events, User Groups, Countries&mdash;sky's the limit!
       </p>