fix(packages/vkui): add missed "type": "module" (#7939)

## Описание

В #7611 у пакета `packages/vkui` мы удалили поле `"main"`, но при этом `"type"` остался как `commonjs`.

Обнаружил это при тестировании `v7.0.0-beta.1` в стороннем репозитории при запуске **Jest**. Из-за `"type": "commonjs"`, он пытается обратиться к полю `"main"`, но так как его нет, тест падает с ошибкой `Cannot find module`. С `"type": "module"` такой проблемы не будет, т.к. уже будет обращаться к полю `"module"`.

## Изменения

Это повлекло за собой следующие изменения:

- ~`packages/vkui/shared.config.js`~ – переименование в `.mjs` не удалось из-за **react-styleguidist**, который не умеет в **ESM**, поэтому перенёс содержимое в корневой `shared.js`, который используется только в папке `/styleguide`
- `stylelint.config.mjs` – заменил импорты из `shared.config.js` на объявление путей прямо в файле
- `packages/vkui/cssm/postcss.config.js` → `packages/vkui/cssm/postcss.config.cjs` – заменил импорты из `shared.config.js` на объявление путей прямо в файле
- `packages/vkui/scripts/postcss.js` → `packages/vkui/scripts/postcss.cjs` – заменил импорты из `shared.config.js` на объявление путей прямо в файле, а также перенёс объявления `VKUI_TOKENS_CSS` и `generateScopedName`
- `packages/vkui/tsconfig.json` – упростил `include`, а то было точечное определение файлов
- `packages/vkui/.eslintrc.js` → `packages/vkui/.eslintrc.cjs`, иначе падает с ошибкой **ERR_REQUIRE_ESM**. Также обнаружилось, что в `@vkontakte/vkjs` не хватает поля `"exports"` (см. VKCOM/vkjs#552)
- `packages/vkui/rspack.styles.config.ts` → `packages/vkui/rspack.styles.config.mjs`, т.к. начал падать с ошибкой `ERR_UNKNOWN_FILE_EXTENSION`
- `packages/vkui/playwright-ct.config.ts` → `packages/vkui/playwright-ct.config.mjs`, т.к. **Playwright** хочет **ESM** синтаксис для `__dirname` и импортов **JSON**, что не соответствует нашему `tsconfig.json`, а отдельный `tsconfig.e2e.json` не завёлся. Также перенёс плагины из `scripts/postcss.cjs` прямо в конфиг, т.к. импорт `scripts/postcss.cjs` фризит запуск **Playwright**
- `packages/vkui/jest.config.ts` – добавляем `@vkontakte/vkjs` в `transformIgnorePatterns`, т.к. библиотека теперь полностью поставляется как ESM (VKCOM/vkjs#552).

packages/vkui/cssm/postcss.config.js → packages/vkui/cssm/postcss.config.cjs

@@ -1,4 +1,4 @@
-const { makePostcssPlugins } = require('../scripts/postcss');
+const { makePostcssPlugins } = require('../scripts/postcss.cjs');
 
 module.exports = () => {
   const plugins = makePostcssPlugins({ isESNext: true, isVKUIPackageBuild: true });

packages/vkui/jest.config.ts

@@ -10,6 +10,7 @@ const config: Config = {
   transform: {
     '^.+\\.(t|j)sx?$': ['@swc/jest', { ...swcConfig }],
   },
+  transformIgnorePatterns: ['/node_modules/(?!@vkontakte/vkjs/)'],
   displayName: 'unit',
   roots: [path.join(__dirname, 'src')],
   setupFilesAfterEnv: [path.join(__dirname, 'jest.setup.ts')],

packages/vkui/package.json

@@ -1,4 +1,5 @@
 {
+  "type": "module",
   "version": "7.0.0-beta.1",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
@@ -54,7 +55,7 @@
     "clear": "yarn run -T shx rm -rf dist/* || yarn run -T shx true",
     "docker:clear-playwright-cache": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker rm -f && docker volume rm vkui_package_vkui_playwright_cache",
     "postcss": "yarn run -T cross-env NODE_ENV=production concurrently 'yarn:postcss:*'",
-    "postcss:bundle": "yarn run -T rspack --config rspack.styles.config.ts",
+    "postcss:bundle": "yarn run -T rspack --config rspack.styles.config.mjs",
     "postcss:modules": "yarn run -T postcss './src/**/*.css' --base ./src --dir ./dist/cssm --config ./cssm",
     "swc-base": "yarn run -T cross-env NODE_ENV=production swc src/ --config-file package.swcrc --extensions .tsx,.jsx,.ts,.js --strip-leading-paths",
     "swc:es6": "yarn swc-base -d dist -s",
@@ -64,7 +65,7 @@
     "test:ci": "yarn test --ci --silent --outputFile ../../test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='../../.nyc_output'",
     "test:e2e": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e-update": "../../scripts/generate_env_docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
-    "test:e2e:ci": "yarn run -T playwright test --config playwright-ct.config.ts",
+    "test:e2e:ci": "yarn run -T cross-env NODE_OPTIONS='--no-warnings' playwright test --config playwright-ct.config.mjs",
     "test:e2e-update:ci": "yarn run test:e2e:ci --update-snapshots",
     "lint:generated-files": "yarn run -T tsc scripts/generateCSSCustomMedias.mjs --checkJs --module ESNext --moduleResolution node --resolveJsonModule --allowSyntheticDefaultImports --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
     "storybook": "bash -c 'source .env && yarn run -T cross-env SANDBOX=\\.storybook storybook dev -p ${STORYBOOK_DEV_PORT:=6006}'",
@@ -78,7 +79,7 @@
   "dependencies": {
     "@swc/helpers": "^0.5.15",
     "@vkontakte/icons": "^2.115.0",
-    "@vkontakte/vkjs": "^1.3.0",
+    "@vkontakte/vkjs": "^2.0.1",
     "@vkontakte/vkui-floating-ui": "^0.2.3",
     "date-fns": "^4.1.0"
   },

packages/vkui/playwright-ct.config.ts → packages/vkui/playwright-ct.config.mjs

@@ -1,37 +1,42 @@
-/* eslint no-console: 0 */
-import path from 'path';
-import {
-  ColorScheme,
-  defineConfig,
-  type DeviceKey,
-  devices,
-  Platform,
-  type ReporterDescription,
-  type TestProject,
-  type VKUITestOptions,
-} from '@vkui-e2e/test';
+// @ts-check
+/* eslint-disable no-console, import/no-default-export */
+
+import path from 'node:path';
+import postcssGlobalData from '@csstools/postcss-global-data';
+import { defineConfig, devices } from '@playwright/experimental-ct-react';
+import restructureVariable from '@project-tools/postcss-restructure-variable';
+import autoprefixer from 'autoprefixer';
 import dotenv from 'dotenv';
-import { makePostcssPlugins } from './scripts/postcss';
-import * as tsconfig from './tsconfig.json';
+import postcssCustomMedia from 'postcss-custom-media';
+import postcssGapProperties from 'postcss-gap-properties';
+import cssImport from 'postcss-import';
+import postcssLogical from 'postcss-logical';
+// import * as tsconfig from './tsconfig.json' with { type: 'json' };
+
+const rootDirectory = path.join(import.meta.dirname, '../..');
 
 // см. `.env`
 dotenv.config();
 
-const TS_CONFIG_ALIASES = Object.entries(tsconfig.compilerOptions.paths).reduce<
-  Record<string, string>
->((aliases, [name, paths]) => {
-  aliases[name] = path.join(__dirname, paths[0]);
-  return aliases;
-}, {});
+// TODO [@playwright/experimental-ct-react>=1.49] использовать TS_CONFIG_ALIASES в resolve.alias
+//  https://github.com/microsoft/playwright/issues/33557
+//
+// const TS_CONFIG_ALIASES = Object.entries(tsconfig.compilerOptions.paths).reduce(
+//   (aliases, [name, paths]) => {
+//     aliases[name] = path.join(__dirname, paths[0]);
+//     return aliases;
+//   },
+//   {},
+// );
 
-const DEFAULT_REPORTERS: ReporterDescription[] = [['json', { outputFile: 'e2e-results.json' }]];
+/** @type {import('@playwright/test').ReporterDescription}  */
+const DEFAULT_REPORTER = ['json', { outputFile: 'e2e-results.json' }];
 
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
-// eslint-disable-next-line import/no-default-export
-export default defineConfig<VKUITestOptions>({
-  testDir: path.join(__dirname, './src'),
+export default defineConfig({
+  testDir: path.join(import.meta.dirname, './src'),
   testMatch: generateTestMatch(),
 
   /* Folder for test artifacts such as screenshots, videos, traces, etc. */
@@ -65,8 +70,8 @@ export default defineConfig<VKUITestOptions>({
       : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI
-    ? [['github'], ['dot'], ['blob'], ...DEFAULT_REPORTERS]
-    : [['list'], ['html', { open: 'never' }], ...DEFAULT_REPORTERS],
+    ? [['github'], ['dot'], ['blob'], [...DEFAULT_REPORTER]]
+    : [['list'], ['html', { open: 'never' }], [...DEFAULT_REPORTER]],
 
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
@@ -79,16 +84,65 @@ export default defineConfig<VKUITestOptions>({
     deviceScaleFactor: 1,
 
     ctViteConfig: {
-      build: { commonjsOptions: { include: [/node_modules/, /\.js/] } },
+      build: { commonjsOptions: { include: [/node_modules/, /\.js/] }, sourcemap: false },
 
-      css: {
-        postcss: {
-          plugins: makePostcssPlugins(),
+      resolve: {
+        // alias: TS_CONFIG_ALIASES,
+        alias: {
+          '@vkui-e2e/test': path.join(import.meta.dirname, 'src/testing/e2e/index.playwright'),
+          '@vkui-e2e/playground-helpers': path.join(
+            import.meta.dirname,
+            'src/testing/e2e/index.playground',
+          ),
+          '@vkui-e2e/utils': path.join(import.meta.dirname, 'src/testing/e2e/utils'),
         },
       },
 
-      resolve: {
-        alias: TS_CONFIG_ALIASES,
+      css: {
+        postcss: {
+          plugins: [
+            // Обработка css импортов
+            cssImport(),
+
+            restructureVariable(
+              [
+                './node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css',
+                './node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css',
+                './node_modules/@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css',
+                './node_modules/@vkontakte/vkui-tokens/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css',
+                './node_modules/@vkontakte/vkui-tokens/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css',
+                './node_modules/@vkontakte/vkui-tokens/themes/vkCom/cssVars/declarations/onlyVariablesLocal.css',
+                './node_modules/@vkontakte/vkui-tokens/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css',
+              ].map((pathSegment) => path.join(rootDirectory, pathSegment)),
+            ),
+
+            // Сбор данных для работы некоторых postcss плагинов
+            postcssGlobalData({
+              files: [
+                './node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariables.css',
+                'packages/vkui/src/styles/dynamicTokens.css',
+                'packages/vkui/src/styles/constants.css',
+                'packages/vkui/src/styles/customMedias.generated.css',
+              ].map((pathSegment) => path.join(rootDirectory, pathSegment)),
+            }),
+
+            // Автопрефиксер
+            autoprefixer(),
+
+            // Обработка CustomMedia
+            postcssCustomMedia(),
+
+            // Обработка CSS Logical
+            //
+            // https://caniuse.com/css-logical-props
+            postcssLogical(),
+
+            // TODO [>=8]: Проверить браузерную поддержку
+            //
+            // https://caniuse.com/mdn-css_properties_gap_grid_context
+            postcssGapProperties(),
+          ],
+        },
       },
     },
   },
@@ -114,25 +168,25 @@ function generateTestMatch() {
   return ['**/*.e2e.{ts,tsx}'];
 }
 
-function generateProjects(): TestProject {
+function generateProjects() {
   /**
    * Иначе перебивает `deviceScaleFactor` из общего конфига.
    * Можно решить через `page.screenshot({ scale: 'css' })`, но через функцию ниже получается прозрачнее.
    */
-  const getDeviceDescriptorWithoutScaleFactor = <T extends DeviceKey>(deviceName: T) => {
+  const getDeviceDescriptorWithoutScaleFactor = (deviceName) => {
     const { deviceScaleFactor, ...restProps } = devices[deviceName];
     return restProps;
   };
 
-  const colorSchemes = [ColorScheme.LIGHT, ColorScheme.DARK];
+  const colorSchemes = ['light', 'dark'];
   const projects = colorSchemes
     .map((colorSchemeType) => [
       {
         name: `android (chromium) • ${colorSchemeType}`,
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Pixel 5'),
           colorSchemeType,
-          platform: Platform.ANDROID,
+          platform: 'android',
         },
       },
 
@@ -141,7 +195,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('iPhone XR'),
           colorSchemeType,
-          platform: Platform.IOS,
+          platform: 'ios',
         },
       },
 
@@ -150,7 +204,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Chrome'),
           colorSchemeType,
-          platform: Platform.VKCOM,
+          platform: 'vkcom',
         },
       },
 
@@ -159,7 +213,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Firefox'),
           colorSchemeType,
-          platform: Platform.VKCOM,
+          platform: 'vkcom',
         },
       },
 
@@ -168,7 +222,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Safari'),
           colorSchemeType,
-          platform: Platform.VKCOM,
+          platform: 'vkcom',
         },
       },
     ])

packages/vkui/rspack.styles.config.ts → packages/vkui/rspack.styles.config.mjs

@@ -1,23 +1,20 @@
+// @ts-check
+
 import path from 'node:path';
-import rspack, { type Configuration, type RspackPluginInstance } from '@rspack/core';
+import rspack from '@rspack/core';
 import browserslist from 'browserslist';
 import { CleanWebpackPlugin } from 'clean-webpack-plugin';
-import { makePostcssPlugins } from './scripts/postcss';
+import { makePostcssPlugins } from './scripts/postcss.cjs';
 
-const rootDirectory = path.join(__dirname, '../../');
+const rootDirectory = path.join(import.meta.dirname, '../../');
 const browser = browserslist.readConfig(path.join(rootDirectory, '.browserslistrc'));
-
-interface MakeCssRuleUseOptions {
-  /**
-   * Флаг для определения сборки css модулей
-   */
-  isCssModulesFile?: boolean;
-}
-
 /**
  * Конфигурация для css
+ *
+ * @param {Object} [options={}]
+ * @param {boolean} [options.isCssModulesFile=false] Флаг для определения сборки css модулей
  */
-function makeCssRuleUse({ isCssModulesFile = false }: MakeCssRuleUseOptions = {}) {
+function makeCssRuleUse({ isCssModulesFile = false } = {}) {
   return [
     {
       loader: 'postcss-loader',
@@ -30,14 +27,15 @@ function makeCssRuleUse({ isCssModulesFile = false }: MakeCssRuleUseOptions = {}
   ];
 }
 
-const config: Configuration = {
+/** @type {import('@rspack/cli').Configuration} */
+const config = {
   mode: 'production',
   entry: {
     vkui: ['./src/styles/themes.css', './src/index.ts'],
     components: './src/index.ts',
   },
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(import.meta.dirname, 'dist'),
     filename: '[name].js.tmp',
     cssFilename: '[name].css',
   },
@@ -96,7 +94,7 @@ const config: Configuration = {
       protectWebpackAssets: false,
       cleanOnceBeforeBuildPatterns: [],
       cleanAfterEveryBuildPatterns: ['*.tmp', '*.tmp.*'],
-    }) as unknown as RspackPluginInstance,
+    }),
   ],
   stats: {
     all: false,
@@ -106,6 +104,7 @@ const config: Configuration = {
   },
   experiments: {
     css: true,
+    outputModule: true,
   },
 };
 

packages/vkui/scripts/generateCSSCustomMedias.mjs

@@ -2,16 +2,15 @@
 import fs from 'node:fs';
 import path from 'path';
 import ts from 'typescript';
-import { PATHS } from '../shared.config.js';
 
 const inputSourceFilePath = path.resolve(
   import.meta.dirname,
-  PATHS.JS_BREAKPOINTS.replace(PATHS.ROOT_DIR, '../'),
+  '../src/lib/adaptivity/breakpoints.ts',
 );
 
 const outputSourceFilePath = path.resolve(
   import.meta.dirname,
-  PATHS.CSS_CUSTOM_MEDIAS.replace(PATHS.ROOT_DIR, '../'),
+  '../src/styles/customMedias.generated.css',
 );
 
 /**