From eaf8af77a3cded46d8adb16b02a9f277b92611c4 Mon Sep 17 00:00:00 2001 From: Inomdzhon Mirdzhamolov Date: Mon, 18 Nov 2024 11:34:02 +0300 Subject: [PATCH] fix(packages/vkui): add missed "type": "module" (#7939) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Описание В #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"` (см. https://github.com/VKCOM/vkjs/pull/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 (https://github.com/VKCOM/vkjs/pull/552). --- packages/vkui/{.eslintrc.js => .eslintrc.cjs} | 0 .../{postcss.config.js => postcss.config.cjs} | 2 +- packages/vkui/jest.config.ts | 1 + packages/vkui/package.json | 7 +- ...-ct.config.ts => playwright-ct.config.mjs} | 134 ++++++++++++------ ...les.config.ts => rspack.styles.config.mjs} | 29 ++-- .../vkui/scripts/generateCSSCustomMedias.mjs | 5 +- .../vkui/scripts/{postcss.js => postcss.cjs} | 30 ++-- packages/vkui/scripts/postcss.d.ts | 12 -- packages/vkui/shared.config.js | 42 ------ packages/vkui/tsconfig.json | 16 +-- shared.js | 43 +++--- stylelint.config.mjs | 14 +- webpack.common.config.js | 2 +- yarn.lock | 10 +- 15 files changed, 175 insertions(+), 172 deletions(-) rename packages/vkui/{.eslintrc.js => .eslintrc.cjs} (100%) rename packages/vkui/cssm/{postcss.config.js => postcss.config.cjs} (67%) rename packages/vkui/{playwright-ct.config.ts => playwright-ct.config.mjs} (52%) rename packages/vkui/{rspack.styles.config.ts => rspack.styles.config.mjs} (80%) rename packages/vkui/scripts/{postcss.js => postcss.cjs} (67%) delete mode 100644 packages/vkui/scripts/postcss.d.ts delete mode 100644 packages/vkui/shared.config.js diff --git a/packages/vkui/.eslintrc.js b/packages/vkui/.eslintrc.cjs similarity index 100% rename from packages/vkui/.eslintrc.js rename to packages/vkui/.eslintrc.cjs diff --git a/packages/vkui/cssm/postcss.config.js b/packages/vkui/cssm/postcss.config.cjs similarity index 67% rename from packages/vkui/cssm/postcss.config.js rename to packages/vkui/cssm/postcss.config.cjs index a3c6dbddb4..5441c1b214 100644 --- a/packages/vkui/cssm/postcss.config.js +++ b/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 }); diff --git a/packages/vkui/jest.config.ts b/packages/vkui/jest.config.ts index 7d54d18b44..f905abbe41 100644 --- a/packages/vkui/jest.config.ts +++ b/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')], diff --git a/packages/vkui/package.json b/packages/vkui/package.json index 925f85280a..4260b79315 100644 --- a/packages/vkui/package.json +++ b/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" }, diff --git a/packages/vkui/playwright-ct.config.ts b/packages/vkui/playwright-ct.config.mjs similarity index 52% rename from packages/vkui/playwright-ct.config.ts rename to packages/vkui/playwright-ct.config.mjs index 7550b683d6..926fbaa436 100644 --- a/packages/vkui/playwright-ct.config.ts +++ b/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 ->((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({ - 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({ : 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({ 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,17 +168,17 @@ function generateTestMatch() { return ['**/*.e2e.{ts,tsx}']; } -function generateProjects(): TestProject { +function generateProjects() { /** * Иначе перебивает `deviceScaleFactor` из общего конфига. * Можно решить через `page.screenshot({ scale: 'css' })`, но через функцию ниже получается прозрачнее. */ - const getDeviceDescriptorWithoutScaleFactor = (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) => [ { @@ -132,7 +186,7 @@ function generateProjects(): TestProject { 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', }, }, ]) diff --git a/packages/vkui/rspack.styles.config.ts b/packages/vkui/rspack.styles.config.mjs similarity index 80% rename from packages/vkui/rspack.styles.config.ts rename to packages/vkui/rspack.styles.config.mjs index d2fdadb7c9..c732b7dbee 100644 --- a/packages/vkui/rspack.styles.config.ts +++ b/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, }, }; diff --git a/packages/vkui/scripts/generateCSSCustomMedias.mjs b/packages/vkui/scripts/generateCSSCustomMedias.mjs index 3646b4abe6..8426996714 100644 --- a/packages/vkui/scripts/generateCSSCustomMedias.mjs +++ b/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', ); /** diff --git a/packages/vkui/scripts/postcss.js b/packages/vkui/scripts/postcss.cjs similarity index 67% rename from packages/vkui/scripts/postcss.js rename to packages/vkui/scripts/postcss.cjs index 3f392049a7..cf21e760a0 100644 --- a/packages/vkui/scripts/postcss.js +++ b/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, }), ); diff --git a/packages/vkui/scripts/postcss.d.ts b/packages/vkui/scripts/postcss.d.ts deleted file mode 100644 index 1eb93d4ce3..0000000000 --- a/packages/vkui/scripts/postcss.d.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type postcss from 'postcss'; - -interface MakePostcssPluginsOptions { - isVKUIPackageBuild?: boolean; - isProduction?: boolean; - isCssModulesFile?: boolean; - isESNext?: boolean; - isStorybook?: boolean; - disableMinimizer?: boolean; -} - -export function makePostcssPlugins(options?: MakePostcssPluginsOptions): postcss.AcceptedPlugin[]; diff --git a/packages/vkui/shared.config.js b/packages/vkui/shared.config.js deleted file mode 100644 index afbeba5a5d..0000000000 --- a/packages/vkui/shared.config.js +++ /dev/null @@ -1,42 +0,0 @@ -const iconPkg = require('../../node_modules/@vkontakte/icons/package.json'); -const tokensPkg = require('../../node_modules/@vkontakte/vkui-tokens/package.json'); -const pkg = require('./package.json'); - -module.exports.VERSION = pkg.version; - -module.exports.URLS = { - REPOSITORY: pkg.repository.url.replace('.git', ''), - ISSUES: pkg.bugs, - HOMEPAGE: pkg.homepage, - NPM: 'https://www.npmjs.com/package/@vkontakte/vkui', - TOKENS: tokensPkg.homepage, - ICONS: iconPkg.homepage, -}; - -const ROOT_DIR = 'packages/vkui'; -const TS_CONFIG_FOR_DIST = `${ROOT_DIR}/tsconfig.dist.json`; -const SRC_DIR = `${ROOT_DIR}/src`; -const JS_BREAKPOINTS = `${SRC_DIR}/lib/adaptivity/breakpoints.ts`; -const COMPONENTS_DIR = `${SRC_DIR}/components`; -const STYLES_DIR = `${SRC_DIR}/styles`; -const CSS_CONSTANTS = `${STYLES_DIR}/constants.css`; -const CSS_DYNAMIC_TOKENS = `${STYLES_DIR}/dynamicTokens.css`; -const CSS_MISSED_THEME_TOKENS = `${STYLES_DIR}/missedThemeTokens.css`; -const CSS_CUSTOM_MEDIAS = `${STYLES_DIR}/customMedias.generated.css`; -const TYPES_DIR = `${SRC_DIR}/types`; -const TEST_UTILS_DIR = `${SRC_DIR}/testing`; - -module.exports.PATHS = { - ROOT_DIR, - SRC_DIR, - JS_BREAKPOINTS, - TS_CONFIG_FOR_DIST, - COMPONENTS_DIR, - STYLES_DIR, - CSS_CONSTANTS, - CSS_DYNAMIC_TOKENS, - CSS_MISSED_THEME_TOKENS, - CSS_CUSTOM_MEDIAS, - TYPES_DIR, - TEST_UTILS_DIR, -}; diff --git a/packages/vkui/tsconfig.json b/packages/vkui/tsconfig.json index 96487aa80e..82774991fc 100644 --- a/packages/vkui/tsconfig.json +++ b/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"] } diff --git a/shared.js b/shared.js index 10ade59b1f..f0a5afbbb0 100644 --- a/shared.js +++ b/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, + }, }; diff --git a/stylelint.config.mjs b/stylelint.config.mjs index cd90804f5f..b45c3e98cb 100644 --- a/stylelint.config.mjs +++ b/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'], diff --git a/webpack.common.config.js b/webpack.common.config.js index c657b39bd0..e3cecf9429 100644 --- a/webpack.common.config.js +++ b/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'; diff --git a/yarn.lock b/yarn.lock index 1cf6da5fdc..7d859835db 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3936,13 +3936,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.1": + version: 2.0.1 + resolution: "@vkontakte/vkjs@npm:2.0.1" dependencies: "@swc/helpers": "npm:^0.5.0" clsx: "npm:^2.1.1" - checksum: 10/f4ab9787eeff72df6b9c4f0e1075ac13674dc45498455e811507de385ec3d55dd76d46e0787b6aa64d703175af2fd1da9febe806667bd8b6a2fd2320f3ea67ce + checksum: 10/1eae0c1cebf2fbe080fd15e22017f0601ced645b41ea7bfba7efa6e39b717379c848ed3401747aab7a16c7c4a8a4d9f6a2544289a46b2a1d7f0c464d5bbfd159 languageName: node linkType: hard @@ -4140,7 +4140,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.1" "@vkontakte/vkui-floating-ui": "npm:^0.2.3" date-fns: "npm:^4.1.0" react: "npm:^18.3.1"