styles: Rename .scss files back to .css.

css-loader@4 broke @import statements referencing files with
extensions other than .css, unless those @import statements are
compiled away by another loader.  Upstream is more interested in
arguing that such @import statements are semantically incorrect than
applying the one line fix.

webpack-contrib/css-loader#1164

Signed-off-by: Anders Kaseorg <[email protected]>

.editorconfig

@@ -7,7 +7,7 @@ indent_style = space
 insert_final_newline = true
 trim_trailing_whitespace = true
 
-[*.{sh,py,pyi,xml,css,scss,hbs,html}]
+[*.{sh,py,pyi,xml,css,hbs,html}]
 indent_size = 4
 
 [{*.{js,json,ts},check-openapi}]

docs/subsystems/html-css.md

@@ -6,7 +6,7 @@ The Zulip application's CSS can be found in the `static/styles/`
 directory.  Zulip uses [Bootstrap](https://getbootstrap.com/) as its
 main third-party CSS library.
 
-Zulip uses SCSS for its CSS files.  There are two high-level sections
+Zulip uses PostCSS for its CSS files.  There are two high-level sections
 of CSS: the "portico" (logged-out pages like /help/, /login/, etc.),
 and the app.  The portico CSS lives under the `static/styles/portico`
 subdirectory.
@@ -148,9 +148,9 @@ relevant background as well.
 
 Zulip's frontend is primarily JavaScript in the `static/js` directory;
 we are working on migrating these to TypeScript modules.  Stylesheets
-are written in the Sass extension of CSS (with the scss syntax), they
+are written in CSS extended by various PostCSS plugins; they
 are converted from plain CSS, and we have yet to take full advantage of
-the features Sass offers.  We use Webpack to transpile and build JS
+the features PostCSS offers.  We use Webpack to transpile and build JS
 and CSS bundles that the browser can understand, one for each entry
 points specified in `tools/webpack.assets.json`; source maps are
 generated in the process for better debugging experience.
@@ -169,7 +169,7 @@ by comparing the `render_entrypoint` calls in the HTML templates under
 
 ### Adding static files
 
-To add a static file to the app (JavaScript, TypeScript, CSS/Sass, images, etc),
+To add a static file to the app (JavaScript, TypeScript, CSS, images, etc),
 first add it to the appropriate place under `static/`.
 
 - Third-party packages from the NPM repository should be added to
@@ -188,7 +188,7 @@ first add it to the appropriate place under `static/`.
   to eliminate patched third-party code from the project.
 - Our own JavaScript and TypeScript files live under `static/js`.  Ideally,
   new modules should be written in TypeScript (details on this policy below).
-- CSS/Sass files lives under `static/styles`.
+- CSS files live under `static/styles`.
 - Portico JavaScript ("portico" means for logged-out pages) lives under
   `static/js/portico`.
 - Custom SVG graphics living under `static/assets/icons` are compiled into

package.json

@@ -50,7 +50,6 @@
     "postcss-extend-rule": "^3.0.0",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.1.2",
-    "postcss-scss": "^2.0.0",
     "postcss-simple-vars": "^5.0.2",
     "regenerator-runtime": "^0.13.3",
     "script-loader": "^0.7.2",

postcss.config.js

@@ -1,7 +1,6 @@
 "use strict";
 
-module.exports = ({file}) => ({
-    parser: file.extname === ".scss" ? "postcss-scss" : false,
+module.exports = {
     plugins: {
         // Warning: despite appearances, order is significant
         "postcss-nested": {},
@@ -10,4 +9,4 @@ module.exports = ({file}) => ({
         "postcss-calc": {},
         autoprefixer: {},
     },
-});
+};

static/js/bundles/app.js

@@ -202,31 +202,31 @@ import "spectrum-colorpicker/spectrum.css";
 import "katex/dist/katex.css";
 import "flatpickr/dist/flatpickr.css";
 import "flatpickr/dist/plugins/confirmDate/confirmDate.css";
-import "../../styles/components.scss";
-import "../../styles/app_components.scss";
-import "../../styles/rendered_markdown.scss";
-import "../../styles/zulip.scss";
-import "../../styles/alerts.scss";
-import "../../styles/settings.scss";
-import "../../styles/image_upload_widget.scss";
-import "../../styles/subscriptions.scss";
-import "../../styles/drafts.scss";
-import "../../styles/input_pill.scss";
-import "../../styles/informational-overlays.scss";
-import "../../styles/compose.scss";
-import "../../styles/message_edit_history.scss";
-import "../../styles/reactions.scss";
-import "../../styles/user_circles.scss";
-import "../../styles/left-sidebar.scss";
-import "../../styles/right-sidebar.scss";
-import "../../styles/lightbox.scss";
-import "../../styles/popovers.scss";
-import "../../styles/recent_topics.scss";
-import "../../styles/typing_notifications.scss";
-import "../../styles/hotspots.scss";
-import "../../styles/night_mode.scss";
-import "../../styles/user_status.scss";
-import "../../styles/widgets.scss";
+import "../../styles/components.css";
+import "../../styles/app_components.css";
+import "../../styles/rendered_markdown.css";
+import "../../styles/zulip.css";
+import "../../styles/alerts.css";
+import "../../styles/settings.css";
+import "../../styles/image_upload_widget.css";
+import "../../styles/subscriptions.css";
+import "../../styles/drafts.css";
+import "../../styles/input_pill.css";
+import "../../styles/informational-overlays.css";
+import "../../styles/compose.css";
+import "../../styles/message_edit_history.css";
+import "../../styles/reactions.css";
+import "../../styles/user_circles.css";
+import "../../styles/left-sidebar.css";
+import "../../styles/right-sidebar.css";
+import "../../styles/lightbox.css";
+import "../../styles/popovers.css";
+import "../../styles/recent_topics.css";
+import "../../styles/typing_notifications.css";
+import "../../styles/hotspots.css";
+import "../../styles/night_mode.css";
+import "../../styles/user_status.css";
+import "../../styles/widgets.css";
 
 // This should be last.
 import "../ready";

static/js/bundles/common.js

@@ -13,6 +13,6 @@ import "simplebar/dist/simplebar.css";
 import "font-awesome/css/font-awesome.css";
 import "../../assets/icons/zulip-icons.font";
 import "source-sans-pro/source-sans-pro.css";
-import "../../styles/pygments.scss";
+import "../../styles/pygments.css";
 import "@uppy/core/dist/style.css";
 import "@uppy/progress-bar/dist/style.css";

static/js/bundles/portico.js

@@ -2,4 +2,4 @@ import "./common";
 import "../i18n";
 import "../portico/header";
 import "../portico/google-analytics";
-import "../../styles/portico/portico-styles.scss";
+import "../../styles/portico/portico-styles.css";

static/js/message_viewport.js

@@ -306,7 +306,7 @@ exports.is_narrow = function () {
     // This basically returns true when we hide the right sidebar for
     // the left_side_userlist skinny mode.  It would be nice to have a less brittle
     // test for this.  See the "@media (max-width: 1165px)" section in
-    // media.scss.
+    // media.css.
     return window.innerWidth <= 1165;
 };
 

static/js/overlays.js

@@ -45,7 +45,7 @@ exports.recent_topics_open = function () {
 // To address bugs where mouse might apply to the streams/settings
 // overlays underneath an open modal within those settings UI, we add
 // this inline style to '.overlay.show', overriding the
-// "pointer-events: all" style in app_components.scss.
+// "pointer-events: all" style in app_components.css.
 //
 // This is kinda hacky; it only works for modals within overlays, and
 // we need to make sure it gets re-enabled when the modal closes.

static/styles/compose.scss → static/styles/compose.css

@@ -168,7 +168,7 @@
 
 #compose-container {
     width: 100%;
-    // This should match the value for .app-main
+    /* This should match the value for .app-main */
     max-width: 1400px;
     margin: auto;
 }

static/styles/image_upload_widget.scss → static/styles/image_upload_widget.css

@@ -112,7 +112,7 @@
     }
 }
 
-/* SCSS related to settings page user avatar upload widget only */
+/* CSS related to settings page user avatar upload widget only */
 #user-avatar-upload-widget {
     .image_upload_button {
         border-radius: 5px;
@@ -159,7 +159,7 @@
     }
 }
 
-/* SCSS related to settings page realm icon upload widget only */
+/* CSS related to settings page realm icon upload widget only */
 #realm-icon-upload-widget {
     width: 100px;
     height: 100px;
@@ -190,7 +190,7 @@
     display: inline-block;
 }
 
-/* SCSS related to settings page realm day/night logo upload widget only */
+/* CSS related to settings page realm day/night logo upload widget only */
 #realm-day-logo-upload-widget,
 #realm-night-logo-upload-widget {
     width: 220px;

static/styles/informational-overlays.scss → static/styles/informational-overlays.css

@@ -63,7 +63,7 @@
     display: table;
 
     td.definition {
-        // keeps dividing line at same width for all tables in model.
+        /* keeps dividing line at same width for all tables in model. */
         width: calc(50% - 11px);
         text-align: right;
     }
@@ -104,7 +104,7 @@
     th {
         width: 245px;
         text-align: center;
-        // aligns table name with dividing line
+        /* aligns table name with dividing line */
     }
 
     td:not(.definition) {

static/styles/night_mode.scss → static/styles/night_mode.css

@@ -492,7 +492,7 @@ on a dark background, and don't change the dark labels dark either. */
     }
 
     #invite_user_form .modal-footer {
-        // no transparency prevents overlap issues
+        /* no transparency prevents overlap issues */
         background-color: hsl(211, 28%, 14%);
     }
 

static/styles/portico/markdown.scss → static/styles/portico/markdown.css

@@ -297,7 +297,7 @@
     }
 
     code {
-        /* Copied from rendered_markdown.scss */
+        /* Copied from rendered_markdown.css */
         font-size: 0.857em;
         unicode-bidi: embed;
         direction: ltr;

static/styles/portico/portico-signin.scss → static/styles/portico/portico-signin.css

@@ -686,7 +686,7 @@ button.login-social-button {
 
 button#login_auth_button_gitlab,
 button#register_auth_button_gitlab {
-    // GitLab icon size looks a bit inconsistent with others. This fixes it.
+    /* GitLab icon size looks a bit inconsistent with others. This fixes it. */
     background-size: auto 90%;
     background-position-x: 3px;
 }

static/styles/portico/portico-styles.css

@@ -0,0 +1,4 @@
+@import "../components.css";
+@import "portico.css";
+@import "portico-signin.css";
+@import "markdown.css";

static/styles/portico/portico.scss → static/styles/portico/portico.css

@@ -255,7 +255,7 @@ html {
                 margin-left: -40px;
                 padding-left: 40px;
 
-                // Don't show the focus outline for the highlighted page.
+                /* Don't show the focus outline for the highlighted page. */
                 outline: 0;
             }
         }

static/styles/recent_topics.scss → static/styles/recent_topics.css

@@ -109,7 +109,7 @@
         }
 
         .table_fix_head table {
-            // To keep border properties to the thead th.
+            /* To keep border properties to the thead th. */
             border-collapse: separate;
         }
 
@@ -131,7 +131,7 @@
         }
 
         .clear_search_button {
-            // Overrides app_components.scss property.
+            /* Overrides app_components.css property. */
             padding-top: 6px !important;
         }
 
@@ -284,9 +284,9 @@
         }
 
         @media (max-width: 750px) {
-            // Hide participants and last message time
-            // on smaller screens. This ensures user always
-            // has a nice UI experience.
+            /* Hide participants and last message time
+               on smaller screens. This ensures user always
+               has a nice UI experience. */
             .recent_topic_users,
             .recent_topic_timestamp,
             thead .participants_header,

static/styles/settings.scss → static/styles/settings.css

@@ -293,7 +293,7 @@ td .button {
             }
         }
 
-        // Force the actions column to use the minimum space necessary
+        /* Force the actions column to use the minimum space necessary */
         .actions {
             width: 1%;
             white-space: nowrap;
@@ -1565,7 +1565,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
         margin: 0 5px;
 
         &.dropdown_list_reset_button {
-            // Prevent night mode from overriding background.
+            /* Prevent night mode from overriding background. */
             background: unset !important;
             border: none;
 
@@ -1583,7 +1583,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
     }
 
     .dropdown-menu {
-        top: -7px; // -(margin+padding), both are set by bootstrap.
+        top: -7px; /* -(margin+padding), both are set by bootstrap. */
         bottom: auto;
     }
 
@@ -1757,11 +1757,11 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
     }
 }
 
-// This value needs to match with the same in subscriptions.scss, as
-// we have some shared styles declared there
+/* This value needs to match with the same in subscriptions.css, as
+   we have some shared styles declared there */
 @media (max-width: 750px) {
     #settings_overlay_container {
-        // this variable allows JavaScript to detect this media query
+        /* this variable allows JavaScript to detect this media query */
         --single-column: yes;
     }
 
@@ -1770,7 +1770,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
             display: block;
 
             &:not(.slide-left) .section {
-                // When viewing the settings list we hide the active section.
+                /* When viewing the settings list we hide the active section. */
                 display: none;
             }
         }
@@ -1796,7 +1796,7 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
             height: 100%;
 
             li.active {
-                // Don't highlight the active section in the settings list.
+                /* Don't highlight the active section in the settings list. */
                 background: inherit;
                 border-bottom: 1px solid hsl(0, 0%, 93%);
             }
@@ -1856,8 +1856,8 @@ body:not(.night-mode) #settings_page .custom_user_field .datepicker {
 }
 
 @media (max-width: 430px) {
-    // selects the label (inline-block)
-    // immediately following the checkbox
+    /* selects the label (inline-block)
+       immediately following the checkbox */
     .settings-box .checkbox + .inline-block {
         width: calc(100% - 25px);
     }

static/styles/subscriptions.scss → static/styles/subscriptions.css

@@ -1113,11 +1113,11 @@ ul.grey-box {
     }
 }
 
-// Note that this block has settings_page CSS as well, and thus needs
-// to match the media queries in settings.scss.
-//
-// Longer-term we should extract this logic two-column-overlay class
-// to read more naturally.
+/* Note that this block has settings_page CSS as well, and thus needs
+   to match the media queries in settings.css.
+
+   Longer-term we should extract this logic two-column-overlay class
+   to read more naturally. */
 @media (max-width: 750px) {
     .subscriptions-container {
         position: relative;

static/styles/user_circles.scss → static/styles/user_circles.css

@@ -39,9 +39,9 @@
     &::after {
         content: "";
         background: hsl(0, 0%, 50%);
-        height: 1.5px; // 1px is too thin, 2px is too thick
+        height: 1.5px; /* 1px is too thin, 2px is too thick */
         width: 6px;
         display: block;
-        margin: 3.25px auto 0 auto; // (total height - line height) / 2 = 3.25px
+        margin: 3.25px auto 0 auto; /* (total height - line height) / 2 = 3.25px */
     }
 }