diff --git a/packages/arui-scripts/src/plugins/postcss-prefix-selector.ts b/packages/arui-scripts/src/plugins/postcss-prefix-selector.ts index edda10e3..079509c2 100644 --- a/packages/arui-scripts/src/plugins/postcss-prefix-selector.ts +++ b/packages/arui-scripts/src/plugins/postcss-prefix-selector.ts @@ -8,6 +8,8 @@ type PostCssPrefixOptions = { const VisitedRule = Symbol('VisitedRule'); +const ROOT_SELECTOR = ':root'; + type RootWithVisitedRule = Root & { [VisitedRule]?: boolean; }; @@ -49,7 +51,18 @@ const postCssPrefix: PluginCreator = (options) => { return; } - rule.selectors = rule.selectors.map((selector) => `${prefix}${selector}`); + rule.selectors = rule.selectors.map((selector) => { + /** + * Оборачивам только самим префиксом без :root. + * Позволяет инкапсулировать css переменные под классом. + * В таком случае они будут доступны в модулях приложений после использования флага keepCssVars. + */ + if (selector === ROOT_SELECTOR) { + return prefix; + } + + return `${prefix}${selector}`; + }); }); }, };