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..10eedefd 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,28 @@ 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: { + 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..80719b76 100644 --- a/packages/arui-scripts/src/configs/app-configs/types.ts +++ b/packages/arui-scripts/src/configs/app-configs/types.ts @@ -89,13 +89,17 @@ export type AppConfigs = { name?: string; shared: any; // webpack don't expose this type exposes?: Record; + options?: 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..5dc8885d 100644 --- a/packages/arui-scripts/src/configs/modules.ts +++ b/packages/arui-scripts/src/configs/modules.ts @@ -22,6 +22,12 @@ export function patchMainWebpackConfigForModules(webpackConf: webpack.Configurat return webpackConf; } + const {cssPrefix} = configs.modules.options || {}; + + if (cssPrefix) { + addCssPrefix(webpackConf, cssPrefix); + } + webpackConf.output.publicPath = haveExposedDefaultModules() ? 'auto' // Для того чтобы модули могли подключаться из разных мест, нам необходимо использовать auto. Для корректной работы в IE надо подключaть https://github.com/amiller-gh/currentScript-polyfill : configs.publicPath; @@ -73,6 +79,14 @@ export function getExposeLoadersFormCompatModules() { }); } +function addCssPrefix(webpackConf: webpack.Configuration, cssPrefix: string){ + const cssRule = findLoader(webpackConf, '/\\.css$/'); + const cssModulesRule = findLoader(webpackConf, '/\\.module\\.css$/'); + + addPrefixCssRule(cssRule, cssPrefix); + addPrefixCssRule(cssModulesRule, `:global(${cssPrefix})`); +} + function addPrefixCssRule(rule: webpack.RuleSetRule | undefined, prefix: string) { if (!rule || !rule.use || !Array.isArray(rule.use)) { return; @@ -122,12 +136,7 @@ export function patchWebpackConfigForCompat( const cssPrefix = getCssPrefixForModule(module); if (cssPrefix) { - // Добавляем префикс для css-классов, чтобы изолировать стили модуля от стилей основного приложения - const cssRule = findLoader(webpackConf, '/\\.css$/'); - const cssModulesRule = findLoader(webpackConf, '/\\.module\\.css$/'); - - addPrefixCssRule(cssRule, cssPrefix); - addPrefixCssRule(cssModulesRule, `:global(${cssPrefix})`); + addCssPrefix(webpackConf, cssPrefix); } return webpackConf;