From 84c7c3d262f487b682e0edec69b57ca407104145 Mon Sep 17 00:00:00 2001 From: Anders Kaseorg Date: Tue, 15 Sep 2020 13:23:01 -0700 Subject: [PATCH] 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 --- .editorconfig | 2 +- docs/subsystems/html-css.md | 10 +- package.json | 1 - postcss.config.js | 5 +- static/js/bundles/app.js | 50 ++++---- static/js/bundles/common.js | 2 +- static/js/bundles/portico.js | 2 +- static/js/message_viewport.js | 2 +- static/js/overlays.js | 2 +- static/styles/{alerts.scss => alerts.css} | 0 ...app_components.scss => app_components.css} | 0 .../{components.scss => components.css} | 0 static/styles/{compose.scss => compose.css} | 2 +- static/styles/{drafts.scss => drafts.css} | 0 static/styles/{hotspots.scss => hotspots.css} | 0 ...ad_widget.scss => image_upload_widget.css} | 6 +- ...erlays.scss => informational-overlays.css} | 4 +- .../{input_pill.scss => input_pill.css} | 0 .../{left-sidebar.scss => left-sidebar.css} | 0 static/styles/{lightbox.scss => lightbox.css} | 0 ..._history.scss => message_edit_history.css} | 0 .../{night_mode.scss => night_mode.css} | 2 +- static/styles/{popovers.scss => popovers.css} | 0 .../portico/{activity.scss => activity.css} | 0 .../portico/{archive.scss => archive.css} | 0 .../portico/{billing.scss => billing.css} | 0 .../{integrations.scss => integrations.css} | 0 .../{landing-page.scss => landing-page.css} | 0 .../portico/{markdown.scss => markdown.css} | 2 +- ...portico-signin.scss => portico-signin.css} | 2 +- static/styles/portico/portico-styles.css | 4 + static/styles/portico/portico-styles.scss | 4 - .../portico/{portico.scss => portico.css} | 2 +- .../styles/portico/{stats.scss => stats.css} | 0 static/styles/{pygments.scss => pygments.css} | 0 .../styles/{reactions.scss => reactions.css} | 0 .../{recent_topics.scss => recent_topics.css} | 10 +- ...ed_markdown.scss => rendered_markdown.css} | 0 .../{right-sidebar.scss => right-sidebar.css} | 0 static/styles/{settings.scss => settings.css} | 20 ++-- .../{subscriptions.scss => subscriptions.css} | 10 +- ...ications.scss => typing_notifications.css} | 0 .../{user_circles.scss => user_circles.css} | 4 +- .../{user_status.scss => user_status.css} | 0 static/styles/{widgets.scss => widgets.css} | 0 static/styles/{zulip.scss => zulip.css} | 110 +++++++++--------- static/third/bootstrap-typeahead/typeahead.js | 2 +- tools/find-unused-css | 4 +- tools/lint | 6 +- tools/linter_lib/custom_check.py | 2 +- tools/webpack.assets.json | 30 ++--- webpack.config.ts | 5 +- yarn.lock | 2 +- 53 files changed, 154 insertions(+), 155 deletions(-) rename static/styles/{alerts.scss => alerts.css} (100%) rename static/styles/{app_components.scss => app_components.css} (100%) rename static/styles/{components.scss => components.css} (100%) rename static/styles/{compose.scss => compose.css} (99%) rename static/styles/{drafts.scss => drafts.css} (100%) rename static/styles/{hotspots.scss => hotspots.css} (100%) rename static/styles/{image_upload_widget.scss => image_upload_widget.css} (95%) rename static/styles/{informational-overlays.scss => informational-overlays.css} (95%) rename static/styles/{input_pill.scss => input_pill.css} (100%) rename static/styles/{left-sidebar.scss => left-sidebar.css} (100%) rename static/styles/{lightbox.scss => lightbox.css} (100%) rename static/styles/{message_edit_history.scss => message_edit_history.css} (100%) rename static/styles/{night_mode.scss => night_mode.css} (99%) rename static/styles/{popovers.scss => popovers.css} (100%) rename static/styles/portico/{activity.scss => activity.css} (100%) rename static/styles/portico/{archive.scss => archive.css} (100%) rename static/styles/portico/{billing.scss => billing.css} (100%) rename static/styles/portico/{integrations.scss => integrations.css} (100%) rename static/styles/portico/{landing-page.scss => landing-page.css} (100%) rename static/styles/portico/{markdown.scss => markdown.css} (99%) rename static/styles/portico/{portico-signin.scss => portico-signin.css} (99%) create mode 100644 static/styles/portico/portico-styles.css delete mode 100644 static/styles/portico/portico-styles.scss rename static/styles/portico/{portico.scss => portico.css} (99%) rename static/styles/portico/{stats.scss => stats.css} (100%) rename static/styles/{pygments.scss => pygments.css} (100%) rename static/styles/{reactions.scss => reactions.css} (100%) rename static/styles/{recent_topics.scss => recent_topics.css} (96%) rename static/styles/{rendered_markdown.scss => rendered_markdown.css} (100%) rename static/styles/{right-sidebar.scss => right-sidebar.css} (100%) rename static/styles/{settings.scss => settings.css} (98%) rename static/styles/{subscriptions.scss => subscriptions.css} (99%) rename static/styles/{typing_notifications.scss => typing_notifications.css} (100%) rename static/styles/{user_circles.scss => user_circles.css} (84%) rename static/styles/{user_status.scss => user_status.css} (100%) rename static/styles/{widgets.scss => widgets.css} (100%) rename static/styles/{zulip.scss => zulip.css} (94%) diff --git a/.editorconfig b/.editorconfig index d6aa1e2e1815a..0753e51f7ee16 100644 --- a/.editorconfig +++ b/.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}] diff --git a/docs/subsystems/html-css.md b/docs/subsystems/html-css.md index 2008013d7513b..367ca169aeccf 100644 --- a/docs/subsystems/html-css.md +++ b/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 diff --git a/package.json b/package.json index 0dc10347ae8af..5fb514d954680 100644 --- a/package.json +++ b/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", diff --git a/postcss.config.js b/postcss.config.js index 10620d2ab8a08..7288465161aa1 100644 --- a/postcss.config.js +++ b/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: {}, }, -}); +}; diff --git a/static/js/bundles/app.js b/static/js/bundles/app.js index 9d6039bb34f80..4c92d1d50d7f4 100644 --- a/static/js/bundles/app.js +++ b/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"; diff --git a/static/js/bundles/common.js b/static/js/bundles/common.js index 314d5e4860928..f78f9d0e29d7b 100644 --- a/static/js/bundles/common.js +++ b/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"; diff --git a/static/js/bundles/portico.js b/static/js/bundles/portico.js index 8bac10259bde8..c7da644440bad 100644 --- a/static/js/bundles/portico.js +++ b/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"; diff --git a/static/js/message_viewport.js b/static/js/message_viewport.js index 5bf204ca47355..3736f9707748d 100644 --- a/static/js/message_viewport.js +++ b/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; }; diff --git a/static/js/overlays.js b/static/js/overlays.js index a33db87c7bbf7..e7e774641e038 100644 --- a/static/js/overlays.js +++ b/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. diff --git a/static/styles/alerts.scss b/static/styles/alerts.css similarity index 100% rename from static/styles/alerts.scss rename to static/styles/alerts.css diff --git a/static/styles/app_components.scss b/static/styles/app_components.css similarity index 100% rename from static/styles/app_components.scss rename to static/styles/app_components.css diff --git a/static/styles/components.scss b/static/styles/components.css similarity index 100% rename from static/styles/components.scss rename to static/styles/components.css diff --git a/static/styles/compose.scss b/static/styles/compose.css similarity index 99% rename from static/styles/compose.scss rename to static/styles/compose.css index beb1e8a2e91ad..e27cb19aa0d34 100644 --- a/static/styles/compose.scss +++ b/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; } diff --git a/static/styles/drafts.scss b/static/styles/drafts.css similarity index 100% rename from static/styles/drafts.scss rename to static/styles/drafts.css diff --git a/static/styles/hotspots.scss b/static/styles/hotspots.css similarity index 100% rename from static/styles/hotspots.scss rename to static/styles/hotspots.css diff --git a/static/styles/image_upload_widget.scss b/static/styles/image_upload_widget.css similarity index 95% rename from static/styles/image_upload_widget.scss rename to static/styles/image_upload_widget.css index 997b110039f60..d1b7e2437cfab 100644 --- a/static/styles/image_upload_widget.scss +++ b/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; diff --git a/static/styles/informational-overlays.scss b/static/styles/informational-overlays.css similarity index 95% rename from static/styles/informational-overlays.scss rename to static/styles/informational-overlays.css index 0267cb84e566d..51434fcff9135 100644 --- a/static/styles/informational-overlays.scss +++ b/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) { diff --git a/static/styles/input_pill.scss b/static/styles/input_pill.css similarity index 100% rename from static/styles/input_pill.scss rename to static/styles/input_pill.css diff --git a/static/styles/left-sidebar.scss b/static/styles/left-sidebar.css similarity index 100% rename from static/styles/left-sidebar.scss rename to static/styles/left-sidebar.css diff --git a/static/styles/lightbox.scss b/static/styles/lightbox.css similarity index 100% rename from static/styles/lightbox.scss rename to static/styles/lightbox.css diff --git a/static/styles/message_edit_history.scss b/static/styles/message_edit_history.css similarity index 100% rename from static/styles/message_edit_history.scss rename to static/styles/message_edit_history.css diff --git a/static/styles/night_mode.scss b/static/styles/night_mode.css similarity index 99% rename from static/styles/night_mode.scss rename to static/styles/night_mode.css index 239b3b83a88a3..b419aff7f7efe 100644 --- a/static/styles/night_mode.scss +++ b/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%); } diff --git a/static/styles/popovers.scss b/static/styles/popovers.css similarity index 100% rename from static/styles/popovers.scss rename to static/styles/popovers.css diff --git a/static/styles/portico/activity.scss b/static/styles/portico/activity.css similarity index 100% rename from static/styles/portico/activity.scss rename to static/styles/portico/activity.css diff --git a/static/styles/portico/archive.scss b/static/styles/portico/archive.css similarity index 100% rename from static/styles/portico/archive.scss rename to static/styles/portico/archive.css diff --git a/static/styles/portico/billing.scss b/static/styles/portico/billing.css similarity index 100% rename from static/styles/portico/billing.scss rename to static/styles/portico/billing.css diff --git a/static/styles/portico/integrations.scss b/static/styles/portico/integrations.css similarity index 100% rename from static/styles/portico/integrations.scss rename to static/styles/portico/integrations.css diff --git a/static/styles/portico/landing-page.scss b/static/styles/portico/landing-page.css similarity index 100% rename from static/styles/portico/landing-page.scss rename to static/styles/portico/landing-page.css diff --git a/static/styles/portico/markdown.scss b/static/styles/portico/markdown.css similarity index 99% rename from static/styles/portico/markdown.scss rename to static/styles/portico/markdown.css index 7e14a0fff8a8a..63c17b8f12c26 100644 --- a/static/styles/portico/markdown.scss +++ b/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; diff --git a/static/styles/portico/portico-signin.scss b/static/styles/portico/portico-signin.css similarity index 99% rename from static/styles/portico/portico-signin.scss rename to static/styles/portico/portico-signin.css index 4db9f4e7fdb19..33dba90de297c 100644 --- a/static/styles/portico/portico-signin.scss +++ b/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; } diff --git a/static/styles/portico/portico-styles.css b/static/styles/portico/portico-styles.css new file mode 100644 index 0000000000000..fa3ec6f23bce1 --- /dev/null +++ b/static/styles/portico/portico-styles.css @@ -0,0 +1,4 @@ +@import "../components.css"; +@import "portico.css"; +@import "portico-signin.css"; +@import "markdown.css"; diff --git a/static/styles/portico/portico-styles.scss b/static/styles/portico/portico-styles.scss deleted file mode 100644 index a324de1dcc3a4..0000000000000 --- a/static/styles/portico/portico-styles.scss +++ /dev/null @@ -1,4 +0,0 @@ -@import "../components.scss"; -@import "portico.scss"; -@import "portico-signin.scss"; -@import "markdown.scss"; diff --git a/static/styles/portico/portico.scss b/static/styles/portico/portico.css similarity index 99% rename from static/styles/portico/portico.scss rename to static/styles/portico/portico.css index 053000e9ee762..690744a5c50c5 100644 --- a/static/styles/portico/portico.scss +++ b/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; } } diff --git a/static/styles/portico/stats.scss b/static/styles/portico/stats.css similarity index 100% rename from static/styles/portico/stats.scss rename to static/styles/portico/stats.css diff --git a/static/styles/pygments.scss b/static/styles/pygments.css similarity index 100% rename from static/styles/pygments.scss rename to static/styles/pygments.css diff --git a/static/styles/reactions.scss b/static/styles/reactions.css similarity index 100% rename from static/styles/reactions.scss rename to static/styles/reactions.css diff --git a/static/styles/recent_topics.scss b/static/styles/recent_topics.css similarity index 96% rename from static/styles/recent_topics.scss rename to static/styles/recent_topics.css index a996a28e67187..460cdbabf9588 100644 --- a/static/styles/recent_topics.scss +++ b/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, diff --git a/static/styles/rendered_markdown.scss b/static/styles/rendered_markdown.css similarity index 100% rename from static/styles/rendered_markdown.scss rename to static/styles/rendered_markdown.css diff --git a/static/styles/right-sidebar.scss b/static/styles/right-sidebar.css similarity index 100% rename from static/styles/right-sidebar.scss rename to static/styles/right-sidebar.css diff --git a/static/styles/settings.scss b/static/styles/settings.css similarity index 98% rename from static/styles/settings.scss rename to static/styles/settings.css index 32434a6982608..9a6682bcf17c8 100644 --- a/static/styles/settings.scss +++ b/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); } diff --git a/static/styles/subscriptions.scss b/static/styles/subscriptions.css similarity index 99% rename from static/styles/subscriptions.scss rename to static/styles/subscriptions.css index 2567383814e27..18040977fd0b5 100644 --- a/static/styles/subscriptions.scss +++ b/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; diff --git a/static/styles/typing_notifications.scss b/static/styles/typing_notifications.css similarity index 100% rename from static/styles/typing_notifications.scss rename to static/styles/typing_notifications.css diff --git a/static/styles/user_circles.scss b/static/styles/user_circles.css similarity index 84% rename from static/styles/user_circles.scss rename to static/styles/user_circles.css index c25be8be25ccf..8565ea6e3b99e 100644 --- a/static/styles/user_circles.scss +++ b/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 */ } } diff --git a/static/styles/user_status.scss b/static/styles/user_status.css similarity index 100% rename from static/styles/user_status.scss rename to static/styles/user_status.css diff --git a/static/styles/widgets.scss b/static/styles/widgets.css similarity index 100% rename from static/styles/widgets.scss rename to static/styles/widgets.css diff --git a/static/styles/zulip.scss b/static/styles/zulip.css similarity index 94% rename from static/styles/zulip.scss rename to static/styles/zulip.css index 9ec090599983d..16cdb1024f0b3 100644 --- a/static/styles/zulip.scss +++ b/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 - // browsers with a nonzero default scrollbar width (i.e. not - // macOS), we actually want a max-width of 1400px+the width of the - // scrollbar, which is done as an override in - // static/js/scroll_bar.js. - // - // And with the fluid_layout_width setting, we don't want a - // max-width at all. The consequence is that if you reload a - // Zulip window, there's a brief flash where the content is - // misplaced before the JS code can fix it. + /* TODO: This 1400px is wrong, but it's hard to do better. On + browsers with a nonzero default scrollbar width (i.e. not + macOS), we actually want a max-width of 1400px+the width of the + scrollbar, which is done as an override in + static/js/scroll_bar.js. + + And with the fluid_layout_width setting, we don't want a + max-width at all. The consequence is that if you reload a + Zulip window, there's a brief flash where the content is + 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 -// + https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d -// basic idea of this fix is to remove decorations from :hover and apply them only -// on :focus. +/* .dropdown-menu from v2.3.2 + + https://github.com/zulip/zulip/commit/7a3a3be7e547d3e8f0ed00820835104867f2433d + basic idea of this fix is to remove decorations from :hover and apply them only + 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 - // controls even when the message isn't hovered, so that hover - // doesn't disturb the layout. Usually that would be just - // visibility: hidden, but that cannot be animated, so we set - // opacity as well, which can be animated. + /* This is a bit tricky; we need to reserve space for the message + controls even when the message isn't hovered, so that hover + doesn't disturb the layout. Usually that would be just + visibility: hidden, but that cannot be animated, so we set + 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 - // with the stream name text on small narrows + /* this ensures the before "|" doesn't overlap + 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 - // ratio of this value to other flex items that determines the - // behavior while shrinking, here the other item has the .stream - // class and a flex of 1, so the value here *is* the ratio, and - // is chosen such that the narrow description shrinks to close - // before the stream name must begin to shrink + /* the actual value of flex shrink does not matter, it is the + ratio of this value to other flex items that determines the + behavior while shrinking, here the other item has the .stream + class and a flex of 1, so the value here *is* the ratio, and + is chosen such that the narrow description shrinks to close + 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 - // last element is either the narrow description (for stream narrows) or - // the "title" (for other narrows). The flex-grow property ensures these - // elements take up the entirety of the white space. + /* The very last element in the navbar is the search icon, the second + last element is either the narrow description (for stream narrows) or + the "title" (for other narrows). The flex-grow property ensures these + 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 - // 2nd last navbar element for better design (user convenience) this - // selector makes it so mousing over that element also gives the user - // a visual cue about the results of clicking the element + /* We extend the clickable area for the search_closed icon over the + 2nd last navbar element for better design (user convenience) this + selector makes it so mousing over that element also gives the user + 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 - // hide little artifacts from showing up in - // the gutter below the navbar. + /* We use both margin and padding to + hide little artifacts from showing up in + 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 - // hide little artifacts from showing up in - // the gutter below the navbar. + /* We use both margin and padding to + hide little artifacts from showing up in + 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 - // from above at this width and resolve it - // #searchbox_legacy .navbar-search.expanded, + /* todo: Figure out why this has to be different + from above at this width and resolve it + #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 { - // right: 115px; - // } + /* .search_closed .fa-search { + right: 115px; + } */ .top-navbar-border { width: calc(100% - 75px); } diff --git a/static/third/bootstrap-typeahead/typeahead.js b/static/third/bootstrap-typeahead/typeahead.js index 1d29d3b702457..86eae60aa3f05 100644 --- a/static/third/bootstrap-typeahead/typeahead.js +++ b/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: diff --git a/tools/find-unused-css b/tools/find-unused-css index e79c9e13aad92..d5e90e1c6cd26 100755 --- a/tools/find-unused-css +++ b/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 - if [ "$(git grep "$n" | grep -cv '^static/styles/zulip.scss')" -eq 0 ]; then +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.css')" -eq 0 ]; then echo "$n" fi done diff --git a/tools/lint b/tools/lint index 5cd183456dd7f..4c1d24713412c 100755 --- a/tools/lint +++ b/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") diff --git a/tools/linter_lib/custom_check.py b/tools/linter_lib/custom_check.py index 317bf74bd06d7..79e68d9922257 100644 --- a/tools/linter_lib/custom_check.py +++ b/tools/linter_lib/custom_check.py @@ -419,7 +419,7 @@ ) css_rules = RuleList( - langs=['css', 'scss'], + langs=['css'], rules=[ *whitespace_rules, ], diff --git a/tools/webpack.assets.json b/tools/webpack.assets.json index 17442e0407bb2..7312afe306fc4 100644 --- a/tools/webpack.assets.json +++ b/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/zulip.scss", - "./static/styles/portico/archive.scss", + "./static/styles/rendered_markdown.css", + "./static/styles/zulip.css", + "./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/integrations.scss" + "./static/styles/portico/landing-page.css", + "./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"], diff --git a/webpack.config.ts b/webpack.config.ts index c57fd1713e5bc..846adbb70caa6 100644 --- a/webpack.config.ts +++ b/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: [ { diff --git a/yarn.lock b/yarn.lock index ab14c55decb1b..d520b70431f54 100644 --- a/yarn.lock +++ b/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==