perf(css): fold shared component stylesheets into one entry (52 render-blocking sheets -> 7)

apps/web/src/app/decks/_components/_index.scss

@@ -1,6 +1,12 @@
 @import "src/styles/vars_mixins";
 
-html, body {
+// Scoped to pages that actually render the decks UI. Unscoped, this hides the
+// window scrollbar on EVERY route, which cancels the `scrollbar-gutter: stable`
+// that styles/_base.scss reserves to stop modal-open CLS, and shifts every
+// centered element by 7px. That only stayed invisible while this file compiled
+// into a decks-only chunk; once CSS chunks are consolidated the rule is merged
+// into the shared sheet and leaks site-wide. See issue #1632.
+html:has(.decks), body:has(.decks) {
   &::-webkit-scrollbar {
     display: none;
   }

apps/web/src/features/announcement/index.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useMemo, useState } from "react";
 import dayjs from "@/utils/dayjs";
 import * as ls from "@/utils/local-storage";
 import { Announcement, LaterAnnouncement } from "./types";
-import "./index.scss";
 import { Button } from "@ui/button";
 import { usePathname } from "next/navigation";
 import { closeSvg } from "@ui/svg";

apps/web/src/features/post-renderer/components/extensions/hive-operation-extension.tsx

@@ -2,7 +2,6 @@
 
 import React, { RefObject, useEffect, useMemo, useRef } from "react";
 import { createRoot } from "react-dom/client";
-import "./hive-operation-extension.scss";
 import type { Operation } from "@ecency/sdk";
 import defaults from "@/defaults";
 

apps/web/src/features/post-renderer/components/extensions/hive-post-link-extension.tsx

@@ -9,7 +9,6 @@ import React, {
   useState,
 } from "react";
 import { createRoot } from "react-dom/client";
-import "./hive-post-link-extension.scss";
 import {
   findPostLinkElements,
   isInvalidPermlinkLink,

apps/web/src/features/post-renderer/components/extensions/wave-like-post-extension.tsx

@@ -7,7 +7,6 @@ import { getPostQueryOptions, QueryKeys } from "@ecency/sdk";
 import { getQueryClient } from "@/core/react-query";
 import { makeEntryPath } from "@/utils";
 import { findPostLinkElements, isWaveLikePost } from "../functions";
-import "./wave-like-post-extension.scss";
 import { EcencyRenderer } from "../ecency-renderer";
 import { Logo } from "../icons";
 import defaults from "@/defaults";

apps/web/src/features/shared/available-credits/index.tsx

@@ -21,8 +21,6 @@ import dayjs, { Dayjs } from "@/utils/dayjs";
 import { useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { PurchaseQrDialog } from "../purchase-qr";
-import "./index.scss";
-
 interface Props {
   username: string;
   operation: RcOperation;

apps/web/src/features/shared/bookmark-btn/index.tsx

@@ -14,7 +14,6 @@ import { Button } from "@ui/button";
 import { Tooltip } from "@ui/tooltip";
 import i18next from "i18next";
 import { useMemo, useState } from "react";
-import "./_index.scss";
 import { error, success } from "../feedback";
 import { getAccessToken } from "@/utils";
 import { useGlobalStore } from "@/core/global-store";

apps/web/src/features/shared/bookmarks/index.tsx

@@ -4,8 +4,6 @@ import { TabItem } from "@/features/ui";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import i18next from "i18next";
 import { useState } from "react";
-import "./_index.scss";
-
 interface Props {
   show: boolean;
   setShow: (v: boolean) => void;

apps/web/src/features/shared/boost/index.tsx

@@ -3,7 +3,6 @@
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 
 import React, { ChangeEvent, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { FormControl } from "@ui/input";
 import { Button } from "@ui/button";

apps/web/src/features/shared/buy-sell-hive/index.tsx

@@ -3,7 +3,6 @@
 import React, { useCallback, useRef, useState } from "react";
 import { error } from "../feedback";
 import { formatError } from "@/api/format-error";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { Button } from "@ui/button";
 import i18next from "i18next";

apps/web/src/features/shared/comment/index.tsx

@@ -25,7 +25,6 @@ import React, {
 import { useDebounce, useMount } from "react-use";
 import useLocalStorage from "react-use/lib/useLocalStorage";
 import useUnmount from "react-use/lib/useUnmount";
-import "./_index.scss";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 import { useIsMobile } from "@/features/ui/util/use-is-mobile";
 import { useQuery } from "@tanstack/react-query";

apps/web/src/features/shared/discussion/index.tsx

@@ -22,8 +22,6 @@ import { EcencyEntriesCacheManagement } from "@/core/caches";
 import { UilComment } from "@tooni/iconscout-unicons-react";
 import defaults from "@/defaults";
 import { setProxyBase } from "@ecency/render-helper";
-import "./_index.scss";
-
 setProxyBase(defaults.imageServer);
 
 interface Props {

apps/web/src/features/shared/edit-history/index.tsx

@@ -3,7 +3,6 @@
 import React, { useMemo, useState } from "react";
 import defaults from "@/defaults";
 import { renderPostBody, setProxyBase } from "@ecency/render-helper";
-import "./index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import { FormControl } from "@ui/input";
 import { Entry } from "@/entities";

apps/web/src/features/shared/editor-toolbar/add-image-mobile/index.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import { proxifyImageSrc, setProxyBase } from "@ecency/render-helper";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import { Button } from "@ui/button";
 import i18next from "i18next";

apps/web/src/features/shared/editor-toolbar/index.tsx

@@ -4,7 +4,6 @@ import React, { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useMountedState } from "react-use";
 import { v4 } from "uuid";
 import { codeTagsSvg, emoticonHappyOutlineSvg, formatBoldSvg, formatItalicSvg, formatListBulletedSvg, formatListNumberedSvg, formatQuoteCloseSvg, formatTitleSvg, gifIcon, gridSvg, imageSvg, textShortSvg, videoSvg } from "@/assets/img/svg";
-import "./_index.scss";
 import { UilPanelAdd } from "@tooni/iconscout-unicons-react";
 import { PollsCreation, PollSnapshot } from "@/features/polls";
 import { useIsMobile } from "@/features/ui/util/use-is-mobile";

apps/web/src/features/shared/entry-info/index.tsx

@@ -1,4 +1,3 @@
-import "./_index.scss";
 import { accountReputation, parseDate } from "@/utils";
 import { Entry } from "@/entities";
 import {

apps/web/src/features/shared/entry-list-content/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import "./_index.scss";
 import { Account, Community, Entry } from "@/entities";
 import { EntryListItem } from "@/features/shared";
 import { useVisibleEntries } from "@/features/shared/entry-list-item/use-muted-authors";

apps/web/src/features/shared/entry-list-item/index.tsx

@@ -2,7 +2,6 @@
 
 import React from "react";
 import { setProxyBase } from "@ecency/render-helper";
-import "./_index.scss";
 import defaults from "@/defaults";
 import { Account, Community, Entry, FullAccount } from "@/entities";
 import { makeEntryPath } from "@/utils";

apps/web/src/features/shared/entry-list-loading-item/index.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import "./_index.scss";
-
 export function EntryListLoadingItem() {
   return (
     <>

apps/web/src/features/shared/entry-menu/index.tsx

@@ -2,7 +2,6 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { success } from "../feedback";
-import "./_index.scss";
 import { useMenuItemsGenerator } from "./menu-items-generator";
 import { Entry } from "@/entities";
 import { getCommunityCache, useCommunityPin } from "@/core/caches";

apps/web/src/features/shared/entry-payout/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useRef, useState } from "react";
-import "./_index.scss";
 import { Popover, PopoverContent } from "@ui/popover";
 import { EntryPayoutDetail } from "@/features/shared/entry-payout/entry-payout-detail";
 import { parseAsset } from "@/utils";

apps/web/src/features/shared/entry-reblog-btn/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useMemo, useRef, useState } from "react";
-import "./_index.scss";
 import { Entry } from "@/entities";
 import { PopoverConfirm } from "@/features/ui";
 import i18next from "i18next";

apps/web/src/features/shared/entry-share/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import { Entry } from "@/entities";
 import {

apps/web/src/features/shared/entry-tip-btn/index.tsx

@@ -3,7 +3,6 @@
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 
 import React, { useMemo, useState } from "react";
-import "./_index.scss";
 import dynamic from "next/dynamic";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { Account, Entry } from "@/entities";

apps/web/src/features/shared/entry-vote-btn/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import "./_index.scss";
 import * as ss from "@/utils/session-storage";
 import { LoginRequired } from "@/features/shared";
 import useClickAway from "react-use/lib/useClickAway";

apps/web/src/features/shared/entry-votes/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { ReactNode, useMemo, useRef, useState } from "react";
-import "./_index.scss";
 import { Entry } from "@/entities";
 import { Tooltip } from "@ui/tooltip";
 import i18next from "i18next";

apps/web/src/features/shared/feedback/feedback-modal/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { InsufficientResourceCreditsDetails } from "./insufficient-resource-credits-details";
 import { CommonDetails } from "./common-details";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import { ErrorFeedbackObject } from "../feedback-events";
 import { ErrorTypes } from "@/enums";

apps/web/src/features/shared/feedback/feedback.tsx

@@ -6,8 +6,6 @@ import { useMountTransition } from "@/core/hooks";
 import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 import { useMount, useSet, useUnmount } from "react-use";
-import "./_index.scss";
-
 interface FeedbackItemProps {
   feedback: FeedbackObject;
   live: boolean;

apps/web/src/features/shared/gallery/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import { setProxyBase } from "@ecency/render-helper";
 import defaults from "@/defaults";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import i18next from "i18next";
 import { GalleryList } from "@/features/shared/gallery/gallery-list";

apps/web/src/features/shared/key-or-hot/index.tsx

@@ -12,7 +12,6 @@ import { useCallback, useState } from "react";
 import { OrDivider } from "../or-divider";
 import { MetaMaskSignButton } from "../metamask-sign-button";
 import { ExtensionChooser } from "../extension-chooser";
-import "./index.scss";
 import { shouldUseKeychainMobile } from "@/utils/client";
 import { isInAppBrowser } from "@/utils/keychain";
 import { getLoginType } from "@/utils/user-token";

apps/web/src/features/shared/linear-progress/index.tsx

@@ -1,8 +1,6 @@
 "use client";
 
 import React from "react";
-import "./_index.scss";
-
 export function LinearProgress() {
   return (
     <div className="linear-progress">

apps/web/src/features/shared/list-style-toggle/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import "./_index.scss";
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import { gridView, listView, menuDownSvg } from "@ui/svg";
 import i18next from "i18next";

apps/web/src/features/shared/login/index.tsx

@@ -2,7 +2,6 @@
 
 import { useGlobalStore } from "@/core/global-store";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
-import "./_index.scss";
 import i18next from "i18next";
 import Login from "./login";
 

apps/web/src/features/shared/message-no-data/index.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import "./_index.scss";
 import { Button } from "@ui/button";
 import Image from "next/image";
 import Link from "next/link";

apps/web/src/features/shared/mute-btn/index.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useMemo, useState } from "react";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { FormControl, InputGroup } from "@ui/input";
 import { Button } from "@ui/button";

apps/web/src/features/shared/navbar/index.tsx

@@ -4,7 +4,6 @@ import React, { lazy, Suspense, useEffect, useState } from "react";
 import usePrevious from "react-use/lib/usePrevious";
 import * as ls from "@/utils/local-storage";
 import useMount from "react-use/lib/useMount";
-import "./_index.scss";
 import { NavbarMobile } from "./navbar-mobile";
 import { NavbarDesktop } from "./navbar-desktop";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";

apps/web/src/features/shared/navbar/navbar-notifications-button.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import "./_navbar-notifications-button.scss";
 import { Button } from "@ui/button";
 import { Tooltip } from "@ui/tooltip";
 import i18next from "i18next";

apps/web/src/features/shared/navbar/sidebar/navbar-side-theme-switcher.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import "./_navbar-side-theme-switcher.scss";
 import { classNameObject } from "@ui/util";
 import { Theme } from "@/enums";
 import { brightnessSvg } from "@ui/svg";

apps/web/src/features/shared/notifications/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { NotificationsContent } from "@/features/shared/notifications/notifications-content";
-import "./_index.scss";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 import { useGlobalStore } from "@/core/global-store";
 import { ModalSidebar } from "@ui/modal/modal-sidebar";

apps/web/src/features/shared/or-divider/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React from "react";
-import "./_index.scss";
 import i18next from "i18next";
 
 export function OrDivider() {

apps/web/src/features/shared/profile-popover/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useCallback, useState } from "react";
-import "./index.scss";
 import { Entry } from "@/entities";
 import ProfilePopoverCard from "@/features/shared/profile-popover/profile-popover-card";
 import { ProfilePopoverAuthor } from "@/features/shared/profile-popover/profile-popover-author";

apps/web/src/features/shared/promote/index.tsx

@@ -3,7 +3,6 @@
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader } from "@ui/modal";
 import { FormControl } from "@ui/input";
 import { Button } from "@ui/button";

apps/web/src/features/shared/schedules/index.tsx

@@ -1,7 +1,6 @@
 import React from "react";
 import defaults from "@/defaults";
 import { setProxyBase } from "@ecency/render-helper";
-import "./_index.scss";
 import { Modal, ModalBody, ModalHeader, ModalTitle } from "@ui/modal";
 import i18next from "i18next";
 import { SchedulesList } from "@/features/shared/schedules/schedules-list";

apps/web/src/features/shared/scroll-to-top/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import "./_index.scss";
 import { chevronUpSvg } from "@/features/ui/svg";
 import i18next from "i18next";
 import { Tooltip } from "@ui/tooltip";

apps/web/src/features/shared/search-box/index.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import "./_index.scss";
 import { FormControl, InputGroup } from "@ui/input";
 import { Button } from "@ui/button";
 import { copyContent } from "@/features/ui/svg";

apps/web/src/features/shared/search-list-item/index.tsx

@@ -1,6 +1,5 @@
 import React, { useMemo } from "react";
 import { catchPostImage, postBodySummary, setProxyBase } from "@ecency/render-helper";
-import "./_index.scss";
 import defaults from "@/defaults";
 import { SearchResult } from "@/entities";
 import {

apps/web/src/features/shared/skeleton/index.tsx

@@ -1,6 +1,4 @@
 import React from "react";
-import "./index.scss";
-
 interface Props {
   className?: string;
   style?: object;

apps/web/src/features/shared/suggestion-list/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { CSSProperties, JSX, useEffect, useRef, useState } from "react";
-import "./_index.scss";
 import { classNameObject } from "@ui/util";
 import useClickAway from "react-use/lib/useClickAway";
 import i18next from "i18next";

apps/web/src/features/shared/switch-lang/index.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useState } from "react";
-import "./_index.scss";
 import { Dropdown, DropdownItem, DropdownMenu, DropdownToggle } from "@ui/dropdown";
 import Link from "next/link";
 import i18next from "i18next";

apps/web/src/features/shared/textarea-autocomplete/index.tsx

@@ -6,7 +6,6 @@ import React, {
 } from "react";
 import { useActiveAccount } from "@/core/hooks/use-active-account";
 import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
-import "./_index.scss";
 import { lookupAccountsQueryOptions, searchPath } from "@ecency/sdk";
 import { UserAvatar } from "@/features/shared";
 import i18next from "i18next";

apps/web/src/features/shared/transactions/index.tsx

@@ -1,3 +1 @@
-import "./_index.scss";
-
 export * from "./transaction-row";