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/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;
         }

res/css/views/elements/_StyledCheckbox.pcss

@@ -22,7 +22,7 @@ limitations under the License.
     display: flex;
     align-items: flex-start;
 
-    input[type=checkbox] {
+    input[type="checkbox"] {
         appearance: none;
         margin: 0;
         padding: 0;
@@ -81,7 +81,7 @@ limitations under the License.
     }
 }
 
-.mx_Checkbox.mx_Checkbox_kind_solid input[type=checkbox] {
+.mx_Checkbox.mx_Checkbox_kind_solid input[type="checkbox"] {
     & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
         background: #ffffff;
     }
@@ -92,7 +92,7 @@ limitations under the License.
     }
 }
 
-.mx_Checkbox.mx_Checkbox_kind_outline input[type=checkbox] {
+.mx_Checkbox.mx_Checkbox_kind_outline input[type="checkbox"] {
     & + label > .mx_Checkbox_background .mx_Checkbox_checkmark {
         background: $accent;
     }

res/css/views/elements/_StyledRadioButton.pcss

@@ -46,7 +46,7 @@ limitations under the License.
         width: $font-16px;
     }
 
-    input[type=radio] {
+    input[type="radio"] {
         // Remove the OS's representation
         margin: 0;
         padding: 0;