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/right_panel/_ThreadPanel.pcss

@@ -32,7 +32,7 @@ limitations under the License.
                 user-select: none;
 
                 &:hover,
-                &[aria-expanded=true] {
+                &[aria-expanded="true"] {
                     background: $quinary-content;
                 }
 
@@ -59,15 +59,15 @@ limitations under the License.
         height: 100%;
     }
 
-    .mx_EventTile[data-layout=group] {
+    .mx_EventTile[data-layout="group"] {
         .mx_MessageActionBar {
             right: 0;
             top: -36px; // 2px above EventTile
-            z-index: 10; // See _EventTile.scss
+            z-index: 10; // See _EventTile.pcss
         }
     }
 
-    // For style rules of EventTile in a thread, see _EventTile.scss
+    // For style rules of EventTile in a thread, see _EventTile.pcss
     &.mx_ThreadView {
         max-height: 100%;
 

res/css/views/right_panel/_TimelineCard.pcss

@@ -48,8 +48,8 @@ limitations under the License.
             }
         }
 
-        &[data-layout=irc],
-        &[data-layout=group] {
+        &[data-layout="irc"],
+        &[data-layout="group"] {
             --TimelineCard_ReadReceiptGroup-inset-block-start: -6px;
 
             &.mx_EventTile_info .mx_EventTile_line,
@@ -101,7 +101,8 @@ limitations under the License.
             }
 
             .mx_ReactionsRow {
-                margin-inline-end: $spacing-8; // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.scss
+                // See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss
+                margin-inline-end: $spacing-8;
             }
 
             .mx_ThreadSummary {
@@ -110,14 +111,14 @@ limitations under the License.
             }
         }
 
-        &[data-layout=irc] {
+        &[data-layout="irc"] {
             .mx_EventTile_avatar,
             .mx_MessageTimestamp {
                 position: absolute;
             }
         }
 
-        &[data-layout=group] {
+        &[data-layout="group"] {
             // Read receipt group on compact modern layout
             // This is required because mx_TimelineCard is a child element wrapped by mx_MatrixChat_useCompactLayout,
             // which specifies the default position of mx_ReadReceiptGroup on compact modern layout.
@@ -126,13 +127,14 @@ limitations under the License.
             }
         }
 
-        &[data-layout=bubble] {
+        &[data-layout="bubble"] {
             &::before {
                 z-index: auto; // enable background color on hover
             }
 
             &.mx_EventTile_info .mx_MessageActionBar {
-                inset-inline-end: calc($container-gap-width + var(--BaseCard_padding-inline) + 1px); // 1px: border width
+                // 1px: border width
+                inset-inline-end: calc($container-gap-width + var(--BaseCard_padding-inline) + 1px);
             }
 
             .mx_ReactionsRow {
@@ -150,8 +152,8 @@ limitations under the License.
     }
 
     .mx_GenericEventListSummary {
-        &[data-layout=irc],
-        &[data-layout=group] {
+        &[data-layout="irc"],
+        &[data-layout="group"] {
             .mx_EventTile_line,
             .mx_GenericEventListSummary_unstyledList > .mx_EventTile_info .mx_EventTile_avatar ~ .mx_EventTile_line {
                 padding-inline-start: var(--BaseCard_EventTile-spacing-inline);
@@ -170,10 +172,12 @@ limitations under the License.
 
     .mx_GenericEventListSummary_unstyledList, // RR next to a message on the event list summary
     .mx_RoomView_MessageList {                // RR next to a message on the messsge list
-        .mx_EventTile[data-layout=bubble] {
+        .mx_EventTile[data-layout="bubble"] {
             .mx_ReadReceiptGroup {
                 // 6px: scroll bar width (magic number)
-                inset-inline-end: calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px);
+                /* stylelint-disable-next-line declaration-colon-space-after */
+                inset-inline-end:
+                    calc(-1 * var(--ReadReceiptGroup_EventBubbleTile-spacing-end) + $container-gap-width + 6px);
             }
 
             &.mx_EventTile_info {