Import CSS at beginning of files (#2611)

src/action.tsx

@@ -15,6 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+// Keep in order so precedence is preserved
+import "@/vendors/theme/app/app.scss";
+import "@/vendors/overrides.scss";
+import "@/action.scss";
+
 import "@/extensionContext";
 
 import "@/actionPanel/messenger/registration";
@@ -24,11 +29,6 @@ import React from "react";
 import registerBuiltinBlocks from "@/blocks/registerBuiltinBlocks";
 import registerContribBlocks from "@/contrib/registerContribBlocks";
 
-// Keep in order so precedence is preserved
-import "@/vendors/theme/app/app.scss";
-import "@/vendors/overrides.scss";
-import "@/action.scss";
-
 registerContribBlocks();
 registerBuiltinBlocks();
 

src/auth/ScopeSettings.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./ScopeSettings.module.scss";
+
 import React, { useCallback } from "react";
 import { Formik, FormikBag, FormikValues } from "formik";
 import { Alert, Button, Container, Form } from "react-bootstrap";
@@ -28,7 +30,6 @@ import { isAxiosError } from "@/errors";
 import reportError from "@/telemetry/reportError";
 import useNotifications from "@/hooks/useNotifications";
 import ConnectedFieldTemplate from "@/components/form/ConnectedFieldTemplate";
-import styles from "./ScopeSettings.module.scss";
 import { useGetAuthQuery } from "@/services/api";
 
 interface Profile {

src/components/brickModal/BrickModal.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./BrickModal.module.scss";
+
 import React, {
   CSSProperties,
   useCallback,
@@ -45,7 +47,6 @@ import BrickDetail from "./BrickDetail";
 import QuickAdd from "@/components/brickModal/QuickAdd";
 import { Except } from "type-fest";
 import cx from "classnames";
-import styles from "./BrickModal.module.scss";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 

src/components/documentBuilder/edit/ElementEditor.tsx

@@ -15,12 +15,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./DocumentEditor.module.scss";
+
 import { useField } from "formik";
 import React from "react";
 import { DocumentElement } from "@/components/documentBuilder/documentBuilderTypes";
 import { getProperty } from "@/utils";
 import { Col, Row } from "react-bootstrap";
-import styles from "./DocumentEditor.module.scss";
 import RemoveElement from "./RemoveElement";
 import MoveElement from "./MoveElement";
 import elementTypeLabels from "@/components/documentBuilder/elementTypeLabels";

src/components/documentBuilder/preview/DocumentPreview.tsx

@@ -15,16 +15,17 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import previewStyles from "./ElementPreview.module.scss";
+import documentTreeStyles from "@/components/documentBuilder/preview/documentTree.module.scss";
+import styles from "./DocumentPreview.module.scss";
+
 import { useField } from "formik";
 import React, { MouseEventHandler, useMemo, useState } from "react";
 import { DocumentElement } from "@/components/documentBuilder/documentBuilderTypes";
 import AddElementAction from "./AddElementAction";
 import ElementPreview from "./ElementPreview";
 import { ROOT_ELEMENT_TYPES } from "@/components/documentBuilder/allowedElementTypes";
 import cx from "classnames";
-import previewStyles from "./ElementPreview.module.scss";
-import documentTreeStyles from "@/components/documentBuilder/preview/documentTree.module.scss";
-import styles from "./DocumentPreview.module.scss";
 import { getPreviewValues } from "@/components/fields/fieldUtils";
 
 type DocumentPreviewProps = {

src/components/documentBuilder/preview/getPreviewComponentDefinition.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import documentTreeStyles from "./documentTree.module.scss";
+
 import {
   DocumentComponent,
   DocumentElement,
@@ -24,7 +26,6 @@ import { get } from "lodash";
 import { UnknownObject } from "@/types";
 import { isExpression } from "@/runtime/mapArgs";
 import cx from "classnames";
-import documentTreeStyles from "./documentTree.module.scss";
 import React from "react";
 import { Button } from "react-bootstrap";
 import { getComponentDefinition } from "@/components/documentBuilder/documentTree";

src/components/fields/schemaFields/widgets/TemplateToggleWidget.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./TemplateToggleWidget.module.scss";
+
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { FieldInputMode } from "@/components/fields/schemaFields/fieldInputMode";
 import { Expression } from "@/core";
@@ -23,7 +25,6 @@ import { UnknownObject } from "@/types";
 import { SchemaFieldProps } from "@/components/fields/schemaFields/propTypes";
 import { JSONSchema7Array } from "json-schema";
 import WidgetLoadingIndicator from "@/components/fields/schemaFields/widgets/WidgetLoadingIndicator";
-import styles from "./TemplateToggleWidget.module.scss";
 import useToggleFormField from "@/devTools/editor/hooks/useToggleFormField";
 import { useField } from "formik";
 

src/components/form/Form.tsx

@@ -15,11 +15,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./Form.module.scss";
+
 import React, { ReactElement } from "react";
 import { Button, Form as BootstrapForm } from "react-bootstrap";
 import { Formik, FormikHelpers, FormikValues } from "formik";
 import * as yup from "yup";
-import styles from "./Form.module.scss";
 
 export type OnSubmit<TValues = FormikValues> = (
   values: TValues,

src/components/form/lockedLabel/LockedExtensionPointLabel.tsx

@@ -15,13 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./LockedExtensionPointLabel.module.scss";
+
 import React from "react";
 import { OverlayTrigger, Tooltip } from "react-bootstrap";
 import { uuidv4 } from "@/types/helpers";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLock } from "@fortawesome/free-solid-svg-icons";
 import { useField } from "formik";
-import styles from "./LockedExtensionPointLabel.module.scss";
 
 const LockedExtensionPointLabel: React.FC<{
   label: string;

src/components/formBuilder/FormBuilder.tsx

@@ -15,10 +15,11 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./FormBuilder.module.scss";
+
 import React, { useState } from "react";
 import FormEditor from "./FormEditor";
 import FormPreview from "./FormPreview";
-import styles from "./FormBuilder.module.scss";
 import { useField } from "formik";
 import { RJSFSchema } from "@/components/formBuilder/formBuilderTypes";
 

src/components/formBuilder/FormEditor.tsx

@@ -15,7 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-/* eslint-disable security/detect-object-injection */
+import styles from "./FormEditor.module.scss";
+
 import { useField } from "formik";
 import React, { useEffect, useMemo } from "react";
 import {
@@ -38,7 +39,6 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { Schema } from "@/core";
 import { produce } from "immer";
-import styles from "./FormEditor.module.scss";
 import { joinName } from "@/utils";
 import FieldTemplate from "@/components/form/FieldTemplate";
 import { SchemaFieldProps } from "@/components/fields/schemaFields/propTypes";

src/components/formBuilder/FormPreviewFieldTemplate.tsx

@@ -15,11 +15,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./FormPreviewFieldTemplate.module.scss";
+
 import { Field, FieldProps } from "@rjsf/core";
 import React from "react";
 import { SetActiveField } from "./formBuilderTypes";
 import { UI_SCHEMA_ACTIVE } from "./schemaFieldNames";
-import styles from "./FormPreviewFieldTemplate.module.scss";
 import cx from "classnames";
 
 export interface FormPreviewFieldProps extends FieldProps {

src/components/jsonTree/JsonTree.tsx

@@ -15,12 +15,13 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./JsonTree.module.scss";
+
 import { JSONTree } from "react-json-tree";
 import { jsonTreeTheme as theme } from "@/themes/light";
 import React, { useCallback, useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
 import FieldTemplate from "@/components/form/FieldTemplate";
-import styles from "./JsonTree.module.scss";
 import GridLoader from "react-spinners/GridLoader";
 import { searchData } from "@/devTools/utils";
 import { useLabelRenderer } from "./treeHooks";

src/components/schemaTree/SchemaTree.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./SchemaTree.module.scss";
+
 import React, { useMemo } from "react";
 import { Schema } from "@/core";
 import { Table } from "react-bootstrap";
@@ -27,7 +29,6 @@ import {
   faCheck,
 } from "@fortawesome/free-solid-svg-icons";
 import { isServiceField } from "@/components/fields/schemaFields/ServiceField";
-import styles from "./SchemaTree.module.scss";
 import cx from "classnames";
 
 type SchemaTreeRow = {

src/devTools/editor/ElementWizard.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./ElementWizard.module.scss";
+
 import React, { useCallback, useContext, useMemo, useState } from "react";
 import { useFormikContext } from "formik";
 import { groupBy } from "lodash";
@@ -36,7 +38,6 @@ import { produce } from "immer";
 import { useAsyncEffect } from "use-async-effect";
 import { upgradePipelineToV3 } from "@/devTools/editor/extensionPoints/upgrade";
 import BlueprintOptionsTab from "./tabs/blueprintOptionsTab/BlueprintOptionsTab";
-import styles from "./ElementWizard.module.scss";
 import AskQuestionModalButton from "./askQuestion/AskQuestionModalButton";
 import useFlags from "@/hooks/useFlags";
 

src/devTools/editor/panes/insert/GenericInsertPane.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./GenericInsertPane.module.scss";
+
 import React, { useCallback } from "react";
 import { useDispatch } from "react-redux";
 import useAvailableExtensionPoints from "@/devTools/editor/hooks/useAvailableExtensionPoints";
@@ -30,7 +32,6 @@ import { reportEvent } from "@/telemetry/events";
 import { useToasts } from "react-toast-notifications";
 import reportError from "@/telemetry/reportError";
 import { getCurrentURL, thisTab } from "@/devTools/utils";
-import styles from "./GenericInsertPane.module.scss";
 import {
   showActionPanel,
   updateDynamicElement,

src/devTools/editor/sidebar/Footer.tsx

@@ -15,11 +15,12 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./Footer.module.scss";
+
 import React, { useContext } from "react";
 import { useGetAuthQuery } from "@/services/api";
 import { DevToolsContext } from "@/devTools/context";
 import BeatLoader from "react-spinners/BeatLoader";
-import styles from "./Footer.module.scss";
 
 const Footer: React.FunctionComponent = () => {
   const {

src/devTools/editor/sidebar/InstalledEntry.tsx

@@ -16,6 +16,7 @@
  */
 
 import styles from "./Entry.module.scss";
+
 import React, { useCallback } from "react";
 import { IExtension, UUID } from "@/core";
 import { useDispatch } from "react-redux";

src/devTools/editor/sidebar/Sidebar.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./Sidebar.module.scss";
+
 import browser from "webextension-polyfill";
 import React, { FormEvent, useContext, useMemo, useState } from "react";
 import { FormState } from "@/devTools/editor/slices/editorSlice";
@@ -41,7 +43,6 @@ import DynamicEntry from "@/devTools/editor/sidebar/DynamicEntry";
 import { isExtension } from "@/devTools/editor/sidebar/common";
 import useAddElement from "@/devTools/editor/hooks/useAddElement";
 import Footer from "@/devTools/editor/sidebar/Footer";
-import styles from "./Sidebar.module.scss";
 import {
   faAngleDoubleLeft,
   faAngleDoubleRight,

src/devTools/editor/tabs/blueprintOptionsTab/BlueprintOptionsTab.tsx

@@ -15,6 +15,9 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./BlueprintOptionsTab.module.scss";
+import dataPanelStyles from "@/devTools/editor/tabs/dataPanelTabs.module.scss";
+
 import { useFormikContext } from "formik";
 import React, { useMemo, useState } from "react";
 import { Alert, Col, Container, Nav, Row, Tab } from "react-bootstrap";
@@ -33,8 +36,6 @@ import { useGetRecipesQuery } from "@/services/api";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faExclamationTriangle } from "@fortawesome/free-solid-svg-icons";
 import cx from "classnames";
-import styles from "./BlueprintOptionsTab.module.scss";
-import dataPanelStyles from "@/devTools/editor/tabs/dataPanelTabs.module.scss";
 
 const fieldTypes = FIELD_TYPE_OPTIONS.filter(
   (type) => !["File", "Image crop"].includes(type.label)

src/devTools/editor/tabs/editTab/UpgradedToApiV3.tsx

@@ -15,14 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./UpgradedToApiV3.module.scss";
+
 import React from "react";
 import { Alert } from "react-bootstrap";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
   faExclamationCircle,
   faTimes,
 } from "@fortawesome/free-solid-svg-icons";
-import styles from "./UpgradedToApiV3.module.scss";
 import { useDispatch, useSelector } from "react-redux";
 import { RootState } from "@/devTools/store";
 import { actions } from "@/devTools/editor/slices/editorSlice";

src/devTools/editor/tabs/editTab/editorNodeConfigPanel/EditorNodeConfigPanel.tsx

@@ -15,6 +15,8 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./EditorNodeConfigPanel.module.scss";
+
 import React, { useMemo } from "react";
 import { Col, Row } from "react-bootstrap";
 import { RegistryId } from "@/core";
@@ -24,7 +26,6 @@ import { useAsyncState } from "@/hooks/common";
 import blockRegistry from "@/blocks/registry";
 import { getType } from "@/blocks/util";
 import { showOutputKey } from "@/devTools/editor/tabs/editTab/editHelpers";
-import styles from "./EditorNodeConfigPanel.module.scss";
 import PopoverInfoLabel from "@/components/form/popoverInfoLabel/PopoverInfoLabel";
 import KeyNameWidget from "@/components/form/widgets/KeyNameWidget";
 

src/devTools/editor/tabs/effect/AdvancedLinks.tsx

@@ -15,14 +15,15 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import styles from "./AdvancedLinks.module.scss";
+
 import { BlockIf, BlockWindow } from "@/blocks/types";
 import { TemplateEngine } from "@/core";
 import { joinName } from "@/utils";
 import { useField } from "formik";
 import { partial } from "lodash";
 import React, { MutableRefObject } from "react";
 import { Button } from "react-bootstrap";
-import styles from "./AdvancedLinks.module.scss";
 import { isExpression } from "@/runtime/mapArgs";
 
 export const DEFAULT_TEMPLATE_ENGINE_VALUE: TemplateEngine = "mustache";

src/ephemeralForm.tsx

@@ -15,14 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+import "bootstrap/dist/css/bootstrap.min.css";
+import "react-image-crop/dist/ReactCrop.css";
+import "@/ephemeralForm.scss";
+
 import "@/extensionContext";
 
 import React from "react";
 import { render } from "react-dom";
 import EphemeralForm from "@/blocks/transformers/ephemeralForm/EphemeralForm";
 
-import "bootstrap/dist/css/bootstrap.min.css";
-import "react-image-crop/dist/ReactCrop.css";
-import "@/ephemeralForm.scss";
-
 render(<EphemeralForm />, document.querySelector("#container"));