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.

https://github.com/webpack-contrib/css-loader/issues/1164

Signed-off-by: Anders Kaseorg <anders@zulip.com>

.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}) => ({
+module.exports = {
-    parser: file.extname === ".scss" ? "postcss-scss" : false,
     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/components.css";
-import "../../styles/app_components.scss";
+import "../../styles/app_components.css";
-import "../../styles/rendered_markdown.scss";
+import "../../styles/rendered_markdown.css";
-import "../../styles/zulip.scss";
+import "../../styles/zulip.css";
-import "../../styles/alerts.scss";
+import "../../styles/alerts.css";
-import "../../styles/settings.scss";
+import "../../styles/settings.css";
-import "../../styles/image_upload_widget.scss";
+import "../../styles/image_upload_widget.css";
-import "../../styles/subscriptions.scss";
+import "../../styles/subscriptions.css";
-import "../../styles/drafts.scss";
+import "../../styles/drafts.css";
-import "../../styles/input_pill.scss";
+import "../../styles/input_pill.css";
-import "../../styles/informational-overlays.scss";
+import "../../styles/informational-overlays.css";
-import "../../styles/compose.scss";
+import "../../styles/compose.css";
-import "../../styles/message_edit_history.scss";
+import "../../styles/message_edit_history.css";
-import "../../styles/reactions.scss";
+import "../../styles/reactions.css";
-import "../../styles/user_circles.scss";
+import "../../styles/user_circles.css";
-import "../../styles/left-sidebar.scss";
+import "../../styles/left-sidebar.css";
-import "../../styles/right-sidebar.scss";
+import "../../styles/right-sidebar.css";
-import "../../styles/lightbox.scss";
+import "../../styles/lightbox.css";
-import "../../styles/popovers.scss";
+import "../../styles/popovers.css";
-import "../../styles/recent_topics.scss";
+import "../../styles/recent_topics.css";
-import "../../styles/typing_notifications.scss";
+import "../../styles/typing_notifications.css";
-import "../../styles/hotspots.scss";
+import "../../styles/hotspots.css";
-import "../../styles/night_mode.scss";
+import "../../styles/night_mode.css";
-import "../../styles/user_status.scss";
+import "../../styles/user_status.css";
-import "../../styles/widgets.scss";
+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.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.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.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.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.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.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-styles.scss

@@ -1,4 +0,0 @@
-@import "../components.scss";
-@import "portico.scss";
-@import "portico-signin.scss";
-@import "markdown.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.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
+            /* Hide participants and last message time
-            // on smaller screens. This ensures user always
+               on smaller screens. This ensures user always
-            // has a nice UI experience.
+               has a nice UI experience. */
             .recent_topic_users,
             .recent_topic_timestamp,
             thead .participants_header,

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
+/* This value needs to match with the same in subscriptions.css, as
-// we have some shared styles declared there
+   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)
+    /* selects the label (inline-block)
-    // immediately following the checkbox
+       immediately following the checkbox */
     .settings-box .checkbox + .inline-block {
         width: calc(100% - 25px);
     }

static/styles/subscriptions.css

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

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

static/styles/zulip.css

@@ -299,16 +299,16 @@ p.n-margin {
 .app-main,
 .header-main {
     width: 100%;
-    // TODO: This 1400px is wrong, but it's hard to do better.  On
+    /* TODO: This 1400px is wrong, but it's hard to do better.  On
-    // browsers with a nonzero default scrollbar width (i.e. not
+       browsers with a nonzero default scrollbar width (i.e. not
-    // macOS), we actually want a max-width of 1400px+the width of the
+       macOS), we actually want a max-width of 1400px+the width of the
-    // scrollbar, which is done as an override in
+       scrollbar, which is done as an override in
-    // static/js/scroll_bar.js.
+       static/js/scroll_bar.js.
-    //
+
-    // And with the fluid_layout_width setting, we don't want a
+       And with the fluid_layout_width setting, we don't want a
-    // max-width at all.  The consequence is that if you reload a
+       max-width at all.  The consequence is that if you reload a
-    // Zulip window, there's a brief flash where the content is
+       Zulip window, there's a brief flash where the content is
-    // misplaced before the JS code can fix it.
+       misplaced before the JS code can fix it. */
     max-width: 1400px;
     min-width: 950px;
     margin: 0 auto;
@@ -389,7 +389,7 @@ label {
 /* Bootstrap's focus outline uses -webkit-focus-ring-color which doesn't exist in Firefox */
 a:not(:active):focus {
     outline: 2px solid hsl(215, 47%, 50%);
-    // TODO: change solid to auto once the Chromium bug #1105822 is fixed
+    /* TODO: change solid to auto once the Chromium bug #1105822 is fixed */
 }
 
 /* List of text-like input types taken from Bootstrap */
@@ -551,10 +551,10 @@ strong {
     color: inherit;
 }
 
-// .dropdown-menu from v2.3.2
+/* .dropdown-menu from v2.3.2
-// + https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
+   + https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d
-// basic idea of this fix is to remove decorations from :hover and apply them only
+   basic idea of this fix is to remove decorations from :hover and apply them only
-// on :focus.
+   on :focus. */
 .typeahead-menu {
     li {
         a {
@@ -757,11 +757,11 @@ td.pointer {
     height: 22px;
     z-index: 1;
 
-    // This is a bit tricky; we need to reserve space for the message
+    /* This is a bit tricky; we need to reserve space for the message
-    // controls even when the message isn't hovered, so that hover
+       controls even when the message isn't hovered, so that hover
-    // doesn't disturb the layout.  Usually that would be just
+       doesn't disturb the layout.  Usually that would be just
-    // visibility: hidden, but that cannot be animated, so we set
+       visibility: hidden, but that cannot be animated, so we set
-    // opacity as well, which can be animated.
+       opacity as well, which can be animated. */
     > div {
         opacity: 0;
         visibility: hidden;
@@ -811,7 +811,7 @@ td.pointer {
         &:not(.empty-star) {
             color: hsl(106, 77%, 29%);
 
-            // Opacity/visibility as though the message is hovered.
+            /* Opacity/visibility as though the message is hovered. */
             opacity: 1 !important;
             visibility: visible !important;
         }
@@ -1565,7 +1565,7 @@ div.focused_table {
         padding: 12px 6px;
 
         @media (max-width: 500px) {
-            padding: 7px 3.5px; // based on having ~41.66% decrease
+            padding: 7px 3.5px; /* based on having ~41.66% decrease */
         }
         i {
             margin-right: 3px;
@@ -1578,7 +1578,7 @@ div.focused_table {
             }
             .fa-hashtag {
                 font-size: 1.2rem;
-                // font-weight: 800;
+                /* font-weight: 800; */
                 margin: 0 2px 0 5px;
             }
         }
@@ -1589,7 +1589,7 @@ div.focused_table {
         overflow: hidden;
         color: inherit;
         text-decoration: none;
-        // The first ~3px of padding here overlaps with the left padding from sub_count for some reason.
+        /* The first ~3px of padding here overlaps with the left padding from sub_count for some reason. */
         padding-right: calc(3px + 10px);
     }
 
@@ -1627,8 +1627,8 @@ div.focused_table {
         &::before {
             left: -3px;
             @media (max-width: 500px) {
-                // this ensures the before "|" doesn't overlap
+                /* this ensures the before "|" doesn't overlap
-                // with the stream name text on small narrows
+                   with the stream name text on small narrows */
                 left: 0;
             }
         }
@@ -1639,12 +1639,12 @@ div.focused_table {
     }
 
     .narrow_description {
-        // the actual value of flex shrink does not matter, it is the
+        /* the actual value of flex shrink does not matter, it is the
-        // ratio of this value to other flex items that determines the
+           ratio of this value to other flex items that determines the
-        // behavior while shrinking, here the other item has the .stream
+           behavior while shrinking, here the other item has the .stream
-        // class and a flex of 1, so the value here *is* the ratio, and
+           class and a flex of 1, so the value here *is* the ratio, and
-        // is chosen such that the narrow description shrinks to close
+           is chosen such that the narrow description shrinks to close
-        // before the stream name must begin to shrink
+           before the stream name must begin to shrink */
         flex-shrink: 100;
         overflow: hidden;
         white-space: nowrap;
@@ -1663,7 +1663,7 @@ div.focused_table {
     }
 
     .search_closed {
-        flex: 0; // makes sure search icon is always visible
+        flex: 0; /* makes sure search icon is always visible */
 
         cursor: pointer;
         font-size: 20px;
@@ -1683,17 +1683,17 @@ div.focused_table {
         text-overflow: ellipsis;
     }
 
-    // The very last element in the navbar is the search icon, the second
+    /* The very last element in the navbar is the search icon, the second
-    // last element is either the narrow description (for stream narrows) or
+       last element is either the narrow description (for stream narrows) or
-    // the "title" (for other narrows). The flex-grow property ensures these
+       the "title" (for other narrows). The flex-grow property ensures these
-    // elements take up the entirety of the white space.
+       elements take up the entirety of the white space. */
     > :nth-last-child(2) {
         flex-grow: 1;
 
-        // We extend the clickable area for the search_closed icon over the
+        /* We extend the clickable area for the search_closed icon over the
-        // 2nd last navbar element for better design (user convenience) this
+           2nd last navbar element for better design (user convenience) this
-        // selector makes it so mousing over that element also gives the user
+           selector makes it so mousing over that element also gives the user
-        // a visual cue about the results of clicking the element
+           a visual cue about the results of clicking the element */
         cursor: pointer;
         &:hover + .search_closed {
             color: hsl(0, 0%, 0%);
@@ -1908,7 +1908,7 @@ div.focused_table {
     left: 0;
     text-align: center;
     vertical-align: middle;
-    // border-right: 2px solid hsl(204, 20%, 74%);
+    /* border-right: 2px solid hsl(204, 20%, 74%); */
 }
 
 #streamlist-toggle-button {
@@ -2580,7 +2580,7 @@ select.inline_select_topic_edit {
     margin: 0;
 }
 
-// Hide the up and down arrows in the Flatpickr datepicker year
+/* Hide the up and down arrows in the Flatpickr datepicker year */
 .flatpickr-months .numInputWrapper span {
     display: none;
 }
@@ -2607,9 +2607,9 @@ select.inline_select_topic_edit {
                 box-shadow: 0 -2px 3px 0 hsla(0, 0%, 0%, 0.1);
                 border-left: 1px solid hsl(0, 0%, 87%);
 
-                // We use both margin and padding to
+                /* We use both margin and padding to
-                // hide little artifacts from showing up in
+                   hide little artifacts from showing up in
-                // the gutter below the navbar.
+                   the gutter below the navbar. */
                 margin-top: $header_height;
                 padding-top: $header_padding_bottom;
 
@@ -2686,9 +2686,9 @@ select.inline_select_topic_edit {
                 box-shadow: 0 2px 3px 0 hsla(0, 0%, 0%, 0.1);
                 border-right: 1px solid hsl(0, 0%, 87%);
 
-                // We use both margin and padding to
+                /* We use both margin and padding to
-                // hide little artifacts from showing up in
+                   hide little artifacts from showing up in
-                // the gutter below the navbar.
+                   the gutter below the navbar. */
                 margin-top: $header_height;
                 padding-top: $header_padding_bottom;
 
@@ -2738,9 +2738,9 @@ select.inline_select_topic_edit {
         margin-left: 40px;
         width: calc(100% - 108px);
     }
-    // todo: Figure out why this has to be different
+    /* todo: Figure out why this has to be different
-    // from above at this width and resolve it
+       from above at this width and resolve it
-    // #searchbox_legacy .navbar-search.expanded,
+       #searchbox_legacy .navbar-search.expanded, */
     #searchbox_legacy .navbar-search.expanded,
     #searchbox .navbar-search.expanded {
         width: calc(100% - 123px);
@@ -2751,9 +2751,9 @@ select.inline_select_topic_edit {
     }
 
     #top_navbar:not(.rightside-userlist) {
-        // .search_closed .fa-search {
+        /* .search_closed .fa-search {
-        //     right: 115px;
+               right: 115px;
-        // }
+           } */
         .top-navbar-border {
             width: calc(100% - 75px);
         }

static/third/bootstrap-typeahead/typeahead.js

@@ -48,7 +48,7 @@
  *   returns a string containing the header text, or false.
  *
  *   Our custom changes include all mentions of this.header, some CSS changes
- *   in compose.scss and splitting $container out of $menu so we can insert
+ *   in compose.css and splitting $container out of $menu so we can insert
  *   additional HTML before $menu.
  *
  * 4. Escape hooks:

tools/find-unused-css

@@ -1,8 +1,8 @@
 #!/usr/bin/env bash
 # Hackish tool for attempting to find unused IDs / classes in our CSS
 
-for n in $(perl -lne 'print $1 while /[#.]([a-zA-Z0-9_-]+)/g' static/styles/zulip.scss | sort -u); do
+for n in $(perl -lne 'print $1 while /[#.]([a-zA-Z0-9_-]+)/g' static/styles/zulip.css | sort -u); do
-    if [ "$(git grep "$n" | grep -cv '^static/styles/zulip.scss')" -eq 0 ]; then
+    if [ "$(git grep "$n" | grep -cv '^static/styles/zulip.css')" -eq 0 ]; then
         echo "$n"
     fi
 done

tools/lint

@@ -45,10 +45,10 @@ def run() -> None:
 
     by_lang = linter_config.list_files(groups={
         'backend': ['py', 'sh', 'pp', 'json', 'md', 'txt', 'text', 'yaml', 'rst', 'yml'],
-        'frontend': ['js', 'ts', 'css', 'scss', 'hbs', 'html', 'lock'],
+        'frontend': ['js', 'ts', 'css', 'hbs', 'html', 'lock'],
     }, exclude=EXCLUDED_FILES)
 
-    linter_config.external_linter('css', ['node', 'node_modules/.bin/stylelint'], ['css', 'scss'],
+    linter_config.external_linter('css', ['node', 'node_modules/.bin/stylelint'], ['css'],
                                   fix_arg='--fix',
                                   description="Standard CSS style and formatting linter "
                                   "(config: stylelint.config.js)")
@@ -92,7 +92,7 @@ def run() -> None:
                                   description="Sorts Python import statements",
                                   check_arg=['--check-only', '--diff'])
     linter_config.external_linter('prettier', ['node_modules/.bin/prettier', '--check', '--loglevel=warn'],
-                                  ['css', 'js', 'json', 'scss', 'ts', 'yaml', 'yml'],
+                                  ['css', 'js', 'json', 'ts', 'yaml', 'yml'],
                                   fix_arg=['--write'],
                                   description="Formats CSS, JavaScript, YAML")
 

tools/linter_lib/custom_check.py

@@ -419,7 +419,7 @@ bash_rules = RuleList(
 )
 
 css_rules = RuleList(
-    langs=['css', 'scss'],
+    langs=['css'],
     rules=[
         *whitespace_rules,
     ],

tools/webpack.assets.json

@@ -3,7 +3,7 @@
         "./static/js/bundles/common",
         "sorttable",
         "./static/js/analytics/activity",
-        "./static/styles/portico/activity.scss"
+        "./static/styles/portico/activity.css"
     ],
     "archive": [
         "./static/js/bundles/portico",
@@ -15,35 +15,35 @@
         "./static/js/stream_color",
         "./static/js/scroll_bar",
         "katex/dist/katex.css",
-        "./static/styles/rendered_markdown.scss",
+        "./static/styles/rendered_markdown.css",
-        "./static/styles/zulip.scss",
+        "./static/styles/zulip.css",
-        "./static/styles/portico/archive.scss",
+        "./static/styles/portico/archive.css",
         "./static/generated/emoji-styles/google-sprite.css"
     ],
     "billing": [
         "./static/js/bundles/portico",
         "./static/js/portico/landing-page",
-        "./static/styles/portico/landing-page.scss",
+        "./static/styles/portico/landing-page.css",
         "./static/js/billing/helpers",
         "./static/js/billing/billing",
         "./static/js/templates",
         "./static/js/loading",
-        "./static/styles/portico/billing.scss"
+        "./static/styles/portico/billing.css"
     ],
     "upgrade": [
         "./static/js/bundles/portico",
         "./static/js/portico/landing-page",
-        "./static/styles/portico/landing-page.scss",
+        "./static/styles/portico/landing-page.css",
         "./static/js/billing/helpers",
         "./static/js/billing/upgrade",
         "./static/js/templates",
         "./static/js/loading",
-        "./static/styles/portico/billing.scss"
+        "./static/styles/portico/billing.css"
     ],
     "portico": ["./static/js/bundles/portico"],
     "error-styles": [
         "./static/third/bootstrap/css/bootstrap.css",
-        "./static/styles/portico/portico-styles.scss"
+        "./static/styles/portico/portico-styles.css"
     ],
     "common": ["./static/js/bundles/common"],
     "help": [
@@ -56,13 +56,13 @@
     "landing-page": [
         "./static/js/bundles/portico",
         "./static/js/portico/landing-page",
-        "./static/styles/portico/landing-page.scss"
+        "./static/styles/portico/landing-page.css"
     ],
     "integrations": [
         "./static/js/bundles/portico",
         "./static/js/portico/integrations",
-        "./static/styles/portico/landing-page.scss",
+        "./static/styles/portico/landing-page.css",
-        "./static/styles/portico/integrations.scss"
+        "./static/styles/portico/integrations.css"
     ],
     "signup": [
         "./static/js/bundles/portico",
@@ -83,9 +83,9 @@
         "./static/js/bundles/common",
         "sorttable",
         "./static/js/analytics/activity",
-        "./static/styles/portico/activity.scss",
+        "./static/styles/portico/activity.css",
         "./static/js/analytics/support",
-        "./static/styles/app_components.scss"
+        "./static/styles/app_components.css"
     ],
     "dev-login": ["./static/js/bundles/portico", "./static/js/portico/dev-login"],
     "desktop-login": ["./static/js/bundles/portico", "./static/js/portico/desktop-login"],
@@ -105,7 +105,7 @@
     ],
     "stats": [
         "./static/js/bundles/portico",
-        "./static/styles/portico/stats.scss",
+        "./static/styles/portico/stats.css",
         "./static/js/stats/stats"
     ],
     "app": ["./static/js/bundles/app"],

webpack.config.ts

@@ -82,6 +82,7 @@ export default (env?: string): webpack.Configuration[] => {
                 // regular css files
                 {
                     test: /\.css$/,
+                    exclude: resolve(__dirname, "static/styles"),
                     use: [
                         {
                             loader: MiniCssExtractPlugin.loader,
@@ -98,9 +99,9 @@ export default (env?: string): webpack.Configuration[] => {
                         },
                     ],
                 },
-                // scss loader
+                // PostCSS loader
                 {
-                    test: /\.scss$/,
+                    test: /\.css$/,
                     include: resolve(__dirname, "static/styles"),
                     use: [
                         {

yarn.lock

@@ -9461,7 +9461,7 @@ postcss-sass@^0.4.4:
     gonzales-pe "^4.3.0"
     postcss "^7.0.21"
 
-postcss-scss@^2.0.0, postcss-scss@^2.1.1:
+postcss-scss@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-2.1.1.tgz#ec3a75fa29a55e016b90bf3269026c53c1d2b383"
   integrity sha512-jQmGnj0hSGLd9RscFw9LyuSVAa5Bl1/KBPqG1NQw9w8ND55nY4ZEsdlVuYJvLPpV+y0nwTV5v/4rHPzZRihQbA==