fix(packages/vkui): add missed "type": "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`
- `packages/vkui/rspack.styles.config.ts` → `packages/vkui/rspack.styles.config.mjs` – т.к. начал падать с ошибкой `ERR_UNKNOWN_FILE_EXTENSION`

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/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",

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',
 );
 
 /**

packages/vkui/scripts/postcss.js → packages/vkui/scripts/postcss.cjs

@@ -8,7 +8,6 @@ const postcssGapProperties = require('postcss-gap-properties');
 const cssImport = require('postcss-import');
 const postcssLogical = require('postcss-logical');
 const cssModules = require('postcss-modules');
-const { VKUI_PACKAGE, VKUI_TOKENS_CSS, generateScopedName } = require('../../../shared');
 
 const rootDirectory = path.join(__dirname, '../../..');
 
@@ -33,11 +32,12 @@ function getMinimizerOptions(isVKUIPackageBuild = false) {
 /**
  * Конфигурация postcss плагинов
  * @param {Object} config - Конфигурация.
- * @param {boolean | undefined} config.isVKUIPackageBuild - Сборка пакета.
- * @param {boolean | undefined} config.isProduction - Продакшн сборка.
- * @param {boolean | undefined} config.isCssModulesFile - Сборка module.css файлов.
- * @param {boolean | undefined} config.isESNext - Отдельная сборка cssm.
- * @param {boolean | undefined} config.disableMinimizer - Отключает cssnano.
+ * @param {boolean} [config.isVKUIPackageBuild=false] Сборка пакета.
+ * @param {boolean} [config.isProduction=process.env.NODE_ENV === 'production'] Продакшн сборка.
+ * @param {boolean} [config.isCssModulesFile=false] Сборка module.css файлов.
+ * @param {boolean} [config.isESNext=false] Отдельная сборка cssm.
+ * @param {boolean} [config.isStorybook=process.env.SANDBOX === '.storybook'] Отдельная сборка cssm.
+ * @param {boolean} [config.disableMinimizer=false] Отключает cssnano.
  * @returns {import('postcss').Plugin[]}
  */
 function makePostcssPlugins({
@@ -53,16 +53,24 @@ function makePostcssPlugins({
     cssImport(),
 
     restructureVariable(
-      VKUI_TOKENS_CSS.map((pathSegment) => path.join(rootDirectory, pathSegment)),
+      [
+        './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',
-        VKUI_PACKAGE.PATHS.CSS_DYNAMIC_TOKENS,
-        VKUI_PACKAGE.PATHS.CSS_CONSTANTS,
-        VKUI_PACKAGE.PATHS.CSS_CUSTOM_MEDIAS,
+        '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)),
     }),
 
@@ -84,7 +92,7 @@ function makePostcssPlugins({
   if (isVKUIPackageBuild && isCssModulesFile && !isESNext) {
     plugins.push(
       cssModules({
-        generateScopedName,
+        generateScopedName: 'vkui[folder]__[local]',
         getJSON: () => void 0,
       }),
     );

packages/vkui/tsconfig.json

@@ -19,20 +19,6 @@
       }
     ]
   },
-  "include": [
-    "src/**/*.ts*",
-    "src/**/*.js",
-    ".storybook/**/*.ts*",
-    "**/*.config.js",
-    "*.config.*.js",
-    "*.setup.js",
-    ".eslintrc.js",
-    "playwright-ct.config.ts",
-    "playwright/index.tsx",
-    "scripts/*.js",
-    "scripts/*.mjs",
-    "./jest.*.ts",
-    "*.config.ts"
-  ],
+  "include": ["*.ts*", "**/*.ts*", "*.js", "**/*.js", "*.mjs", "**/*.mjs", "*.cjs", "**/*.cjs"],
   "files": ["./global.d.ts", "types/env.d.ts"]
 }

shared.js

@@ -1,21 +1,30 @@
-const { VERSION, URLS, PATHS } = require('./packages/vkui/shared.config');
+// Используется в папке styleguide/
 
-module.exports = {
-  VKUI_PACKAGE: {
-    VERSION,
-    URLS,
-    PATHS,
-  },
+const iconPkg = require('./node_modules/@vkontakte/icons/package.json');
+const tokensPkg = require('./node_modules/@vkontakte/vkui-tokens/package.json');
+const vkuiPgk = require('./packages/vkui/package.json');
+
+const ROOT_DIR = 'packages/vkui';
+const TS_CONFIG_FOR_DIST = `${ROOT_DIR}/tsconfig.dist.json`;
+const SRC_DIR = `${ROOT_DIR}/src`;
+const COMPONENTS_DIR = `${SRC_DIR}/components`;
 
-  VKUI_TOKENS_CSS: [
-    './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',
-  ],
+module.exports.VKUI_PACKAGE = {
+  VERSION: vkuiPgk.version,
 
-  generateScopedName: 'vkui[folder]__[local]',
+  URLS: {
+    REPOSITORY: vkuiPgk.repository.url.replace('.git', ''),
+    ISSUES: vkuiPgk.bugs,
+    HOMEPAGE: vkuiPgk.homepage,
+    NPM: 'https://www.npmjs.com/package/@vkontakte/vkui',
+    TOKENS: tokensPkg.homepage,
+    ICONS: iconPkg.homepage,
+  },
+
+  PATHS: {
+    ROOT_DIR,
+    SRC_DIR,
+    TS_CONFIG_FOR_DIST,
+    COMPONENTS_DIR,
+  },
 };

stylelint.config.mjs

@@ -1,7 +1,4 @@
 import path from 'node:path';
-import shared from './shared.js';
-
-const { VKUI_PACKAGE } = shared;
 
 const config = {
   extends: ['stylelint-config-standard', '@vkontakte/stylelint-config'],
@@ -57,9 +54,9 @@ const config = {
       true,
       {
         importFrom: [
-          path.join(import.meta.dirname, VKUI_PACKAGE.PATHS.CSS_CONSTANTS),
-          path.join(import.meta.dirname, VKUI_PACKAGE.PATHS.CSS_DYNAMIC_TOKENS),
-          path.join(import.meta.dirname, VKUI_PACKAGE.PATHS.CSS_MISSED_THEME_TOKENS),
+          path.join(import.meta.dirname, 'packages/vkui/src/styles/constants.css'),
+          path.join(import.meta.dirname, 'packages/vkui/src/styles/dynamicTokens.css'),
+          path.join(import.meta.dirname, 'packages/vkui/src/styles/missedThemeTokens.css'),
           path.join(
             import.meta.dirname,
             'node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css',
@@ -70,7 +67,10 @@ const config = {
     'csstools/media-use-custom-media': [
       'known',
       {
-        importFrom: path.join(import.meta.dirname, VKUI_PACKAGE.PATHS.CSS_CUSTOM_MEDIAS),
+        importFrom: path.join(
+          import.meta.dirname,
+          'packages/vkui/src/styles/customMedias.generated.css',
+        ),
       },
     ],
     'selector-pseudo-class-disallowed-list': ['global'],

webpack.common.config.js

@@ -1,7 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
 const { merge } = require('webpack-merge');
-const { makePostcssPlugins } = require('./packages/vkui/scripts/postcss');
+const { makePostcssPlugins } = require('./packages/vkui/scripts/postcss.cjs');
 
 const isProduction = process.env.NODE_ENV === 'production';