diff --git a/.changeset/warm-terms-shave.md b/.changeset/warm-terms-shave.md new file mode 100644 index 00000000..0b19422d --- /dev/null +++ b/.changeset/warm-terms-shave.md @@ -0,0 +1,5 @@ +--- +'arui-scripts': patch +--- + +Добавлена возможность задавать css префикс для MF модулей diff --git a/packages/arui-scripts/docs/modules.md b/packages/arui-scripts/docs/modules.md index 29a44b96..80ca8c21 100644 --- a/packages/arui-scripts/docs/modules.md +++ b/packages/arui-scripts/docs/modules.md @@ -338,10 +338,10 @@ export const MyAwesomeComponent = () => { трудоемкой задачей, особенно если у вас уже есть большая кодовая база. arui-scripts предоставляет два решения для этой проблемы: -- _compat_ модули +- _css-prefix_ - использование shadow dom -## compat модули +## css-prefix Суть метода заключается в том, что ко всем стилям модуля будет добавляться префикс, который позволит изолировать стили модуля от стилей приложения-потребителя. @@ -354,7 +354,7 @@ arui-scripts предоставляет два решения для этой п 1. Изменить конфигурацию модуля в `arui-scripts.config.ts`: ```ts -// ./arui-scripts.config.ts +// ./arui-scripts.config.ts compatModules import type { PackageSettings } from 'arui-scripts'; const aruiScriptsConfig: PackageSettings = { @@ -384,6 +384,30 @@ const aruiScriptsConfig: PackageSettings = { export default aruiScriptsConfig; ``` +```ts +// ./arui-scripts.config.ts module federation +import type { PackageSettings } from 'arui-scripts'; + +const aruiScriptsConfig: PackageSettings = { + modules: { + shared: { + 'react': '^17.0.0', + 'react-dom': '^17.0.0', + }, + exposes: { + 'Module': './src/modules/module/index', + }, + options: { + 'Module': { + cssPrefix: '.my-module' + } + } + } +} + +export default aruiScriptsConfig; +``` + 2. Изменить входную точку модуля: ```tsx diff --git a/packages/arui-scripts/src/configs/app-configs/types.ts b/packages/arui-scripts/src/configs/app-configs/types.ts index 00da3e64..d533deef 100644 --- a/packages/arui-scripts/src/configs/app-configs/types.ts +++ b/packages/arui-scripts/src/configs/app-configs/types.ts @@ -89,13 +89,19 @@ export type AppConfigs = { name?: string; shared: any; // webpack don't expose this type exposes?: Record; + options?: { + [moduleId: string]: ModuleConfigBase; + }; } | null; }; -type CompatModuleConfigBase = { +export type ModuleConfigBase = { + cssPrefix?: false | string; +}; + +type CompatModuleConfigBase = ModuleConfigBase & { entry: string; externals?: Record; - cssPrefix?: false | string; }; export type CompatModuleConfig = CompatModuleConfigBase & { diff --git a/packages/arui-scripts/src/configs/modules.ts b/packages/arui-scripts/src/configs/modules.ts index 29786964..b58bc430 100644 --- a/packages/arui-scripts/src/configs/modules.ts +++ b/packages/arui-scripts/src/configs/modules.ts @@ -22,6 +22,21 @@ export function patchMainWebpackConfigForModules(webpackConf: webpack.Configurat return webpackConf; } + const moduleOptions = configs.modules.options || {}; + + Object.keys(moduleOptions).forEach((moduleName) => { + const {cssPrefix} = moduleOptions[moduleName] + + if (cssPrefix) { + // Добавляем префикс для css-классов, чтобы изолировать стили модуля от стилей основного приложения + const cssRule = findLoader(webpackConf, '/\\.css$/'); + const cssModulesRule = findLoader(webpackConf, '/\\.module\\.css$/'); + + addPrefixCssRule(cssRule, cssPrefix); + addPrefixCssRule(cssModulesRule, `:global(${cssPrefix})`); + } + }); + webpackConf.output.publicPath = haveExposedDefaultModules() ? 'auto' // Для того чтобы модули могли подключаться из разных мест, нам необходимо использовать auto. Для корректной работы в IE надо подключaть https://github.com/amiller-gh/currentScript-polyfill : configs.publicPath;