styles: Replace Sass with PostCSS.

It’s about as fast as node-sass (faster, according to their
benchmarks) and more flexible.  Autoprefixer is neat: we can now go
delete all our -moz-, -webkit-, etc. lines and have them autogenerated
as necessary based on .browserslistrc.

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

package.json

@@ -13,6 +13,7 @@
     "@types/underscore": "1.8.18",
     "@types/webpack": "4.4.32",
     "@types/webpack-dev-server": "3.1.6",
+    "autoprefixer": "^9.6.1",
     "autosize": "4.0.2",
     "babel-loader": "^8.0.6",
     "blueimp-md5": "2.10.0",
@@ -20,6 +21,7 @@
     "clipboard": "2.0.4",
     "core-js": "^3.0.1",
     "css-loader": "2.1.1",
+    "cssnano": "^4.1.10",
     "emoji-datasource-google": "4.0.4",
     "emoji-datasource-google-blob": "npm:emoji-datasource-google@3.0.0",
     "emoji-datasource-twitter": "4.0.4",
@@ -41,8 +43,11 @@
     "moment": "2.24.0",
     "moment-timezone": "0.5.25",
     "plotly.js": "1.48.1",
-    "sass": "^1.22.10",
-    "sass-loader": "7.1.0",
+    "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",
     "script-loader": "0.7.2",
     "shebang-loader": "^0.0.1",
     "simplebar": "^4.1.0",

postcss.config.js

@@ -0,0 +1,11 @@
+module.exports = ({ file, options }) => ({
+    parser: file.extname === ".scss" ? "postcss-scss" : false,
+    plugins: {
+        // Warning: despite appearances, order is significant
+        "postcss-nested": {},
+        "postcss-extend-rule": {},
+        "postcss-simple-vars": {},
+        autoprefixer: {},
+        cssnano: options.env === "production" ? {} : false,
+    },
+});

static/styles/drafts.scss

@@ -22,10 +22,8 @@
     }
 
     .drafts-header {
-        padding: {
-            top: 4px;
-            bottom: 8px;
-        }
+        padding-top: 4px;
+        padding-bottom: 8px;
         text-align: center;
         border-bottom: 1px solid hsl(0, 0%, 87%);
 

static/styles/portico/portico-styles.scss

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

static/styles/reuseable_components.scss

@@ -1,7 +0,0 @@
-@mixin prefixed-user-select($value) {
-    -webkit-touch-callout: $value;
-    -webkit-user-select: $value;
-    -moz-user-select: $value;
-    -ms-user-select: $value;
-    user-select: $value;
-}

static/styles/user_status.scss

@@ -14,10 +14,8 @@
     };
 
     .user-status-header {
-        padding: {
-            top: 4px;
-            bottom: 4px;
-        }
+        padding-top: 4px;
+        padding-bottom: 4px;
         height: 5%;
         width: 100%;
         text-align: center;

static/styles/zulip.scss

@@ -1,5 +1,3 @@
-@import './reuseable_components.scss';
-
 body,
 html {
     width: 100%;
@@ -42,15 +40,15 @@ a {
 }
 
 .no-select {
-    @include prefixed-user-select(none);
+    user-select: none;
 }
 
 .auto-select {
-    @include prefixed-user-select(auto);
+    user-select: auto;
 }
 
 .text-select {
-    @include prefixed-user-select(text);
+    user-select: text;
 }
 
 p.n-margin {
@@ -567,7 +565,7 @@ td.pointer {
     position: absolute;
     left: 0px;
     top: 16px;
-    @include prefixed-user-select(none);
+    user-select: none;
 }
 
 .include-sender .message_time {

tools/webpack.config.ts

@@ -1,5 +1,4 @@
 import { resolve } from 'path';
-import * as Sass from 'sass';
 import * as BundleTracker from 'webpack-bundle-tracker';
 import * as webpack from 'webpack';
 // The devServer member of webpack.Configuration is managed by the
@@ -69,9 +68,10 @@ export default (env?: string): webpack.Configuration[] => {
                         },
                     ],
                 },
-                // sass / scss loader
+                // scss loader
                 {
-                    test: /\.(sass|scss)$/,
+                    test: /\.scss$/,
+                    include: resolve(__dirname, '../static/styles'),
                     use: [
                         {
                             loader: MiniCssExtractPlugin.loader,
@@ -83,14 +83,17 @@ export default (env?: string): webpack.Configuration[] => {
                         {
                             loader: 'css-loader',
                             options: {
+                                importLoaders: 1,
                                 sourceMap: true,
                             },
                         },
                         {
-                            loader: 'sass-loader',
+                            loader: 'postcss-loader',
                             options: {
-                                implementation: Sass,
                                 sourceMap: true,
+                                config: {
+                                    ctx: { env },
+                                },
                             },
                         },
                     ],

version.py

@@ -26,4 +26,4 @@ LATEST_RELEASE_ANNOUNCEMENT = "https://blog.zulip.org/2019/03/01/zulip-2-0-relea
 #   historical commits sharing the same major version, in which case a
 #   minor version bump suffices.
 
-PROVISION_VERSION = '53.0'
+PROVISION_VERSION = '54.0'