@rspress/plugin-preview 1.43.11 → 2.0.0-alpha-canary-202504162001

package/dist/index.d.ts

@@ -1,6 +1,11 @@
 import type { RsbuildConfig } from '@rsbuild/core';
 import { RspressPlugin } from '@rspress/shared';
 
+declare interface CustomEntry {
+    entryCssPath: string;
+    demoPath: string;
+}
+
 declare type IframeOptions = {
     /**
      * framework in the iframe
@@ -18,6 +23,10 @@ declare type IframeOptions = {
      */
     devPort?: number;
     builderConfig?: RsbuildConfig;
+    /**
+     * custom support for other web frameworks
+     */
+    customEntry?: (meta: CustomEntry) => string;
 };
 
 export declare type Options = {

package/dist/index.js

@@ -18,12 +18,8 @@ function __webpack_require__(moduleId) {
     return module.exports;
 }
 (()=>{
-    __webpack_require__.n = function(module) {
-        var getter = module && module.__esModule ? function() {
-            return module['default'];
-        } : function() {
-            return module;
-        };
+    __webpack_require__.n = (module)=>{
+        var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
         __webpack_require__.d(getter, {
             a: getter
         });
@@ -31,7 +27,7 @@ function __webpack_require__(moduleId) {
     };
 })();
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
             enumerable: true,
             get: definition[key]
@@ -39,12 +35,10 @@ function __webpack_require__(moduleId) {
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (()=>{
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
@@ -83,7 +77,18 @@ var __webpack_exports__ = {};
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-    function generateEntry(demos, framework, position) {
+    const getLangFileExt = (lang)=>{
+        switch(lang){
+            case 'jsx':
+            case 'tsx':
+                return 'tsx';
+            case 'json':
+                return 'tsx';
+            default:
+                return lang;
+        }
+    };
+    function generateEntry(demos, framework, position, customEntry) {
         const sourceEntry = {};
         const entryCssPath = (0, external_node_path_namespaceObject.join)(staticPath, 'global-styles', 'entry.css');
         if ('follow' === position) Object.values(demos).forEach((routes)=>{
@@ -102,7 +107,10 @@ var __webpack_exports__ = {};
         import Demo from ${JSON.stringify(demoPath)};
         render(<Demo />, document.getElementById('root'));
         `;
-                const entryContent = 'react' === framework ? reactEntry : solidEntry;
+                const entryContent = customEntry ? customEntry({
+                    entryCssPath,
+                    demoPath
+                }) : 'react' === framework ? reactEntry : solidEntry;
                 (0, external_node_fs_namespaceObject.writeFileSync)(entry, entryContent);
                 sourceEntry[id] = entry;
             });
@@ -148,9 +156,9 @@ var __webpack_exports__ = {};
     const node_utils_namespaceObject = require("@rspress/shared/node-utils");
     const convert = function(test) {
         if (null == test) return ok;
-        if ('string' == typeof test) return typeFactory(test);
-        if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
         if ('function' == typeof test) return castFactory(test);
+        if ('object' == typeof test) return Array.isArray(test) ? anyFactory(test) : propsFactory(test);
+        if ('string' == typeof test) return typeFactory(test);
         throw new Error('Expected function, string, or object as test');
     };
     function anyFactory(tests) {
@@ -160,15 +168,17 @@ var __webpack_exports__ = {};
         return castFactory(any);
         function any(...parameters) {
             let index = -1;
-            while(++index < checks.length)if (checks[index].call(this, ...parameters)) return true;
+            while(++index < checks.length)if (checks[index].apply(this, parameters)) return true;
             return false;
         }
     }
     function propsFactory(check) {
+        const checkAsRecord = check;
         return castFactory(all);
         function all(node) {
+            const nodeAsRecord = node;
             let key;
-            for(key in check)if (node[key] !== check[key]) return false;
+            for(key in check)if (nodeAsRecord[key] !== checkAsRecord[key]) return false;
             return true;
         }
     }
@@ -178,28 +188,32 @@ var __webpack_exports__ = {};
             return node && node.type === check;
         }
     }
-    function castFactory(check) {
-        return assertion;
-        function assertion(node, ...parameters) {
-            return Boolean(node && 'object' == typeof node && 'type' in node && Boolean(check.call(this, node, ...parameters)));
+    function castFactory(testFunction) {
+        return check;
+        function check(value, index, parent) {
+            return Boolean(looksLikeANode(value) && testFunction.call(this, value, 'number' == typeof index ? index : void 0, parent || void 0));
         }
     }
     function ok() {
         return true;
     }
+    function looksLikeANode(value) {
+        return null !== value && 'object' == typeof value && 'type' in value;
+    }
     function color(d) {
         return '\u001B[33m' + d + '\u001B[39m';
     }
+    const empty = [];
     const CONTINUE = true;
     const EXIT = false;
     const SKIP = 'skip';
-    const visitParents = function(tree, test, visitor, reverse) {
+    function visitParents(tree, test, visitor, reverse) {
+        let check;
         if ('function' == typeof test && 'function' != typeof visitor) {
             reverse = visitor;
             visitor = test;
-            test = null;
-        }
-        const is = convert(test);
+        } else check = test;
+        const is = convert(check);
         const step = reverse ? -1 : 1;
         factory(tree, void 0, [])();
         function factory(node, index, parents) {
@@ -212,49 +226,61 @@ var __webpack_exports__ = {};
             }
             return visit;
             function visit() {
-                let result = [];
+                let result = empty;
                 let subresult;
                 let offset;
                 let grandparents;
-                if (!test || is(node, index, parents[parents.length - 1] || null)) {
+                if (!test || is(node, index, parents[parents.length - 1] || void 0)) {
                     result = toResult(visitor(node, parents));
                     if (result[0] === EXIT) return result;
                 }
-                if (node.children && result[0] !== SKIP) {
-                    offset = (reverse ? node.children.length : -1) + step;
-                    grandparents = parents.concat(node);
-                    while(offset > -1 && offset < node.children.length){
-                        subresult = factory(node.children[offset], offset, grandparents)();
-                        if (subresult[0] === EXIT) return subresult;
-                        offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
+                if ('children' in node && node.children) {
+                    const nodeAsParent = node;
+                    if (nodeAsParent.children && result[0] !== SKIP) {
+                        offset = (reverse ? nodeAsParent.children.length : -1) + step;
+                        grandparents = parents.concat(nodeAsParent);
+                        while(offset > -1 && offset < nodeAsParent.children.length){
+                            const child = nodeAsParent.children[offset];
+                            subresult = factory(child, offset, grandparents)();
+                            if (subresult[0] === EXIT) return subresult;
+                            offset = 'number' == typeof subresult[1] ? subresult[1] : offset + step;
+                        }
                     }
                 }
                 return result;
             }
         }
-    };
+    }
     function toResult(value) {
         if (Array.isArray(value)) return value;
         if ('number' == typeof value) return [
             CONTINUE,
             value
         ];
-        return [
+        return null == value ? empty : [
             value
         ];
     }
-    const lib_visit = function(tree, test, visitor, reverse) {
-        if ('function' == typeof test && 'function' != typeof visitor) {
-            reverse = visitor;
-            visitor = test;
-            test = null;
+    function lib_visit(tree, testOrVisitor, visitorOrReverse, maybeReverse) {
+        let reverse;
+        let test;
+        let visitor;
+        if ('function' == typeof testOrVisitor && 'function' != typeof visitorOrReverse) {
+            test = void 0;
+            visitor = testOrVisitor;
+            reverse = visitorOrReverse;
+        } else {
+            test = testOrVisitor;
+            visitor = visitorOrReverse;
+            reverse = maybeReverse;
         }
         visitParents(tree, test, overload, reverse);
         function overload(node, parents) {
             const parent = parents[parents.length - 1];
-            return visitor(node, parent ? parent.children.indexOf(node) : null, parent);
+            const index = parent ? parent.children.indexOf(node) : void 0;
+            return visitor(node, index, parent);
         }
-    };
+    }
     const getASTNodeImport = (name, from)=>({
             type: 'mdxjsEsm',
             value: `import ${name} from ${JSON.stringify(from)}`,
@@ -411,14 +437,18 @@ var __webpack_exports__ = {};
                 if ('hasVisited' in node) return;
                 if (node.lang && previewLanguages.includes(node.lang)) {
                     var _node_meta, _node_meta1, _node_meta2, _node_meta3, _node_meta4, _node_meta5;
-                    if ((null === (_node_meta = node.meta) || void 0 === _node_meta ? void 0 : _node_meta.includes('pure')) || !(null === (_node_meta1 = node.meta) || void 0 === _node_meta1 ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
-                    const value = injectDemoBlockImport(previewCodeTransform({
+                    if ((null == (_node_meta = node.meta) ? void 0 : _node_meta.includes('pure')) || !(null == (_node_meta1 = node.meta) ? void 0 : _node_meta1.includes('preview')) && 'pure' === defaultRenderMode) return;
+                    const isJsx = 'jsx' === node.lang || 'tsx' === node.lang;
+                    const value = isJsx ? injectDemoBlockImport(previewCodeTransform({
                         language: node.lang,
                         code: node.value
-                    }), demoBlockComponentPath);
-                    const isMobileMode = (null === (_node_meta2 = node.meta) || void 0 === _node_meta2 ? void 0 : _node_meta2.includes('mobile')) || (null === (_node_meta3 = node.meta) || void 0 === _node_meta3 ? void 0 : _node_meta3.includes('iframe')) || !(null === (_node_meta4 = node.meta) || void 0 === _node_meta4 ? void 0 : _node_meta4.includes('web')) && !(null === (_node_meta5 = node.meta) || void 0 === _node_meta5 ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
+                    }), demoBlockComponentPath) : previewCodeTransform({
+                        language: node.lang,
+                        code: node.value
+                    });
+                    const isMobileMode = (null == (_node_meta2 = node.meta) ? void 0 : _node_meta2.includes('mobile')) || (null == (_node_meta3 = node.meta) ? void 0 : _node_meta3.includes('iframe')) || !(null == (_node_meta4 = node.meta) ? void 0 : _node_meta4.includes('web')) && !(null == (_node_meta5 = node.meta) ? void 0 : _node_meta5.includes('internal')) && 'iframe' === previewMode;
                     const id = generateId(pageName, index++);
-                    const virtualModulePath = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.tsx`);
+                    const virtualModulePath = (0, external_node_path_namespaceObject.join)(virtualDir, `${id}.${getLangFileExt(node.lang)}`);
                     constructDemoNode(id, virtualModulePath, node, isMobileMode);
                     if (external_node_fs_default().existsSync(virtualModulePath)) {
                         const content = external_node_fs_default().readFileSync(virtualModulePath, 'utf-8');
@@ -431,7 +461,7 @@ var __webpack_exports__ = {};
             if (remarkPlugin_demos[pageName].length > 0) data.pageMeta.haveDemos = true;
         };
     };
-    let src_rslib_entry_routeMeta;
+    let src_routeMeta;
     const DEFAULT_PREVIEW_LANGUAGES = [
         'jsx',
         'tsx'
@@ -439,11 +469,11 @@ var __webpack_exports__ = {};
     function pluginPreview(options) {
         const { isMobile = false, iframeOptions = {}, iframePosition = 'follow', defaultRenderMode = 'preview', previewLanguages = DEFAULT_PREVIEW_LANGUAGES, previewCodeTransform = ({ code })=>code } = options ?? {};
         const previewMode = (null == options ? void 0 : options.previewMode) ?? (isMobile ? 'iframe' : 'internal');
-        const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {} } = iframeOptions;
+        const { devPort = 7890, framework = 'react', position = iframePosition, builderConfig = {}, customEntry } = iframeOptions;
         const globalUIComponents = 'fixed' === position ? [
             (0, external_node_path_namespaceObject.join)(staticPath, 'global-components', 'Device.tsx')
         ] : [];
-        const getRouteMeta = ()=>src_rslib_entry_routeMeta;
+        const getRouteMeta = ()=>src_routeMeta;
         let lastDemos;
         let devServer;
         let clientConfig;
@@ -456,7 +486,7 @@ var __webpack_exports__ = {};
                 return config;
             },
             routeGenerated (routes) {
-                src_rslib_entry_routeMeta = routes;
+                src_routeMeta = routes;
             },
             async beforeBuild (_, isProd) {
                 if (!isProd) try {
@@ -480,9 +510,9 @@ var __webpack_exports__ = {};
                 var _devServer_server;
                 if ((0, external_lodash_namespaceObject.isEqual)(remarkPlugin_demos, lastDemos)) return;
                 lastDemos = (0, external_lodash_namespaceObject.cloneDeep)(remarkPlugin_demos);
-                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
+                await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                 devServer = void 0;
-                const sourceEntry = generateEntry(remarkPlugin_demos, framework, position);
+                const sourceEntry = generateEntry(remarkPlugin_demos, framework, position, customEntry);
                 const outDir = (0, external_node_path_namespaceObject.join)(config.outDir ?? 'doc_build', '~demo');
                 if (0 === Object.keys(sourceEntry).length) return;
                 const { html, source, output, performance } = clientConfig ?? {};
@@ -558,11 +588,11 @@ var __webpack_exports__ = {};
                         setup: (api)=>{
                             api.modifyRsbuildConfig((config)=>{
                                 var _config_output;
-                                if ((null === (_config_output = config.output) || void 0 === _config_output ? void 0 : _config_output.target) === 'web') clientConfig = config;
+                                if ((null == (_config_output = config.output) ? void 0 : _config_output.target) === 'web') clientConfig = config;
                             });
                             api.onCloseDevServer(async ()=>{
                                 var _devServer_server;
-                                await (null == devServer ? void 0 : null === (_devServer_server = devServer.server) || void 0 === _devServer_server ? void 0 : _devServer_server.close());
+                                await (null == devServer ? void 0 : null == (_devServer_server = devServer.server) ? void 0 : _devServer_server.close());
                                 devServer = void 0;
                             });
                         }
@@ -596,8 +626,10 @@ var __webpack_exports__ = {};
         };
     }
 })();
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+exports.pluginPreview = __webpack_exports__.pluginPreview;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "pluginPreview"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/dist/utils.d.ts

@@ -1,5 +1,7 @@
 export declare const generateId: (pageName: string, index: number) => string;
 
+export declare const getLangFileExt: (lang: string) => string;
+
 export declare const injectDemoBlockImport: (str: string, path: string) => string;
 
 /**

package/dist/utils.js

@@ -1,7 +1,7 @@
 "use strict";
 var __webpack_require__ = {};
 (()=>{
-    __webpack_require__.d = function(exports1, definition) {
+    __webpack_require__.d = (exports1, definition)=>{
         for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
             enumerable: true,
             get: definition[key]
@@ -9,12 +9,10 @@ var __webpack_require__ = {};
     };
 })();
 (()=>{
-    __webpack_require__.o = function(obj, prop) {
-        return Object.prototype.hasOwnProperty.call(obj, prop);
-    };
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
 })();
 (()=>{
-    __webpack_require__.r = function(exports1) {
+    __webpack_require__.r = (exports1)=>{
         if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
             value: 'Module'
         });
@@ -27,6 +25,7 @@ var __webpack_exports__ = {};
 __webpack_require__.r(__webpack_exports__);
 __webpack_require__.d(__webpack_exports__, {
     generateId: ()=>generateId,
+    getLangFileExt: ()=>getLangFileExt,
     injectDemoBlockImport: ()=>injectDemoBlockImport,
     normalizeId: ()=>normalizeId,
     toValidVarName: ()=>toValidVarName
@@ -44,8 +43,29 @@ const injectDemoBlockImport = (str, path)=>`
     import DemoBlock from ${JSON.stringify(path)};
     ${str}
   `;
-var __webpack_export_target__ = exports;
-for(var __webpack_i__ in __webpack_exports__)__webpack_export_target__[__webpack_i__] = __webpack_exports__[__webpack_i__];
-if (__webpack_exports__.__esModule) Object.defineProperty(__webpack_export_target__, '__esModule', {
+const getLangFileExt = (lang)=>{
+    switch(lang){
+        case 'jsx':
+        case 'tsx':
+            return 'tsx';
+        case 'json':
+            return 'tsx';
+        default:
+            return lang;
+    }
+};
+exports.generateId = __webpack_exports__.generateId;
+exports.getLangFileExt = __webpack_exports__.getLangFileExt;
+exports.injectDemoBlockImport = __webpack_exports__.injectDemoBlockImport;
+exports.normalizeId = __webpack_exports__.normalizeId;
+exports.toValidVarName = __webpack_exports__.toValidVarName;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "generateId",
+    "getLangFileExt",
+    "injectDemoBlockImport",
+    "normalizeId",
+    "toValidVarName"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
     value: true
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rspress/plugin-preview",
-  "version": "1.43.11",
+  "version": "2.0.0-alpha-canary-202504162001",
   "description": "A plugin for rspress to preview the code block in markdown/mdx file.",
   "bugs": "https://github.com/web-infra-dev/rspress/issues",
   "repository": {
@@ -17,35 +17,35 @@
     "static"
   ],
   "dependencies": {
-    "@rsbuild/core": "1.2.3",
-    "@rsbuild/plugin-babel": "~1.0.3",
-    "@rsbuild/plugin-less": "~1.1.0",
-    "@rsbuild/plugin-react": "~1.1.0",
-    "@rsbuild/plugin-sass": "~1.2.0",
-    "@rsbuild/plugin-solid": "~1.0.4",
+    "@rsbuild/core": "1.3.6",
+    "@rsbuild/plugin-babel": "~1.0.5",
+    "@rsbuild/plugin-less": "~1.2.2",
+    "@rsbuild/plugin-react": "~1.1.1",
+    "@rsbuild/plugin-sass": "~1.3.1",
+    "@rsbuild/plugin-solid": "~1.0.5",
     "lodash": "4.17.21",
-    "qrcode.react": "^3.2.0",
-    "@rspress/shared": "1.43.11",
-    "@rspress/theme-default": "1.43.11"
+    "qrcode.react": "^4.2.0",
+    "@rspress/shared": "2.0.0-alpha-canary-202504162001",
+    "@rspress/theme-default": "2.0.0-alpha-canary-202504162001"
   },
   "devDependencies": {
-    "@rslib/core": "0.5.2",
-    "@types/lodash": "^4.17.15",
-    "@types/mdast": "^3.0.15",
+    "@rslib/core": "0.6.3",
+    "@types/lodash": "^4.17.16",
+    "@types/mdast": "^4.0.4",
     "@types/node": "^18.11.17",
-    "@types/react": "^18.3.18",
-    "@types/react-dom": "^18.3.5",
-    "mdast-util-mdx-jsx": "^2.1.4",
-    "mdast-util-mdxjs-esm": "^1.3.1",
+    "@types/react": "^18.3.20",
+    "@types/react-dom": "^18.3.6",
+    "mdast-util-mdx-jsx": "^3.2.0",
+    "mdast-util-mdxjs-esm": "^2.0.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.29.0",
-    "typescript": "^5.5.3",
-    "unified": "^10.1.2",
-    "unist-util-visit": "^4.1.2"
+    "typescript": "^5.8.2",
+    "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0"
   },
   "peerDependencies": {
-    "@rspress/core": "^1.43.11",
+    "@rspress/core": "^2.0.0-alpha-canary-202504162001",
     "react": ">=17.0.0",
     "react-router-dom": "^6.8.1"
   },

package/static/global-components/{DemoBlock.scss → DemoBlock.css}

@@ -9,13 +9,15 @@
 .rspress-demo-block {
   padding-bottom: 12px;
   background-color: var(--rp-demo-block-bg);
-  &-title {
-    padding: 12px 12px 8px;
-    color: #697b8c;
-    font-size: 14px;
-  }
-  &-main {
-    border-right: none;
-    border-left: none;
-  }
+}
+
+.rspress-demo-block-title {
+  padding: 12px 12px 8px;
+  color: #697b8c;
+  font-size: 14px;
+}
+
+.rspress-demo-block-main {
+  border-right: none;
+  border-left: none;
 }

package/static/global-components/DemoBlock.tsx

@@ -1,4 +1,4 @@
-import './DemoBlock.scss';
+import './DemoBlock.css';
 
 interface Props {
   title: string;

package/static/global-components/Device.tsx

@@ -8,7 +8,7 @@ import { useCallback, useEffect, useState } from 'react';
 // @ts-ignore
 import { normalizeId } from '../../dist/utils';
 import MobileOperation from './common/mobile-operation';
-import './Device.scss';
+import './Device.css';
 
 export default () => {
   const { page } = usePageData();

package/static/global-components/common/index.css

@@ -0,0 +1,103 @@
+:root {
+  --rp-preview-button-hover-bg: #e5e6eb;
+  --rp-preview-button-bg: #e5e6eb;
+}
+
+.dark {
+  --rp-preview-button-hover-bg: #c5c5c5;
+  --rp-preview-button-bg: #c5c5c5;
+}
+
+.rspress-preview {
+  padding: 16px 0;
+}
+
+.rspress-preview-wrapper {
+  border: 1px solid var(--rp-container-details-border);
+  border-radius: var(--rp-radius-small);
+}
+
+.rspress-preview-card {
+  padding: 16px;
+  position: relative;
+  border: 1px solid var(--rp-container-details-border);
+  border-radius: var(--rp-radius-small);
+  display: flex;
+}
+
+.rspress-preview-qrcode {
+  background-color: #fff;
+  width: 120px;
+  height: 120px;
+  position: absolute;
+  top: -132px;
+  right: -46px;
+  padding: 12px;
+}
+
+.rspress-preview-code {
+  position: relative;
+  overflow: hidden;
+  flex: 1 1;
+  max-height: 700px;
+}
+
+.rspress-preview-code-hide {
+  position: relative;
+  overflow: hidden;
+  display: none;
+}
+
+.rspress-preview-code-show {
+  margin-top: 16px;
+  display: block;
+}
+
+.rspress-preview-device {
+  position: relative;
+  flex: 0 0;
+  border-left: 1px solid #e6e6e6;
+  display: flex;
+  flex-direction: column;
+}
+
+.rspress-preview-device iframe {
+  border-bottom: 1px solid #e6e6e6;
+  width: 360px;
+  height: 100%;
+  flex: auto;
+}
+
+.rspress-preview-operations button {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  text-align: center;
+  border-radius: 50%;
+  border: 1px solid transparent;
+  background-color: var(--rp-c-bg-soft);
+  margin-left: 14px;
+}
+
+.rspress-preview-operations button:hover {
+  background-color: var(--rp-preview-button-hover-bg);
+}
+
+.rspress-preview-operations svg {
+  display: inline-block;
+  vertical-align: -2px;
+}
+
+.rspress-preview-operations.mobile {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding: 6px;
+}
+
+.rspress-preview-operations.web {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex: none;
+}

package/static/global-components/common/mobile-operation.tsx

@@ -10,7 +10,7 @@ import {
 import IconLaunch from '../icons/Launch';
 import IconQrcode from '../icons/Qrcode';
 import IconRefresh from '../icons/Refresh';
-import './index.scss';
+import './index.css';
 
 const locales = {
   zh: {

package/static/global-components/common/index.scss

@@ -1,104 +0,0 @@
-:root {
-  --rp-preview-button-hover-bg: #e5e6eb;
-  --rp-preview-button-bg: #e5e6eb;
-}
-
-.dark {
-  --rp-preview-button-hover-bg: #c5c5c5;
-  --rp-preview-button-bg: #c5c5c5;
-}
-
-.rspress-preview {
-  padding: 16px 0;
-
-  &-wrapper {
-    border: 1px solid var(--rp-container-details-border);
-    border-radius: var(--rp-radius-small);
-  }
-
-  &-card {
-    padding: 16px;
-    position: relative;
-    border: 1px solid var(--rp-container-details-border);
-    border-radius: var(--rp-radius-small);
-    display: flex;
-  }
-
-  &-qrcode {
-    background-color: #fff;
-    width: 120px;
-    height: 120px;
-    position: absolute;
-    top: -132px;
-    right: -46px;
-    padding: 12px;
-  }
-
-  &-code {
-    position: relative;
-    overflow: hidden;
-    flex: 1 1;
-    max-height: 700px;
-  }
-
-  &-code-hide {
-    position: relative;
-    overflow: hidden;
-    display: none;
-  }
-
-  &-code-show {
-    margin-top: 16px;
-    display: block;
-  }
-
-  &-device {
-    position: relative;
-    flex: 0 0;
-    border-left: 1px solid #e6e6e6;
-    display: flex;
-    flex-direction: column;
-    iframe {
-      border-bottom: 1px solid #e6e6e6;
-      width: 360px;
-      height: 100%;
-      flex: auto;
-    }
-  }
-
-  &-operations {
-    button {
-      width: 28px;
-      height: 28px;
-      padding: 0;
-      text-align: center;
-      border-radius: 50%;
-      border: 1px solid transparent;
-      background-color: var(--rp-c-bg-soft);
-      margin-left: 14px;
-
-      &:hover {
-        background-color: var(--rp-preview-button-hover-bg);
-      }
-    }
-
-    svg {
-      display: inline-block;
-      vertical-align: -2px;
-    }
-
-    &.mobile {
-      display: flex;
-      justify-content: flex-end;
-      width: 100%;
-      padding: 6px;
-    }
-
-    &.web {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      flex: none;
-    }
-  }
-}