dumi 2.0.12 → 2.0.14

package/dist/assetParsers/atom.js

@@ -25,6 +25,7 @@ __export(atom_exports, {
   default: () => atom_default
 });
 module.exports = __toCommonJS(atom_exports);
+var import_utils = require("../utils");
 var import_parser = require("dumi-afx-deps/compiled/parser");
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
@@ -34,12 +35,13 @@ var AtomAssetsParser = class {
     this.unresolvedFiles = [];
     this.watcher = null;
     this.cbs = [];
+    const absEntryFile = import_path.default.resolve(opts.resolveDir, opts.entryFile);
     this.resolveDir = opts.resolveDir;
     this.resolveFilter = opts.resolveFilter || (() => true);
-    this.entryDir = import_path.default.relative(opts.resolveDir, import_path.default.dirname(opts.entryFile));
+    this.entryDir = import_path.default.relative(opts.resolveDir, import_path.default.dirname(absEntryFile));
     this.parser = new import_parser.SchemaParser({
-      entryPath: opts.entryFile,
-      basePath: opts.resolveDir,
+      entryPath: absEntryFile,
+      basePath: (0, import_utils.getProjectRoot)(opts.resolveDir),
       unPkgHost: opts.unpkgHost ?? "https://unpkg.com"
     });
   }

package/dist/client/theme-api/AtomRenderer.d.ts

@@ -1,8 +1,13 @@
 import { AtomAsset, ExamplePresetAsset } from 'dumi-assets-types';
+import type { TypeMap } from 'dumi-assets-types/typings/atom/props/types';
 import { type FC } from 'react';
 interface IAtomRendererProps {
     type: AtomAsset['type'];
     value: ExamplePresetAsset['value'];
+    processor?: typeof builtInProcessor;
 }
+declare type Entity = TypeMap['element'] | TypeMap['function'] | TypeMap['dom'];
+declare type Exports = Record<string, any>;
+declare function builtInProcessor(entity: Entity, entryExports: Exports): any;
 export declare const AtomRenderer: FC<IAtomRendererProps>;
 export {};

package/dist/client/theme-api/AtomRenderer.js

@@ -88,8 +88,12 @@ export var AtomRenderer = function AtomRenderer(props) {
   switch (props.type) {
     case 'COMPONENT':
       return translatePresetToReact(props.value, function (entity) {
-        // TODO: support custom processor
-        return builtInProcessor(entity, entryExports);
+        var _props$processor, _props$processor2;
+
+        return (// support custom processor
+          (_props$processor = (_props$processor2 = props.processor) === null || _props$processor2 === void 0 ? void 0 : _props$processor2.call(props, entity, entryExports)) !== null && _props$processor !== void 0 ? _props$processor : // fallback to built-in processor
+          builtInProcessor(entity, entryExports)
+        );
       });
 
     default:

package/dist/client/theme-api/useNavData.d.ts

@@ -3,6 +3,4 @@
  */
 export declare const useNavData: () => (import("./types").INavItem & {
     children?: import("./types").INavItem[] | undefined;
-})[] | Record<string, (import("./types").INavItem & {
-    children?: import("./types").INavItem[] | undefined;
-})[]>;
+})[];

package/dist/client/theme-api/useNavData.js

@@ -13,10 +13,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { useFullSidebarData, useLocale, useSiteData } from 'dumi';
 import { useState } from 'react';
 import { pickRouteSortMeta, useLocaleDocRoutes, useRouteDataComparer } from "./utils";
+
 /**
  * hook for get nav data
  */
-
 export var useNavData = function useNavData() {
   var locale = useLocale();
   var routes = useLocaleDocRoutes();

package/dist/features/derivative.js

@@ -27,7 +27,6 @@ __export(derivative_exports, {
 });
 module.exports = __toCommonJS(derivative_exports);
 var import_constants = require("../constants");
-var import_bundler_utils = require("@umijs/bundler-utils");
 var import_assert = __toESM(require("assert"));
 var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
@@ -45,30 +44,7 @@ function safeExcludeInMFSU(api, excludes) {
     });
   }
 }
-function getFilesByGlob(globExp, dir) {
-  return import_plugin_utils.glob.sync(globExp, { cwd: dir }).map((file) => (0, import_plugin_utils.winPath)(import_path.default.join(dir, file)));
-}
 var derivative_default = (api) => {
-  const dumiAbsDir = import_path.default.join(api.cwd, import_constants.LOCAL_DUMI_DIR);
-  const strategies = {
-    async appJS() {
-      const [appJS] = getFilesByGlob("app.{js,jsx,ts,tsx}", dumiAbsDir);
-      if (appJS) {
-        const [, exports] = await (0, import_bundler_utils.parseModule)({
-          path: appJS,
-          content: import_fs.default.readFileSync(appJS, "utf-8")
-        });
-        return {
-          path: appJS,
-          exports
-        };
-      }
-      return null;
-    },
-    globalCSS: getFilesByGlob.bind(null, "global.{css,less,scss,sass}", dumiAbsDir),
-    globalJS: getFilesByGlob.bind(null, "global.{js,jsx,ts,tsx}", dumiAbsDir),
-    overridesCSS: getFilesByGlob.bind(null, "overrides.{css,less,scss,sass}", dumiAbsDir)
-  };
   api.describe({ key: "dumi:derivative" });
   api.onCheck(() => {
     var _a, _b;
@@ -90,6 +66,10 @@ var derivative_default = (api) => {
         memo.mfsu = false;
       } else {
         memo.mfsu.strategy = "normal";
+        memo.mfsu.shared = {
+          react: { singleton: true },
+          "react-dom": { singleton: true }
+        };
         import_constants.CLIENT_DEPS.forEach((pkg) => {
           memo.alias ?? (memo.alias = {});
           memo.alias[pkg] = (0, import_plugin_utils.winPath)(import_path.default.dirname(require.resolve(`${pkg}/package.json`)));
@@ -109,21 +89,15 @@ var derivative_default = (api) => {
     memo.exportStatic || (memo.exportStatic = {});
     return memo;
   });
-  api.modifyAppData(async (memo) => {
-    for (const [key, strategy] of Object.entries(strategies)) {
-      memo[key] = await strategy();
+  api.modifyConfig((memo) => {
+    var _a;
+    if ((_a = api.userConfig.alias) == null ? void 0 : _a["@"]) {
+      memo["@"] = api.userConfig.alias["@"];
+    } else {
+      memo["@"] = (0, import_plugin_utils.winPath)([import_path.default.join(api.cwd, "src"), api.cwd].find(import_fs.default.existsSync));
     }
     return memo;
   });
-  api.register({
-    key: "onGenerateFiles",
-    stage: -Infinity,
-    async fn() {
-      for (const [key, strategy] of Object.entries(strategies)) {
-        api.appData[key] = await strategy();
-      }
-    }
-  });
   api.register({
     key: "onGenerateFiles",
     stage: Infinity,

package/dist/features/parser.js

@@ -28,6 +28,7 @@ module.exports = __toCommonJS(parser_exports);
 var import_assert = __toESM(require("assert"));
 var import_meta = require("./meta");
 var parser_default = (api) => {
+  let prevData;
   const writeAtomsMetaFile = (data) => {
     api.writeTmpFile({
       noPluginDir: true,
@@ -40,7 +41,8 @@ var parser_default = (api) => {
     enableBy: api.EnableBy.config,
     config: {
       schema: (Joi) => Joi.object({
-        unpkgHost: Joi.string().uri()
+        unpkgHost: Joi.string().uri().optional(),
+        resolveFilter: Joi.function().optional()
       })
     }
   });
@@ -60,14 +62,19 @@ var parser_default = (api) => {
       resolveFilter: api.config.apiParser.resolveFilter
     });
     if (api.env === "development") {
-      api.service.atomParser.watch(writeAtomsMetaFile);
+      api.service.atomParser.watch((data) => {
+        prevData = data;
+        writeAtomsMetaFile(prevData);
+      });
     }
   });
-  if (api.env === "production") {
-    api.onGenerateFiles(async () => {
+  api.onGenerateFiles(async () => {
+    if (api.env === "production") {
       writeAtomsMetaFile(await api.service.atomParser.parse());
-    });
-  }
+    } else if (prevData) {
+      writeAtomsMetaFile(prevData);
+    }
+  });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});

package/dist/service/service.d.ts

@@ -3,7 +3,7 @@ export declare class DumiService extends Service {
     constructor();
     getPaths(): Promise<{
         cwd: string;
-        absSrcPath: any;
+        absSrcPath: string;
         absPagesPath: string;
         absApiRoutesPath: string;
         absTmpPath: string;

package/dist/service/service.js

@@ -38,13 +38,13 @@ var DumiService = class extends import_umi.Service {
     });
   }
   async getPaths() {
-    var _a;
-    const cwd = this.cwd;
-    const absSrcPath = ((_a = this.userConfig.alias) == null ? void 0 : _a["@"]) ?? cwd;
-    const absPagesPath = winJoin(cwd, `.${import_constants.FRAMEWORK_NAME}`, "pages");
-    const absApiRoutesPath = winJoin(absSrcPath, "api");
+    const { cwd } = this;
     const tmp = this.env === import_core.Env.development ? `tmp` : `tmp-${this.env}`;
-    const absTmpPath = winJoin(cwd, `.${import_constants.FRAMEWORK_NAME}`, tmp);
+    const absFWPath = winJoin(cwd, `.${import_constants.FRAMEWORK_NAME}`);
+    const absSrcPath = absFWPath;
+    const absPagesPath = winJoin(absSrcPath, "pages");
+    const absApiRoutesPath = winJoin(absSrcPath, "api");
+    const absTmpPath = winJoin(absSrcPath, tmp);
     const absNodeModulesPath = winJoin(cwd, "node_modules");
     const absOutputPath = winJoin(cwd, "dist");
     return {

package/dist/techStacks/react.js

@@ -42,6 +42,9 @@ var ReactDemoVisitor = class extends import_Visitor.default {
       argument: n.expression
     };
   }
+  visitTsType(n) {
+    return n;
+  }
 };
 var ReactTechStack = class {
   constructor() {

package/dist/utils.d.ts

@@ -30,4 +30,8 @@ export declare function getCache(ns: string): typeof caches['0'];
  * try to get father config
  */
 export declare function tryFatherBuildConfigs(cwd: string): Promise<any[]>;
+/**
+ * get root dir for monorepo project
+ */
+export declare function getProjectRoot(cwd: string): string;
 export {};

package/dist/utils.js

@@ -25,12 +25,14 @@ __export(utils_exports, {
   getCache: () => getCache,
   getFileContentByRegExp: () => getFileContentByRegExp,
   getFileRangeLines: () => getFileRangeLines,
+  getProjectRoot: () => getProjectRoot,
   getRoutePathFromFsPath: () => getRoutePathFromFsPath,
   parseCodeFrontmatter: () => parseCodeFrontmatter,
   tryFatherBuildConfigs: () => tryFatherBuildConfigs
 });
 module.exports = __toCommonJS(utils_exports);
 var import_file_system_cache = __toESM(require("file-system-cache"));
+var import_fs = __toESM(require("fs"));
 var import_js_yaml = __toESM(require("js-yaml"));
 var import_path = __toESM(require("path"));
 var import_plugin_utils = require("umi/plugin-utils");
@@ -102,11 +104,25 @@ async function tryFatherBuildConfigs(cwd) {
     process.env.APP_ROOT = APP_ROOT;
   return configs;
 }
+function getProjectRoot(cwd) {
+  const splittedCwd = (0, import_plugin_utils.winPath)(cwd).split("/");
+  for (let level = -1; level >= -3; level -= 1) {
+    const rootCwd = splittedCwd.slice(0, level).join("/");
+    if (!rootCwd)
+      break;
+    const pkgPath = import_path.default.join(rootCwd, "package.json");
+    if (import_fs.default.existsSync(pkgPath) && (["pnpm-workspace.yaml", "lerna.json"].some((f) => import_fs.default.existsSync(import_path.default.join(rootCwd, f))) || require(pkgPath).workspace)) {
+      return (0, import_plugin_utils.winPath)(rootCwd);
+    }
+  }
+  return (0, import_plugin_utils.winPath)(cwd);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getCache,
   getFileContentByRegExp,
   getFileRangeLines,
+  getProjectRoot,
   getRoutePathFromFsPath,
   parseCodeFrontmatter,
   tryFatherBuildConfigs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dumi",
-  "version": "2.0.12",
+  "version": "2.0.14",
   "description": "📖 Documentation Generator of React Component",
   "keywords": [
     "generator",
@@ -37,6 +37,7 @@
   "scripts": {
     "build": "father build",
     "build:deps": "node scripts/pre-bundle-worker.js && father prebundle",
+    "build:suites": "pnpm run --filter=\"./suites/**\" build",
     "custom-install": "pnpm i",
     "dev": "father dev",
     "docs:build": "node ./bin/dumi.js build",
@@ -46,7 +47,7 @@
     "lint": "npm run lint:es && npm run lint:css",
     "lint:css": "stylelint \"{src,test}/**/*.{css,less}\"",
     "lint:es": "eslint \"{src,test}/**/*.{js,jsx,ts,tsx}\"",
-    "prepare": "husky install && npm run build && node ./bin/dumi.js setup && npm run docs:sync",
+    "prepare": "husky install && npm run build && npm run build:suites && node ./bin/dumi.js setup && npm run docs:sync",
     "prepublishOnly": "npm run build",
     "test": "vitest"
   },
@@ -82,6 +83,7 @@
     "@umijs/bundler-utils": "^4.0.33",
     "@umijs/core": "^4.0.33",
     "animated-scroll-to": "^2.3.0",
+    "classnames": "2.3.2",
     "codesandbox": "^2.2.3",
     "deepmerge": "^4.2.2",
     "dumi-afx-deps": "^1.0.0-alpha.6",
@@ -141,6 +143,7 @@
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@umijs/lint": "^4.0.33",
     "@umijs/plugins": "4.0.32",
+    "dumi-theme-mobile": "workspace:*",
     "eslint": "^8.20.0",
     "father": "^4.1.0",
     "highlight-words-core": "^1.2.2",

package/theme-default/builtins/Previewer/index.js

@@ -1,5 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
+import classnames from 'classnames';
 import { useLocation } from 'dumi';
 import PreviewerActions from "dumi/theme/slots/PreviewerActions";
 import React from 'react';
@@ -12,7 +13,8 @@ var Previewer = function Previewer(props) {
   var link = "#".concat(props.asset.id);
   return /*#__PURE__*/React.createElement("div", {
     id: props.asset.id,
-    className: "dumi-default-previewer",
+    className: classnames('dumi-default-previewer', props.className),
+    style: props.style,
     "data-debug": props.debug,
     "data-active": hash === link || undefined
   }, /*#__PURE__*/React.createElement("div", {

package/theme-default/builtins/Previewer/index.less

@@ -94,9 +94,9 @@
       font-weight: 500;
       background: linear-gradient(
           to top,
-          rgb(255 255 255 / 100%),
-          rgb(255 255 255 / 100%) 50%,
-          rgb(255 255 255 / 0%)
+          rgba(255, 255, 255, 100%),
+          rgba(255, 255, 255, 100%) 50%,
+          rgba(255, 255, 255, 0%)
         )
         100%;
 
@@ -108,9 +108,11 @@
         }
 
         > strong {
+          float: inline-start;
           padding-inline-end: 8px;
           color: @c-warning;
           font-size: 12px;
+          line-height: 15px;
         }
       }
     }

package/theme-default/builtins/Table/index.less

@@ -23,15 +23,15 @@
       left: 0;
       background-image: linear-gradient(
         to right,
-        rgb(0 0 0 / 10%),
-        rgb(0 0 0 / 0%)
+        rgba(0, 0, 0, 10%),
+        rgba(0, 0, 0, 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to right,
-          rgb(0 0 0 / 50%),
-          rgb(0 0 0 / 0%)
+          rgba(0, 0, 0, 50%),
+          rgba(0, 0, 0, 0%)
         );
       }
     }
@@ -40,15 +40,15 @@
       right: 0;
       background-image: linear-gradient(
         to left,
-        rgb(0 0 0 / 10%),
-        rgb(0 0 0 / 0%)
+        rgba(0, 0, 0, 10%),
+        rgba(0, 0, 0, 0%)
       );
 
       [data-prefers-color='dark'] & {
         background-image: linear-gradient(
           to left,
-          rgb(0 0 0 / 50%),
-          rgb(0 0 0 / 0%)
+          rgba(0, 0, 0, 50%),
+          rgba(0, 0, 0, 0%)
         );
       }
     }

package/theme-default/layouts/DocLayout/index.less

@@ -18,7 +18,7 @@ body {
       right: 0;
       left: 0;
       bottom: 0;
-      background-color: rgb(0 0 0 / 50%);
+      background-color: rgba(0, 0, 0, 50%);
       transition: all 0.1s;
     }
 

package/theme-default/slots/Content/index.less

@@ -110,7 +110,7 @@
     background-color: #fff;
     border-top-left-radius: 10px;
     border-top-right-radius: 10px;
-    box-shadow: 0 8px 24px 0 rgb(0 0 0 / 5%);
+    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 5%);
 
     @media @mobile {
       max-width: initial;

package/theme-default/slots/HeadeExtra/index.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+declare const NavbarExtra: FC;
+export default NavbarExtra;

package/theme-default/slots/HeadeExtra/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+var NavbarExtra = function NavbarExtra() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+
+export default NavbarExtra;

package/theme-default/slots/Header/index.js

@@ -10,6 +10,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+import HeaderExtra from "../HeadeExtra";
 import { ReactComponent as IconClose } from '@ant-design/icons-svg/inline-svg/outlined/close.svg';
 import { ReactComponent as IconMenu } from '@ant-design/icons-svg/inline-svg/outlined/menu.svg';
 import { useRouteMeta } from 'dumi';
@@ -45,7 +46,7 @@ var Header = function Header() {
     className: "dumi-default-header-right"
   }, /*#__PURE__*/React.createElement(Navbar, null), /*#__PURE__*/React.createElement("div", {
     className: "dumi-default-header-right-aside"
-  }, /*#__PURE__*/React.createElement(SearchBar, null), /*#__PURE__*/React.createElement(LangSwitch, null), /*#__PURE__*/React.createElement(RtlSwitch, null))), /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(SearchBar, null), /*#__PURE__*/React.createElement(LangSwitch, null), /*#__PURE__*/React.createElement(RtlSwitch, null), /*#__PURE__*/React.createElement(HeaderExtra, null))), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "dumi-default-header-menu-btn",
     onClick: function onClick(ev) {

package/theme-default/slots/HeroTitle/index.less

@@ -16,7 +16,7 @@
 
   > span {
     color: transparent;
-    text-shadow: 0 10px 20px rgb(22 119 255 / 15%);
+    text-shadow: 0 10px 20px rgba(22, 119, 255, 15%);
     background: linear-gradient(30deg, #91d6ff 30%, #66a6ff);
     background-clip: text;
   }

package/theme-default/slots/Navbar/index.js

@@ -1,6 +1,7 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 import { Link, useLocation, useNavData } from 'dumi';
+import NavbarExtra from "dumi/theme/slots/NavbarExtra";
 import React from 'react';
 import "./index.less";
 
@@ -24,7 +25,7 @@ var Navbar = function Navbar() {
     }, pathname.startsWith(item.activePath || item.link) ? {
       className: 'active'
     } : {}), item.title));
-  }));
+  }), /*#__PURE__*/React.createElement(NavbarExtra, null));
 };
 
 export default Navbar;

package/theme-default/slots/NavbarExtra/index.d.ts

@@ -0,0 +1,3 @@
+import { type FC } from 'react';
+declare const NavbarExtra: FC;
+export default NavbarExtra;

package/theme-default/slots/NavbarExtra/index.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+var NavbarExtra = function NavbarExtra() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+
+export default NavbarExtra;

package/theme-default/slots/PreviewerActions/index.d.ts

@@ -6,6 +6,7 @@ export interface IPreviewerActionsProps extends IPreviewerProps {
      * disabled actions
      */
     disabledActions?: ('CSB' | 'CODEPEN' | 'STACKBLITZ' | 'EXTERNAL')[];
+    forceShowCode?: boolean;
 }
 declare const PreviewerActions: FC<IPreviewerActionsProps>;
 export default PreviewerActions;

package/theme-default/slots/PreviewerActions/index.js

@@ -62,7 +62,7 @@ var PreviewerActions = function PreviewerActions(props) {
       activeKey = _useState2[0],
       setActiveKey = _useState2[1];
 
-  var _useState3 = useState(false),
+  var _useState3 = useState(!(props !== null && props !== void 0 && props.forceShowCode)),
       _useState4 = _slicedToArray(_useState3, 2),
       showCode = _useState4[0],
       setShowCode = _useState4[1];
@@ -97,7 +97,7 @@ var PreviewerActions = function PreviewerActions(props) {
     "data-dumi-tooltip": intl.formatMessage({
       id: 'previewer.actions.separate'
     })
-  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), /*#__PURE__*/React.createElement(PreviewerActionsExtra, props), /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React.createElement(IconExternalLink, null)), /*#__PURE__*/React.createElement(PreviewerActionsExtra, props), (props === null || props === void 0 ? void 0 : props.forceShowCode) && /*#__PURE__*/React.createElement("button", {
     className: "dumi-default-previewer-action-btn",
     type: "button",
     onClick: function onClick() {

package/theme-default/slots/PreviewerActions/index.less

@@ -75,11 +75,11 @@
       overflow: hidden;
 
       &&-ping-left {
-        box-shadow: 5px 0 5px -5px rgb(0 0 0 / 10%) inset;
+        box-shadow: 5px 0 5px -5px rgba(0, 0, 0, 10%) inset;
       }
 
       &&-ping-right ~ * > .@{prefix}-tabs-nav-more {
-        box-shadow: 0 0 5px rgb(0 0 0 / 10%);
+        box-shadow: 0 0 5px rgba(0, 0, 0, 10%);
       }
     }
 

package/theme-default/slots/SearchBar/index.less

@@ -81,7 +81,7 @@
     margin-top: 18px;
     background-color: #fff;
     border-radius: 8px;
-    box-shadow: 0 4px 30px rgb(0 0 0 / 20%);
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 20%);
 
     &::before {
       content: '';
@@ -116,7 +116,7 @@
     justify-content: center;
 
     &-mask {
-      background-color: rgb(0 0 0 / 45%);
+      background-color: rgba(0, 0, 0, 45%);
       width: 100%;
       height: 100%;
     }
@@ -128,7 +128,8 @@
       width: 500px;
       padding: 12px;
       box-sizing: border-box;
-      box-shadow: inset 1px 1px 0 0 hsl(0deg 0% 100% / 50%), 0 3px 8px 0 #555a64;
+      box-shadow: inset 1px 1px 0 0 hsla(0deg, 0%, 100%, 50%),
+        0 3px 8px 0 #555a64;
       border-radius: 8px;
       max-height: calc(100% - 120px);
       display: flex;

package/theme-default/slots/Sidebar/index.less

@@ -22,7 +22,7 @@
     padding-inline-start: 32px;
     background-color: @c-site-bg;
     border-top: 1px solid @c-border-light;
-    box-shadow: 0 0 20px rgb(0 0 0 / 10%);
+    box-shadow: 0 0 20px rgba(0, 0, 0, 10%);
     transition: 0.2s all;
 
     .@{prefix}-doc-layout:not([data-mobile-sidebar-active]) & {

package/theme-default/styles/utils.less

@@ -24,7 +24,7 @@
     white-space: nowrap;
     background-color: #000;
     border-radius: 2px;
-    box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 10%);
     box-sizing: border-box;
   }
 

package/theme-default/styles/variables.less

@@ -19,3 +19,4 @@
 
 @mobile: ~'only screen and (max-width: 767px)';
 @tablet: ~'only screen and (min-width: 768px) and (max-width: 1024px)';
+@desktop: ~'only screen and (min-width: 1025px)';