From dfe866b59067a8cd8e31d3b14819b80fc5442349 Mon Sep 17 00:00:00 2001
From: fulcanellee <45999900+fulcanellee@users.noreply.github.com>
Date: Tue, 15 Oct 2024 20:11:08 +0700
Subject: [PATCH] Fix/js vars colors (#1359)

* feat(vars): add js custom properties

* feat(vars): add js custom properties
---
 .changeset/good-chefs-deny.md                 |  5 ++
 ...export-css-custom-properties-as-js-vars.js | 83 ++++++++++++++++---
 packages/vars/src/docs/description.mdx        |  8 +-
 3 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/good-chefs-deny.md

diff --git a/.changeset/good-chefs-deny.md b/.changeset/good-chefs-deny.md
new file mode 100644
index 0000000000..336d68d3d9
--- /dev/null
+++ b/.changeset/good-chefs-deny.md
@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-vars': minor
+---
+
+В сборку добавлено создание js-файлов для цветовых палитр. Это позволяет импортировать js-стили конкретной палитры.
diff --git a/bin/export-css-custom-properties-as-js-vars.js b/bin/export-css-custom-properties-as-js-vars.js
index 8ca864d66b..9bfe86c02d 100644
--- a/bin/export-css-custom-properties-as-js-vars.js
+++ b/bin/export-css-custom-properties-as-js-vars.js
@@ -10,6 +10,21 @@ const distPath = '../packages/vars/dist';
 fs.mkdirSync(path.resolve(__dirname, distPath), { recursive: true });
 
 const BUILDS = ['es5', 'cssm', 'moderncssm', 'esm', 'modern'];
+const PALETTES = [
+    'colors',
+    'colors-addons',
+    'colors-bluetint',
+    'colors-decorative',
+    'colors-indigo',
+    'colors-pfm',
+    'colors-qualitative',
+    'colors-sequential',
+    'colors-students',
+    'colors-transparent',
+    'colors-x5',
+    'shadows-bluetint',
+    'shadows-indigo',
+];
 
 function ensureDirectoryExist(filePath) {
     const dirname = path.dirname(filePath);
@@ -48,18 +63,35 @@ function createExporter(buildName) {
     };
 }
 
+/** формирует файлы деклараций d.ts */
+function execTsc(destJsPath) {
+    return function () {
+        console.log(`create d.ts => ${destJsPath.split('/packages')[1]}`);
+
+        shell.exec(
+            `tsc --typeRoots [] --declaration --emitDeclarationOnly --allowJs ${destJsPath}`,
+        );
+    };
+}
+
+/** формирует путь для создания js модуля с css переменными (учитывая тип сборки) */
+function createJSPathDestination(buildName, srcFileName) {
+    return path.resolve(
+        __dirname,
+        distPath,
+        buildName === 'es5' ? '' : buildName,
+        `${srcFileName}.js`,
+    );
+}
+
+/** собирает css переменные из vars/index.css в единый js модуль */
 function exportCssVarsAsJs(srcFileName) {
     const cssPath = path.resolve(__dirname, `../packages/vars/src/${srcFileName}.css`);
     const css = fs.readFileSync(cssPath, 'utf-8');
 
     return Promise.all(
         BUILDS.map((buildName) => {
-            const destJsPath = path.resolve(
-                __dirname,
-                distPath,
-                buildName === 'es5' ? '' : buildName,
-                `${srcFileName}.js`,
-            );
+            const destJsPath = createJSPathDestination(buildName, srcFileName);
 
             ensureDirectoryExist(destJsPath);
             return postcss()
@@ -71,11 +103,35 @@ function exportCssVarsAsJs(srcFileName) {
                     }),
                 )
                 .process(css, { from: cssPath, to: destJsPath })
-                .then(() => {
-                    shell.exec(
-                        `tsc --typeRoots [] --declaration --emitDeclarationOnly --allowJs ${destJsPath}`,
-                    );
-                });
+                .then(execTsc(destJsPath));
+        }),
+    );
+}
+
+/** собирает js модуль для каждого css файла по отдельности */
+function buildPalettesCustomCSSProperties() {
+    return Promise.all(
+        PALETTES.map((palette) => {
+            const cssPath = path.resolve(__dirname, `../packages/vars/src/${palette}.css`);
+            const css = fs.readFileSync(cssPath, 'utf-8');
+
+            BUILDS.map((buildName) => {
+                const destJsPath = createJSPathDestination(buildName, `${palette}.module`);
+
+                ensureDirectoryExist(destJsPath);
+
+                console.log(`build [ ${palette} => ${buildName} ]`);
+
+                return postcss()
+                    .use(
+                        exportCustomVariables({
+                            exporter: createExporter(buildName),
+                            destination: destJsPath,
+                        }),
+                    )
+                    .process(css, { from: cssPath, to: destJsPath })
+                    .then(execTsc(destJsPath));
+            });
         }),
     );
 }
@@ -86,3 +142,8 @@ exportCssVarsAsJs('index')
         console.error(reason);
         process.exit(1);
     });
+
+buildPalettesCustomCSSProperties().catch((reason) => {
+    console.error(reason);
+    process.exit(1);
+});
diff --git a/packages/vars/src/docs/description.mdx b/packages/vars/src/docs/description.mdx
index c8fb38885c..82d1c499dd 100644
--- a/packages/vars/src/docs/description.mdx
+++ b/packages/vars/src/docs/description.mdx
@@ -15,7 +15,7 @@ import mixins from '!!raw-loader!../mixins.css';
 @import '@alfalab/core-components/vars';
 ```
 
-Все CSS-переменные можно также экспортировать в виде JS-переменных:
+Все CSS-переменные можно также импортировать в виде JS-переменных:
 
 ```typescript
 import * as vars from '@alfalab/core-components/vars';
@@ -23,6 +23,12 @@ import * as vars from '@alfalab/core-components/vars';
 vars.gap2xl === '32px'; //true
 ```
 
+В корневом файле `/vars/index.js` находятся не все доступные палитры. В этом случае вы можете импортировать цвет напрямую из JS-файла
+
+```typescript
+import {colorLightDecorativeOrange} from '@alfalab/core-components/vars/colors-decorative.module';
+```
+
 Для использования в проекте, добавьте один из [подготовленных бандлов](https://github.com/core-ds/core-components/tree/master/packages/vars/src/bundle) продуктов в один из корневых файлов CSS:
 
 ```css