css: Transition 'app.css' to SCSS.

This commit transitions all styles in app.css in the Django pipeline
to being compiled by webpack in an app-styles bundle, and renames the
various files to now be processed as SCSS.

To implement this transition, we move the old CSS file refernces in
settings.py and replace them with a bundle declared in
`webpack.assets.json` and includedn in the index.html template

Tweaked by tabbott to keep the list of files in `app.css` in
`webpack.assets.json`, and to preserve the ordering from the old
`settings.py`.

static/styles/portico-styles.scss

@@ -0,0 +1,8 @@
+@import "../third/zocial/zocial.css";
+@import "components";
+@import "portico";
+@import "portico-signin";
+@import "pygments";
+@import "../third/thirdparty-fonts.css";
+@import "../generated/icons/style.css";
+@import "fonts";

static/styles/scss/portico.scss

@@ -1,8 +0,0 @@
-@import "../../third/zocial/zocial.css";
-@import "../components.css";
-@import "../portico.css";
-@import "../portico-signin.css";
-@import "../pygments.css";
-@import "../../third/thirdparty-fonts.css";
-@import "../../generated/icons/style.css";
-@import "../fonts.css";

templates/zerver/app/index.html

@@ -28,8 +28,8 @@
 
 </style>
 
-{% stylesheet 'app' %}
 {{ minified_js('app', csp_nonce)|safe }}
+{{ render_bundle('app-styles', attrs='nonce="%s"' % (csp_nonce)) }}
 {{ render_bundle('translations', attrs='nonce="%s"' % (csp_nonce)) }}
 {{ render_bundle('katex', attrs='nonce="%s"' % (csp_nonce)) }}
 {% include "zerver/app/topic_is_muted.html" %}

tools/webpack.assets.json

@@ -2,10 +2,10 @@
     "activity": "./static/third/sorttable/sorttable.js",
     "portico": [
         "./static/js/portico/header.js",
-        "./static/styles/scss/portico.scss"
+        "./static/styles/portico-styles.scss"
     ],
     "error-styles": [
-        "./static/styles/scss/portico.scss"
+        "./static/styles/portico-styles.scss"
     ],
     "common": [
                "string.prototype.endswith",
@@ -35,5 +35,35 @@
               "./node_modules/plotly.js/dist/plotly-basic.min.js"
              ],
     "translations": "./static/js/translations.js",
-    "zxcvbn": "./node_modules/zxcvbn/dist/zxcvbn.js"
+    "zxcvbn": "./node_modules/zxcvbn/dist/zxcvbn.js",
+    "app-styles": [
+        "./static/third/bootstrap-notify/css/bootstrap-notify.css",
+        "./static/third/spectrum/spectrum.css",
+        "./static/third/thirdparty-fonts.css",
+        "./static/generated/icons/style.css",
+        "./static/node_modules/katex/dist/katex.css",
+        "./node_modules/flatpickr/dist/flatpickr.css",
+        "./node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.css",
+        "./static/styles/components.scss",
+        "./static/styles/app_components.scss",
+        "./static/styles/zulip.scss",
+        "./static/styles/alerts.scss",
+        "./static/styles/settings.scss",
+        "./static/styles/subscriptions.scss",
+        "./static/styles/drafts.scss",
+        "./static/styles/input_pill.scss",
+        "./static/styles/informational-overlays.scss",
+        "./static/styles/compose.scss",
+        "./static/styles/reactions.scss",
+        "./static/styles/left-sidebar.scss",
+        "./static/styles/right-sidebar.scss",
+        "./static/styles/lightbox.scss",
+        "./static/styles/popovers.scss",
+        "./static/styles/pygments.scss",
+        "./static/styles/fonts.scss",
+        "./static/styles/media.scss",
+        "./static/styles/typing_notifications.scss",
+        "./static/styles/hotspots.scss",
+        "./static/styles/night_mode.scss"
+    ]
 }

zproject/settings.py

@@ -877,39 +877,6 @@ PIPELINE = {
             ),
             'output_filename': 'min/landing.css'
         },
-        'app': {
-            'source_filenames': (
-                'third/bootstrap-notify/css/bootstrap-notify.css',
-                'third/spectrum/spectrum.css',
-                'third/thirdparty-fonts.css',
-                'generated/icons/style.css',
-                'node_modules/katex/dist/katex.css',
-                'node_modules/flatpickr/dist/flatpickr.css',
-                'node_modules/flatpickr/dist/plugins/confirmDate/confirmDate.css',
-                'styles/components.css',
-                'styles/app_components.css',
-                'styles/zulip.css',
-                'styles/alerts.css',
-                'styles/settings.css',
-                'styles/subscriptions.css',
-                'styles/drafts.css',
-                'styles/input_pill.css',
-                'styles/informational-overlays.css',
-                'styles/compose.css',
-                'styles/reactions.css',
-                'styles/left-sidebar.css',
-                'styles/right-sidebar.css',
-                'styles/lightbox.css',
-                'styles/popovers.css',
-                'styles/pygments.css',
-                'styles/fonts.css',
-                'styles/media.css',
-                'styles/typing_notifications.css',
-                'styles/hotspots.css',
-                'styles/night_mode.css',
-            ),
-            'output_filename': 'min/app.css'
-        },
         'common': {
             'source_filenames': (
                 'third/bootstrap/css/bootstrap.css',