[core][infra]: Beta css modules

packages/plasma-new-hope/package.json

@@ -23,6 +23,11 @@
       "require": "./dist/css/cjs/index.js",
       "types": "./types/index.d.ts"
     },
+    "./beta": {
+      "import": "./dist/beta/es/index.js",
+      "require": "./dist/beta/cjs/index.js",
+      "types": "./dist/beta/types/components/_beta/index.d.ts"
+    },
     "./types/*": "./types/*"
   },
   "files": ["dist", "types"],
@@ -31,20 +36,21 @@
   },
   "scripts": {
     "prepare": "npm run build",
-    "build": "npm run build:css && npm run build:styled-components && npm run build:emotion",
+    "build": "npm run build:css && npm run build:beta && npm run build:styled-components && npm run build:emotion",
     "postbuild": "npm run generate:typings",
     "build:styled-components": "rm -rf dist/styled-components && npm run build:styled-components:esm && npm run build:styled-components:cjs",
-    "build:styled-components:cjs": "swc ./src -d ./dist/styled-components/cjs --strip-leading-paths --ignore '**/examples/**' --config-file ./swc-sc.config.json -C module.type=commonjs",
-    "build:styled-components:esm": "swc ./src -d ./dist/styled-components/es --strip-leading-paths --ignore '**/examples/**' --config-file ./swc-sc.config.json -C module.type=es6",
+    "build:styled-components:cjs": "swc ./src -d ./dist/styled-components/cjs --strip-leading-paths --ignore '**/examples/**,**/components/_beta/**' --config-file ./swc-sc.config.json -C module.type=commonjs",
+    "build:styled-components:esm": "swc ./src -d ./dist/styled-components/es --strip-leading-paths --ignore '**/examples/**,**/components/_beta/**' --config-file ./swc-sc.config.json -C module.type=es6",
     "prebuild:emotion": "rm -rf src-emotion && cp -R src src-emotion && node ./scripts/replaceImports.mjs --mode emotion",
     "build:emotion": "rm -rf dist/emotion && npm run build:emotion:esm && npm run build:emotion:cjs",
-    "build:emotion:cjs": "swc ./src-emotion -d ./dist/emotion/cjs --strip-leading-paths --ignore '**/examples/**' --config-file ./swc-emotion.config.json -C module.type=commonjs",
-    "build:emotion:esm": "swc ./src-emotion -d ./dist/emotion/es --strip-leading-paths --ignore '**/examples/**' --config-file ./swc-emotion.config.json -C module.type=es6",
+    "build:emotion:cjs": "swc ./src-emotion -d ./dist/emotion/cjs --strip-leading-paths --ignore '**/examples/**,**/components/_beta/**' --config-file ./swc-emotion.config.json -C module.type=commonjs",
+    "build:emotion:esm": "swc ./src-emotion -d ./dist/emotion/es --strip-leading-paths --ignore '**/examples/**,**/components/_beta/**' --config-file ./swc-emotion.config.json -C module.type=es6",
     "postbuild:emotion": "rm -rf src-emotion",
     "prebuild:css": "rm -rf src-css && cp -R src src-css && node ./scripts/replaceImports.mjs --mode css",
     "build:css": "rm -rf dist/css && rollup -c",
     "postbuild:css": "rm -rf src-css",
-    "generate:typings": "rm -rf types && tsc && tsc-alias",
+    "build:beta": "rm -rf dist/beta && rollup -c rollup.beta.config.mjs",
+    "generate:typings": "tsc && tsc-alias && tsc -p src/components/_beta/tsconfig.json",
     "storybook": "storybook dev -p ${PORT:-7002} -c .storybook",
     "storybook:ai-components": "USE_AI_COMPONENTS=true storybook dev -p ${PORT:-7002} -c .storybook",
     "storybook:build": "storybook build -c .storybook -o build-sb",

packages/plasma-new-hope/rollup.beta.config.mjs

@@ -0,0 +1,106 @@
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { babel } from '@rollup/plugin-babel';
+import styles from '@ironkinoko/rollup-plugin-styles';
+
+const filename = fileURLToPath(import.meta.url);
+const dirname = path.dirname(filename);
+const sourceDir = path.resolve(dirname, 'src');
+const betaSourceDir = path.join(sourceDir, 'components/_beta');
+const extractedCssModules = new Map();
+
+export default {
+    input: {
+        index: path.join(betaSourceDir, 'index.ts'),
+    },
+    treeshake: {
+        propertyReadSideEffects: false,
+    },
+    output: [
+        {
+            preserveModules: true,
+            dir: 'dist/beta/es',
+            format: 'es',
+            freeze: false,
+            esModule: true,
+            sourcemap: false,
+            exports: 'named',
+        },
+        {
+            preserveModules: true,
+            dir: 'dist/beta/cjs',
+            format: 'cjs',
+            freeze: false,
+            esModule: true,
+            sourcemap: false,
+            exports: 'named',
+            interop: 'auto',
+        },
+    ],
+    external: (id) => {
+        if (id.startsWith('regenerator-runtime') || id === 'tslib') {
+            return false;
+        }
+        return !id.startsWith('.') && !path.isAbsolute(id);
+    },
+    plugins: [
+        nodeResolve({
+            extensions: ['.tsx', '.ts'],
+        }),
+        styles({
+            mode: 'extract',
+            modules: true,
+            onExtract({ name, css }) {
+                if (name.endsWith('.module.css.css')) {
+                    extractedCssModules.set(name, css);
+                }
+
+                return false;
+            },
+        }),
+        emitCssModulesPlugin(),
+        babel({
+            babelHelpers: 'bundled',
+            extensions: ['.ts', '.tsx'],
+        }),
+    ],
+};
+
+function emitCssModulesPlugin() {
+    return {
+        name: 'emitCssModulesPlugin',
+        generateBundle: {
+            order: 'post',
+            handler(options, bundle) {
+                Object.values(bundle).forEach((file) => {
+                    if (file.type !== 'chunk' || !file.fileName.endsWith('.module.css.js')) {
+                        return;
+                    }
+
+                    const extractedName = file.fileName.replace(/\.js$/, '.css');
+                    const css = extractedCssModules.get(extractedName);
+
+                    if (css === undefined) {
+                        this.error(`Processed CSS Module was not found for ${file.fileName}`);
+                    }
+
+                    const cssFileName = file.fileName.replace(/\.module\.css\.js$/, '.css');
+                    const relativeCssPath = `./${path.posix.relative(path.posix.dirname(file.fileName), cssFileName)}`;
+                    const importCss =
+                        options.format === 'cjs'
+                            ? `require('${relativeCssPath}');\n`
+                            : `import '${relativeCssPath}';\n`;
+
+                    file.code = importCss + file.code;
+
+                    this.emitFile({
+                        type: 'asset',
+                        fileName: cssFileName,
+                        source: css,
+                    });
+                });
+            },
+        },
+    };
+}

packages/plasma-new-hope/src/components/Tour/Tour.tsx

@@ -4,9 +4,7 @@ import { useFloating, offset, flip, shift, autoUpdate, arrow, FloatingArrow, Pla
 import { RootProps } from 'src/engines';
 import { canUseDOM, safeUseId } from 'src/utils';
 
-import { ARROW_HEIGHT, ARROW_PADDING, ARROW_POLYGON, ARROW_WIDTH } from '../_beta/Popover/Popover';
-
-import { getHTMLElement } from './utils';
+import { ARROW_HEIGHT, ARROW_PADDING, ARROW_POLYGON, ARROW_WIDTH, getHTMLElement } from './utils';
 import type { TourProps, RootTourProps } from './Tour.types';
 import { MaskContainer, Mask, Highlight, TourPortal } from './Tour.styles';
 import { base as viewCSS } from './variatoins/_view/base';

packages/plasma-new-hope/src/components/Tour/utils/index.ts

@@ -1,4 +1,13 @@
-import { canUseDOM } from 'src/utils';
+import { canUseDOM } from '../../../utils/canUseDOM';
+
+/* Ширина хвостика */
+export const ARROW_WIDTH = 20;
+/* Высота хвостика */
+export const ARROW_HEIGHT = 8;
+/* SVG хвостика */
+export const ARROW_POLYGON = 'M20 20L0 20C8.88889 20.0001 10 12.5714 10 12C10 12.5714 11.3273 20.006 20 20Z';
+/* Отступ хвостика по краям (чтобы избежать коллизии со скругленными углами) */
+export const ARROW_PADDING = 16;
 
 export const getHTMLElement = (
     target: string | React.RefObject<HTMLElement | null> | HTMLElement,