v1.0.6

2026-07-28 10:57:30 +02:00
parent e080a6e061
commit 5eea77346a
17 changed files with 1149 additions and 1519 deletions
@@ -2,9 +2,10 @@

 All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/).

-## [1.0.6] - 2026-06-XX
+## [1.0.6] - 2026-06-28

 ### Added
+- WebUI version is now displayed when hovering over the logo.

 ### Changed

@@ -4,7 +4,7 @@
 <head>
  <meta charset="UTF-8" />
  <base href="/" />
-  <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+  <link rel="icon" type="image/x-icon" href="favicon.ico" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Portal</title>
 </head>
@@ -16,55 +16,55 @@
    "format:check": "prettier --check src/"
  },
  "dependencies": {
-    "@radix-ui/react-alert-dialog": "^1.1.15",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-scroll-area": "^1.2.10",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.2.6",
-    "@radix-ui/react-tabs": "^1.1.13",
-    "@radix-ui/react-tooltip": "^1.2.8",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-tooltip": "^1.2.16",
    "@types/qrcode": "^1.5.6",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "cmdk": "^1.1.1",
-    "i18next": "^26.0.4",
-    "lucide-react": "^1.8.0",
-    "otpauth": "^9.5.0",
+    "i18next": "^26.3.6",
+    "lucide-react": "^1.27.0",
+    "otpauth": "^9.5.1",
    "qrcode": "^1.5.4",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-i18next": "^17.0.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-i18next": "^17.0.11",
    "react-markdown": "^10.1.0",
-    "react-router-dom": "^7.14.0",
-    "recharts": "^3.8.1",
-    "tailwind-merge": "^3.5.0",
-    "zustand": "^5.0.12"
+    "react-router-dom": "^7.18.1",
+    "recharts": "^3.10.1",
+    "tailwind-merge": "^3.6.0",
+    "zustand": "^5.0.14"
  },
  "devDependencies": {
-    "@eslint/js": "^9.39.4",
-    "@tailwindcss/vite": "^4.2.2",
-    "@types/node": "^24.12.2",
-    "@types/react": "^19.2.14",
+    "@eslint/js": "^10.0.1",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.1.2",
+    "@types/react": "^19.2.17",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.1",
-    "eslint": "^9.39.4",
+    "@vitejs/plugin-react": "^6.0.4",
+    "eslint": "^10.8.0",
    "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
-    "globals": "^17.4.0",
-    "happy-dom": "^20.9.0",
-    "prettier": "^3.8.2",
-    "tailwindcss": "^4.2.2",
-    "typescript": "~6.0.2",
-    "typescript-eslint": "^8.58.0",
-    "vite": "^8.0.4",
-    "vitest": "^4.1.4"
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "globals": "^17.8.0",
+    "happy-dom": "^20.11.1",
+    "prettier": "^3.9.6",
+    "tailwindcss": "^4.3.3",
+    "typescript": "~6.0.3",
+    "typescript-eslint": "^8.65.0",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10"
  }
 }
@@ -88,9 +88,9 @@ export function BootstrapWizard() {
    const { obj, sch } = resolved;

    const ctrl = new AbortController();
-    setLoading(true);

    (async () => {
+      setLoading(true);
      try {
        const accountId = getAccountId(obj.objectName);
        const responses = await jmapGet(obj.objectName, accountId, ['singleton'], fetchProperties, ctrl.signal);
@@ -4,8 +4,9 @@
 * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
 */

-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useBufferedValue } from '@/hooks/useBufferedValue';

 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
@@ -21,11 +22,7 @@ function BufferedExprInput({
  React.InputHTMLAttributes<HTMLInputElement>,
  'onChange' | 'value'
 >) {
-  const [local, setLocal] = useState(value);
-
-  useEffect(() => {
-    setLocal(value);
-  }, [value]);
+  const [local, setLocal] = useBufferedValue(value);

  const commit = () => {
    if (local !== value) onCommit(local);
@@ -5,6 +5,7 @@
 */

 import { useState, useEffect, useCallback, useMemo } from 'react';
+import { flushSync } from 'react-dom';
 import { useNavigate, useBlocker } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { Button } from '@/components/ui/button';
@@ -166,11 +167,11 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
    return Array.from(set);
  }, [schema, resolved, viewName]);

-  useEffect(() => {
-    if (!schema || !resolved) return;
-    const { obj, sch } = resolved;
-
-    if (isCreate) {
+  const [prevCreateInitKey, setPrevCreateInitKey] = useState<typeof resolved | undefined>(undefined);
+  if (isCreate && schema && resolved) {
+    if (resolved !== prevCreateInitKey) {
+      setPrevCreateInitKey(resolved);
+      const { obj, sch } = resolved;
      const staticFilters = resolved.list?.filtersStatic;
      if (sch.type === 'multiple') {
        const variantFromFilter = typeof staticFilters?.['@type'] === 'string' ? staticFilters['@type'] : undefined;
@@ -184,13 +185,19 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
        setFormData(defaults);
        setOriginalData(defaults);
      }
-      return;
    }
+  } else if (prevCreateInitKey !== undefined) {
+    setPrevCreateInitKey(undefined);
+  }
+
+  useEffect(() => {
+    if (!schema || !resolved || isCreate) return;
+    const { obj, sch } = resolved;

    const ctrl = new AbortController();
-    setLoading(true);

    (async () => {
+      setLoading(true);
      try {
        const accountId = getAccountId(obj.objectName);
        const ids = isSingleton ? ['singleton'] : [objectId];
@@ -251,13 +258,14 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {

  const blocker = useBlocker(isDirty && !saving);

-  const [pendingNavAfterCreate, setPendingNavAfterCreate] = useState(false);
-  useEffect(() => {
-    if (!pendingNavAfterCreate) return;
-    setPendingNavAfterCreate(false);
+  const navigateAfterCreate = useCallback(() => {
+    flushSync(() => {
+      setOriginalData({ ...formData });
+      setServerCreatedProps(null);
+    });
    const section = viewToSection[viewName] ?? '';
    navigate(`/${section}/${viewName}`);
-  }, [pendingNavAfterCreate, viewName, viewToSection, navigate]);
+  }, [formData, viewToSection, viewName, navigate]);

  const handleFieldChange = useCallback((fieldName: string, value: unknown) => {
    setFormData((prev) => ({ ...prev, [fieldName]: value }));
@@ -928,9 +936,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
        open={serverCreatedProps !== null && createdObjectId !== null}
        onOpenChange={(open) => {
          if (!open) {
-            setOriginalData({ ...formData });
-            setServerCreatedProps(null);
-            setPendingNavAfterCreate(true);
+            navigateAfterCreate();
          }
        }}
      >
@@ -963,15 +969,7 @@ export function DynamicForm({ viewName, objectId }: DynamicFormProps) {
              })()}
          </div>
          <DialogFooter>
-            <Button
-              onClick={() => {
-                setOriginalData({ ...formData });
-                setServerCreatedProps(null);
-                setPendingNavAfterCreate(true);
-              }}
-            >
-              {t('common.continue', 'Continue')}
-            </Button>
+            <Button onClick={navigateAfterCreate}>{t('common.continue', 'Continue')}</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
@@ -6,6 +6,7 @@

 import { useState, useEffect, type KeyboardEvent } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useBufferedValue, useResetOnChange } from '@/hooks/useBufferedValue';
 import ReactMarkdown from 'react-markdown';

 import { Input } from '@/components/ui/input';
@@ -243,11 +244,7 @@ interface BufferedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
 }

 function BufferedInput({ value, onCommit, onBlur, onKeyDown, ...rest }: BufferedInputProps) {
-  const [local, setLocal] = useState(value);
-
-  useEffect(() => {
-    setLocal(value);
-  }, [value]);
+  const [local, setLocal] = useBufferedValue(value);

  const commit = () => {
    if (local !== value) onCommit(local);
@@ -278,11 +275,7 @@ interface BufferedTextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTe
 }

 function BufferedTextarea({ value, onCommit, onBlur, ...rest }: BufferedTextareaProps) {
-  const [local, setLocal] = useState(value);
-
-  useEffect(() => {
-    setLocal(value);
-  }, [value]);
+  const [local, setLocal] = useBufferedValue(value);

  return (
    <Textarea
@@ -463,8 +456,7 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
  const [localValue, setLocalValue] = useState(() => (value === SECRET_MASK || value === '' ? '' : value));
  const [isMasked, setIsMasked] = useState(() => value === SECRET_MASK);

-  /* eslint-disable react-hooks/set-state-in-effect */
-  useEffect(() => {
+  useResetOnChange(value, () => {
    if (value === SECRET_MASK || value === '') {
      setLocalValue('');
      setIsMasked(value === SECRET_MASK);
@@ -472,8 +464,7 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
      setLocalValue(value);
      setIsMasked(false);
    }
-  }, [value]);
-  /* eslint-enable react-hooks/set-state-in-effect */
+  });

  const handleLocalChange = (v: string) => {
    setLocalValue(v);
@@ -513,6 +504,10 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
          minLength={minLength}
          maxLength={maxLength}
          rows={4}
+          autoComplete="off"
+          data-1p-ignore
+          data-lpignore="true"
+          data-bwignore
          className={visible ? '' : 'tracking-widest'}
          style={visible ? undefined : ({ WebkitTextSecurity: 'disc' } as React.CSSProperties)}
        />
@@ -535,6 +530,10 @@ function SecretInput({ value, onChange, readOnly, placeholder, minLength, maxLen
        placeholder={displayPlaceholder}
        minLength={minLength}
        maxLength={maxLength}
+        autoComplete="off"
+        data-1p-ignore
+        data-lpignore="true"
+        data-bwignore
        className="flex-1"
      />
      {toggleBtn}
@@ -607,13 +606,7 @@ function BufferedNumberInput({
  disabled,
  onCommit,
 }: BufferedNumberInputProps) {
-  const [local, setLocal] = useState<string>(value != null ? String(value) : '');
-
-  /* eslint-disable react-hooks/set-state-in-effect */
-  useEffect(() => {
-    setLocal(value != null ? String(value) : '');
-  }, [value]);
-  /* eslint-enable react-hooks/set-state-in-effect */
+  const [local, setLocal] = useBufferedValue(value, (v) => (v != null ? String(v) : ''));

  const commit = () => {
    if (local === '') {
@@ -666,13 +659,11 @@ function SizeInputEditable({ value, onChange, nullable }: Omit<SizeInputProps, '
  const [unit, setUnit] = useState(initHuman.unit);
  const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));

-  /* eslint-disable react-hooks/set-state-in-effect */
-  useEffect(() => {
+  useResetOnChange(value, () => {
    const h = bytesToHuman(typeof value === 'number' ? value : 0);
    setUnit(h.unit);
    setLocalStr(value == null ? '' : String(h.value));
-  }, [value]);
-  /* eslint-enable react-hooks/set-state-in-effect */
+  });

  const commit = () => {
    if (localStr === '') {
@@ -771,13 +762,11 @@ function DurationInputEditable({ value, onChange, nullable }: Omit<DurationInput
  const [unit, setUnit] = useState(initHuman.unit);
  const [localStr, setLocalStr] = useState<string>(isNull ? '' : String(initHuman.value));

-  /* eslint-disable react-hooks/set-state-in-effect */
-  useEffect(() => {
+  useResetOnChange(value, () => {
    const h = msToHuman(typeof value === 'number' ? value : 0);
    setUnit(h.unit);
    setLocalStr(value == null ? '' : String(h.value));
-  }, [value]);
-  /* eslint-enable react-hooks/set-state-in-effect */
+  });

  const commit = () => {
    if (localStr === '') {
@@ -862,13 +851,7 @@ function DateTimeField({ value, onChange, readOnly, nullable }: DateTimeFieldPro
    return new Date(local).toISOString();
  };

-  const [local, setLocal] = useState(() => toLocal(strValue));
-
-  /* eslint-disable react-hooks/set-state-in-effect */
-  useEffect(() => {
-    setLocal(toLocal(strValue));
-  }, [strValue]);
-  /* eslint-enable react-hooks/set-state-in-effect */
+  const [local, setLocal] = useBufferedValue(strValue, toLocal);

  const commit = () => {
    const iso = toIso(local);
@@ -1005,9 +988,9 @@ function BlobField({ value, onChange, readOnly }: BlobFieldProps) {
    if (!blobId || loaded) return;

    let cancelled = false;
-    setLoading(true);

    (async () => {
+      setLoading(true);
      try {
        const accountId = getAccountId('x:Blob');
        const responses = await jmapGet('Blob', accountId, [blobId], ['data:asText']);
@@ -1253,12 +1236,8 @@ function RateField({ value, onChange, readOnly, nullable }: RateFieldProps) {
  const [localCount, setLocalCount] = useState(String(count));
  const [localPeriod, setLocalPeriod] = useState(String(human.value));

-  useEffect(() => {
-    setLocalCount(String(count));
-  }, [count]);
-  useEffect(() => {
-    setLocalPeriod(String(human.value));
-  }, [human.value]);
+  useResetOnChange(count, () => setLocalCount(String(count)));
+  useResetOnChange(human.value, () => setLocalPeriod(String(human.value)));

  const commitCount = () => {
    const n = parseInt(localCount, 10);
@@ -21,6 +21,7 @@ import {
  DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
 import Logo from '@/components/common/Logo';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { EnterpriseUpsell } from '@/components/common/EnterpriseUpsell';
 import { findFirstAccessibleLinkInLayout, findFirstVisibleLinkInLayout, visibleLayouts } from '@/lib/layout';
 import { useUIStore } from '@/stores/uiStore';
@@ -66,9 +67,18 @@ export function TopBar() {
        <Menu className="h-4 w-4" />
      </Button>

-      <Link to="/" className="flex shrink-0 items-center">
-        <Logo />
-      </Link>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Link to="/" className="flex shrink-0 items-center">
+              <Logo />
+            </Link>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">
+            {t('version.label', 'Stalwart WebUI v{{version}}', { version: __APP_VERSION__ })}
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>

      <div className="hidden min-w-0 flex-1 items-center justify-center px-4 md:flex">
        <GlobalSearch />
@@ -52,6 +52,7 @@ import { toast } from '@/hooks/use-toast';
 import { friendlySetError } from '@/lib/jmapErrors';
 import { coerceLabel } from '@/lib/objectOptions';
 import { buildJmapFilter } from '@/lib/listFilter';
+import { useResetOnChange } from '@/hooks/useBufferedValue';

 import { useSchemaStore } from '@/stores/schemaStore';
 import { useAuthStore } from '@/stores/authStore';
@@ -305,6 +306,24 @@ interface SortState {
  ascending: boolean;
 }

+function readUrlFilters(): Record<string, string> {
+  const params = new URLSearchParams(window.location.search);
+  const filters: Record<string, string> = {};
+  params.forEach((value, key) => {
+    if (key.startsWith('f.')) {
+      filters[key.slice(2)] = value;
+    }
+  });
+  return filters;
+}
+
+function readUrlSort(): SortState | null {
+  const params = new URLSearchParams(window.location.search);
+  const sortParam = params.get('sort');
+  const sortDir = params.get('sortDir');
+  return sortParam ? { field: sortParam, ascending: sortDir !== 'desc' } : null;
+}
+
 interface ConfirmAction {
  label: string;
  onConfirm: () => void;
@@ -352,15 +371,15 @@ export function DynamicList({ viewName }: DynamicListProps) {
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [selectAllMode, setSelectAllMode] = useState(false);

-  const [filtersOpen, setFiltersOpen] = useState(false);
-  const [filterValues, setFilterValues] = useState<Record<string, string>>({});
-  const [appliedFilters, setAppliedFilters] = useState<Record<string, string>>({});
+  const [filtersOpen, setFiltersOpen] = useState(() => Object.keys(readUrlFilters()).length > 0);
+  const [filterValues, setFilterValues] = useState<Record<string, string>>(readUrlFilters);
+  const [appliedFilters, setAppliedFilters] = useState<Record<string, string>>(readUrlFilters);

-  const [sort, setSort] = useState<SortState | null>(null);
+  const [sort, setSort] = useState<SortState | null>(readUrlSort);

  const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null);

-  useEffect(() => {
+  useResetOnChange(viewName, () => {
    setItems([]);
    setTotal(null);
    setAnchorStack([]);
@@ -369,30 +388,22 @@ export function DynamicList({ viewName }: DynamicListProps) {
    setSelectAllMode(false);
    setError(null);

-    const params = new URLSearchParams(window.location.search);
-    const initialFilters: Record<string, string> = {};
-    params.forEach((value, key) => {
-      if (key.startsWith('f.')) {
-        initialFilters[key.slice(2)] = value;
-      }
-    });
+    const initialFilters = readUrlFilters();
    setFilterValues(initialFilters);
    setAppliedFilters(initialFilters);
    setFiltersOpen(Object.keys(initialFilters).length > 0);
+    setSort(readUrlSort());
+  });

-    const sortParam = params.get('sort');
-    const sortDir = params.get('sortDir');
-    setSort(sortParam ? { field: sortParam, ascending: sortDir !== 'desc' } : null);
-  }, [viewName]);
-
+  const objectName = resolved?.obj.objectName;
  const buildFilter = useCallback((): Record<string, unknown> => {
    return buildJmapFilter({
      appliedFilters,
      filters: resolved?.list?.filters,
      filtersStatic: resolved?.list?.filtersStatic,
-      isXPrefixed: resolved?.obj.objectName.startsWith('x:') ?? false,
+      isXPrefixed: objectName?.startsWith('x:') ?? false,
    });
-  }, [appliedFilters, resolved?.list, resolved?.obj.objectName]);
+  }, [appliedFilters, resolved?.list, objectName]);

  const buildSort = useCallback((): Record<string, unknown>[] | undefined => {
    if (!sort) return undefined;
@@ -464,6 +475,7 @@ export function DynamicList({ viewName }: DynamicListProps) {

  useEffect(() => {
    if (!resolved?.list) return;
+    // eslint-disable-next-line react-hooks/set-state-in-effect
    setAnchorStack([]);
    setCurrentAnchor(null);
    fetchData(null);
@@ -0,0 +1,28 @@
+/*
+ * SPDX-FileCopyrightText: 2020 Stalwart Labs LLC <hello@stalw.art>
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-SEL
+ */
+
+import { useState, type Dispatch, type SetStateAction } from 'react';
+
+export function useBufferedValue<T, S = T>(
+  value: T,
+  transform: (v: T) => S = (v) => v as unknown as S,
+): [S, Dispatch<SetStateAction<S>>] {
+  const [prev, setPrev] = useState(value);
+  const [local, setLocal] = useState<S>(() => transform(value));
+  if (!Object.is(value, prev)) {
+    setPrev(value);
+    setLocal(transform(value));
+  }
+  return [local, setLocal];
+}
+
+export function useResetOnChange<K>(key: K, reset: () => void): void {
+  const [prev, setPrev] = useState(key);
+  if (!Object.is(key, prev)) {
+    setPrev(key);
+    reset();
+  }
+}
@@ -294,6 +294,9 @@
    "stalwartAlt": "Stalwart Logo"
  },
  "logout": "Logout",
+  "version": {
+    "label": "Stalwart WebUI v{{version}}"
+  },
  "oauth": {
    "backToLogin": "Back to login",
    "discoveryFailed": "Discovery failed for \"{{username}}\": {{status}} {{statusText}}",
@@ -97,7 +97,7 @@ async function fetchObjectList(viewOrObjectName: string, schema: Schema): Promis
  const accountId = getAccountId(objectName);
  const displayProp = getDisplayProperty(schema, viewOrObjectName);

-  let items: Array<Record<string, unknown>> = [];
+  let items: Array<Record<string, unknown>>;
  try {
    const result = await jmapQueryAllAndGet(
      objectName,
@@ -18,3 +18,5 @@ interface ImportMetaEnv {
 interface ImportMeta {
  readonly env: ImportMetaEnv;
 }
+
+declare const __APP_VERSION__: string;
@@ -10,6 +10,7 @@
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
@@ -3,9 +3,13 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tailwindcss from '@tailwindcss/vite'
 import path from 'path'
+import { version } from './package.json'

 export default defineConfig({
  base: './',
+  define: {
+    __APP_VERSION__: JSON.stringify(version),
+  },
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {