css_variables: Convert module to TypeScript.

This is okay now due to #32327.

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

tools/test-js-with-node

@@ -87,8 +87,7 @@ EXEMPT_FILES = make_set(
         "web/src/copied_tooltip.ts",
         "web/src/copy_and_paste.ts",
         "web/src/csrf.ts",
-        "web/src/css_variables.d.ts",
-        "web/src/css_variables.js",
+        "web/src/css_variables.ts",
         "web/src/custom_profile_fields_ui.ts",
         "web/src/debug.ts",
         "web/src/demo_organizations_ui.ts",

web/postcss.config.js

@@ -6,7 +6,7 @@ import postcssPrefixWrap from "postcss-prefixwrap";
 import postcssPresetEnv from "postcss-preset-env";
 import postcssSimpleVars from "postcss-simple-vars";
 
-import {media_breakpoints} from "./src/css_variables.js";
+import {media_breakpoints} from "./src/css_variables.ts";
 
 const config = ({file}) => ({
     plugins: [

web/src/buddy_list.ts

@@ -12,7 +12,7 @@ import render_presence_rows from "../templates/presence_rows.hbs";
 import * as blueslip from "./blueslip.ts";
 import * as buddy_data from "./buddy_data.ts";
 import type {BuddyUserInfo} from "./buddy_data.ts";
-import {media_breakpoints_num} from "./css_variables.js";
+import {media_breakpoints_num} from "./css_variables.ts";
 import type {Filter} from "./filter.ts";
 import * as hash_util from "./hash_util.ts";
 import {$t} from "./i18n.ts";

web/src/click_handlers.js

@@ -12,7 +12,7 @@ import * as buddy_data from "./buddy_data.ts";
 import * as compose_actions from "./compose_actions.ts";
 import * as compose_reply from "./compose_reply.ts";
 import * as compose_state from "./compose_state.ts";
-import {media_breakpoints_num} from "./css_variables.js";
+import {media_breakpoints_num} from "./css_variables.ts";
 import * as emoji_picker from "./emoji_picker.ts";
 import * as hash_util from "./hash_util.ts";
 import * as hashchange from "./hashchange.js";

web/src/css_variables.d.ts

@@ -1,33 +0,0 @@
-/* This is a placeholder typescript declaration file for `css_variables` module.
-   We can't convert the `css_variables` module to typescript yet because converting
-   it causes Webpack to trigger type checking with the TypeScript compiler, which is very expensive.
-
-   TS-migration of this module was reverted in this PR: https://github.com/zulip/zulip/pull/24985.
-*/
-
-declare const css_variables: {
-    media_breakpoints: {
-        xs_min: string;
-        sm_min: string;
-        md_min: string;
-        mc_min: string;
-        lg_min: string;
-        xl_min: string;
-        ml_min: string;
-        mm_min: string;
-        ms_min: string;
-    };
-    media_breakpoints_num: {
-        xs: number;
-        sm: number;
-        md: number;
-        mc: number;
-        lg: number;
-        xl: number;
-        ml: number;
-        mm: number;
-        ms: number;
-    };
-};
-
-export = css_variables;

web/src/popover_menus.ts

@@ -6,7 +6,7 @@ import $ from "jquery";
 import * as tippy from "tippy.js";
 
 import * as blueslip from "./blueslip.ts";
-import {media_breakpoints_num} from "./css_variables.js";
+import {media_breakpoints_num} from "./css_variables.ts";
 import * as modals from "./modals.ts";
 import * as overlays from "./overlays.ts";
 import * as popovers from "./popovers.ts";

web/src/sidebar_ui.ts

@@ -5,7 +5,7 @@ import render_buddy_list_popover from "../templates/popovers/buddy_list_popover.
 import render_right_sidebar from "../templates/right_sidebar.hbs";
 
 import {buddy_list} from "./buddy_list.ts";
-import {media_breakpoints_num} from "./css_variables.js";
+import {media_breakpoints_num} from "./css_variables.ts";
 import {reorder_left_sidebar_navigation_list} from "./left_sidebar_navigation_area.ts";
 import {localstorage} from "./localstorage.ts";
 import * as message_lists from "./message_lists.ts";