fix: mv playwright config from ts to mjs

packages/vkui/package.json

@@ -65,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}'",
@@ -79,7 +79,7 @@
   "dependencies": {
     "@swc/helpers": "^0.5.15",
     "@vkontakte/icons": "^2.115.0",
-    "@vkontakte/vkjs": "^1.3.0",
+    "@vkontakte/vkjs": "^2.0.0",
     "@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,43 @@
-/* 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 cssModules from 'postcss-modules';
+// 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 +71,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 +85,71 @@ 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(),
+
+            // Обработка css modules. Добавляет префикс vkui
+            cssModules({
+              generateScopedName: 'vkui[folder]__[local]',
+              getJSON: () => void 0,
+            }),
+
+            // TODO [>=8]: Проверить браузерную поддержку
+            //
+            // https://caniuse.com/mdn-css_properties_gap_grid_context
+            postcssGapProperties(),
+          ],
+        },
       },
     },
   },
@@ -114,25 +175,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 +202,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('iPhone XR'),
           colorSchemeType,
-          platform: Platform.IOS,
+          platform: 'ios',
         },
       },
 
@@ -150,7 +211,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Chrome'),
           colorSchemeType,
-          platform: Platform.VKCOM,
+          platform: 'vkcom',
         },
       },
 
@@ -159,7 +220,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Firefox'),
           colorSchemeType,
-          platform: Platform.VKCOM,
+          platform: 'vkcom',
         },
       },
 
@@ -168,7 +229,7 @@ function generateProjects(): TestProject {
         use: {
           ...getDeviceDescriptorWithoutScaleFactor('Desktop Safari'),
           colorSchemeType,
-          platform: Platform.VKCOM,
+          platform: 'vkcom',
         },
       },
     ])

yarn.lock

@@ -3889,13 +3889,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vkontakte/vkjs@npm:^1.3.0":
-  version: 1.3.0
-  resolution: "@vkontakte/vkjs@npm:1.3.0"
+"@vkontakte/vkjs@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "@vkontakte/vkjs@npm:2.0.0"
   dependencies:
     "@swc/helpers": "npm:^0.5.0"
     clsx: "npm:^2.1.1"
-  checksum: 10/f4ab9787eeff72df6b9c4f0e1075ac13674dc45498455e811507de385ec3d55dd76d46e0787b6aa64d703175af2fd1da9febe806667bd8b6a2fd2320f3ea67ce
+  checksum: 10/9c82c4985409ea83f9547a3372a913f840b693889228228ebbf44156a67b01087d4e15930509e68eec5c2cdc071768812e0c4c98b2f7322f6989a26958857cf4
   languageName: node
   linkType: hard
 
@@ -4093,7 +4093,7 @@ __metadata:
     "@swc/helpers": "npm:^0.5.15"
     "@types/node": "npm:*"
     "@vkontakte/icons": "npm:^2.115.0"
-    "@vkontakte/vkjs": "npm:^1.3.0"
+    "@vkontakte/vkjs": "npm:^2.0.0"
     "@vkontakte/vkui-floating-ui": "npm:^0.2.3"
     date-fns: "npm:^4.1.0"
     react: "npm:^18.3.1"