Rename PostCSS files to .pcss (#9013)

* Rename PostCSS files to `.pcss`

* Make Stylelint happy

* Delint

* Rename new files too

* delint

* Fix bad comment placement

res/css/views/auth/_AuthBody.pcss

@@ -52,8 +52,8 @@ limitations under the License.
         @mixin mx_Dialog_link;
     }
 
-    input[type=text],
-    input[type=password] {
+    input[type="text"],
+    input[type="password"] {
         color: $authpage-primary-color;
     }
 

res/css/views/dialogs/_CreateRoomDialog.pcss

@@ -35,7 +35,7 @@ limitations under the License.
         align-items: flex-start;
         margin: 5px 0;
 
-        input[type=checkbox] {
+        input[type="checkbox"] {
             margin-right: 10px;
         }
     }

res/css/views/dialogs/_ExportDialog.pcss

@@ -38,7 +38,7 @@ limitations under the License.
             background: $info-plinth-fg-color;
         }
 
-        .mx_StyledRadioButton input[type=radio]:checked + div {
+        .mx_StyledRadioButton input[type="radio"]:checked + div {
             border-color: unset;
         }
 

res/css/views/dialogs/_ForwardDialog.pcss

@@ -36,7 +36,7 @@ limitations under the License.
         flex-shrink: 0;
         overflow-y: auto;
 
-        .mx_EventTile[data-layout=bubble] {
+        .mx_EventTile[data-layout="bubble"] {
             margin-top: 20px;
         }
 

res/css/views/dialogs/_InviteDialog.pcss

@@ -327,7 +327,8 @@ limitations under the License.
     align-items: center;
 
     &.mx_InviteDialog_tile--room {
-        grid-template-columns: min-content auto auto; // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
+        // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
+        grid-template-columns: min-content auto auto;
         padding: $spacing-4 $spacing-8;
 
         &:hover {

res/css/views/dialogs/_MessageEditHistoryDialog.pcss

@@ -51,9 +51,9 @@ limitations under the License.
         text-decoration: underline;
     }
 
-    // Emulate mx_EventTile[data-layout=group]
+    // Emulate mx_EventTile[data-layout="group"]
     .mx_EventTile {
-        padding-top: 0 !important; // Override mx_EventTile:not([data-layout=bubble])
+        padding-top: 0 !important; // Override mx_EventTile:not([data-layout="bubble"])
 
         .mx_MessageTimestamp {
             position: absolute;

res/css/views/dialogs/_SpotlightDialog.pcss

@@ -216,7 +216,7 @@ limitations under the License.
                     margin-left: $spacing-16;
                 }
 
-                &:hover, &[aria-selected=true] {
+                &:hover, &[aria-selected="true"] {
                     background-color: $quinary-content;
                 }
             }
@@ -339,7 +339,7 @@ limitations under the License.
                         background: $tertiary-content;
                     }
 
-                    &:hover::before, &[aria-selected=true]::before {
+                    &:hover::before, &[aria-selected="true"]::before {
                         background-color: $secondary-content;
                     }
                 }
@@ -348,7 +348,7 @@ limitations under the License.
                     mask-image: url('$(res)/img/element-icons/context-menu.svg');
                 }
 
-                &:hover, &[aria-selected=true] {
+                &:hover, &[aria-selected="true"] {
                     background-color: $system;
 
                     .mx_SpotlightDialog_option--menu,
@@ -357,7 +357,7 @@ limitations under the License.
                     }
                 }
 
-                &[aria-selected=true] .mx_SpotlightDialog_enterPrompt {
+                &[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
                     display: inline-block;
                 }
             }

res/css/views/elements/_Field.pcss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* TODO: Consider unifying with general input styles in _light.scss */
+/* TODO: Consider unifying with general input styles in _light.pcss */
 
 .mx_Field {
     display: flex;

res/css/views/elements/_GenericEventListSummary.pcss

@@ -21,19 +21,19 @@ limitations under the License.
         margin-right: $spacing-8;
     }
 
-    &[data-layout=irc],
-    &[data-layout=group] {
+    &[data-layout="irc"],
+    &[data-layout="group"] {
         .mx_GenericEventListSummary_toggle {
             float: right;
             margin-inline: 0 10px;
         }
     }
 
-    &[data-layout=group] {
+    &[data-layout="group"] {
         margin-top: $spacing-8;
     }
 
-    &[data-layout=bubble] {
+    &[data-layout="bubble"] {
         --maxWidth: 70%;
         display: flex;
         margin-left: calc(var(--avatarSize) + var(--gutterSize));
@@ -41,11 +41,11 @@ limitations under the License.
         .mx_GenericEventListSummary_toggle {
             margin-block: 0;
 
-            &[aria-expanded=false] {
+            &[aria-expanded="false"] {
                 order: 9; // TODO: Remove
             }
 
-            &[aria-expanded=true] {
+            &[aria-expanded="true"] {
                 margin-inline-start: auto; // reduce clickable area
                 margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
             }
@@ -55,7 +55,7 @@ limitations under the License.
             display: none;
         }
 
-        &[data-expanded=false] {
+        &[data-expanded="false"] {
             align-items: center;
             justify-content: space-between;
             column-gap: 5px;
@@ -63,7 +63,7 @@ limitations under the License.
 
         // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
         // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
-        &[data-expanded=true] {
+        &[data-expanded="true"] {
             flex-direction: column;
             margin: 0;
         }