Merge pull request #283 from core-ds/fix/skip-css-prefix-for-root

fix(postcss-prefix-selector): keep only prefix for :root selector
core-ds · Nov 6, 2024 · 10748c5 · 10748c5
2 parents 6f1e6ec + c84f2f6
commit 10748c5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/.changeset/chilled-schools-itch.md b/.changeset/chilled-schools-itch.md
@@ -0,0 +1,5 @@
+---
+'arui-scripts': minor
+---
+
+Исправление реализации префикса для :root селектора для правильной работы css переменных
diff --git 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<PostCssPrefixOptions> = (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}`;
+                });
             });
         },
     };