From 941138ea0517914e30598745cd146fe9d903232e Mon Sep 17 00:00:00 2001 From: Inomdzhon Mirdzhamolov Date: Wed, 13 Nov 2024 16:49:15 +0300 Subject: [PATCH] fix(packages/vkui): add missed "type": "module" MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Это повлекло за собой следующие изменения: - ~`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/{.eslintrc.js => .eslintrc.cjs} | 0 .../{postcss.config.js => postcss.config.cjs} | 2 +- packages/vkui/package.json | 3 +- ...les.config.ts => rspack.styles.config.mjs} | 29 ++++++------- .../vkui/scripts/generateCSSCustomMedias.mjs | 5 +-- .../vkui/scripts/{postcss.js => postcss.cjs} | 30 ++++++++----- packages/vkui/shared.config.js | 42 ------------------ packages/vkui/tsconfig.json | 16 +------ shared.js | 43 +++++++++++-------- stylelint.config.mjs | 14 +++--- webpack.common.config.js | 2 +- 11 files changed, 73 insertions(+), 113 deletions(-) rename packages/vkui/{.eslintrc.js => .eslintrc.cjs} (100%) rename packages/vkui/cssm/{postcss.config.js => postcss.config.cjs} (67%) 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/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/package.json b/packages/vkui/package.json index 5982f0b01b..211187998f 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", 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/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';