arui-scripts 18.5.0 → 18.6.0

package/.turbo/turbo-lint.log

@@ -76,8 +76,12 @@
    35:5   warning  Forbidden non-null assertion                                    @typescript-eslint/no-non-null-assertion
   126:54  warning  Unexpected any. Specify a different type                        @typescript-eslint/no-explicit-any
 
+/home/runner/work/arui-scripts/arui-scripts/packages/arui-scripts/src/configs/postcss.config.ts
+  10:49  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+  11:88  warning  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
+
 /home/runner/work/arui-scripts/arui-scripts/packages/arui-scripts/src/configs/postcss.ts
-  9:8  warning  Prefer named exports  import/no-default-export
+  13:8  warning  Prefer named exports  import/no-default-export
 
 /home/runner/work/arui-scripts/arui-scripts/packages/arui-scripts/src/configs/process-assets-plugin-output.ts
    5:8   warning  Using exported name 'configs' as identifier for default export  import/no-named-as-default
@@ -170,6 +174,6 @@
 /home/runner/work/arui-scripts/arui-scripts/packages/arui-scripts/src/types.d.ts
   4:12  warning  Prefer named exports  import/no-default-export
 
-✖ 77 problems (0 errors, 77 warnings)
+✖ 79 problems (0 errors, 79 warnings)
   0 errors and 2 warnings potentially fixable with the `--fix` option.
 

package/.turbo/turbo-test.log

@@ -5,20 +5,23 @@ ts-jest[versions] (WARN) Version 29.7.0 of jest installed has not been tested wi
 ts-jest[versions] (WARN) Version 5.6.3 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=4.3.0 <5.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
 ts-jest[versions] (WARN) Version 5.6.3 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=4.3.0 <5.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
 ts-jest[versions] (WARN) Version 5.6.3 of typescript installed has not been tested with ts-jest. If you're experiencing issues, consider using a supported version (>=4.3.0 <5.0.0-0). Please do not report issues in ts-jest if you are using unsupported versions.
-PASS src/configs/util/__tests__/get-polyfills.tests.ts (22 s)
-PASS src/configs/util/__tests__/apply-overrides.tests.ts
+PASS src/configs/app-configs/__tests__/update-with-presets.tests.ts (18.153 s)
+PASS src/configs/util/__tests__/get-polyfills.tests.ts
+PASS src/plugins/postcss-global-variables/utils/__tests__/add-global-variable.tests.ts (18.679 s)
 PASS src/configs/app-configs/__tests__/update-with-env.tests.ts
-PASS src/configs/app-configs/__tests__/update-with-presets.tests.ts (23.524 s)
-PASS src/configs/app-configs/__tests__/validate-settings-keys.tests.ts
+PASS src/configs/util/__tests__/apply-overrides.tests.ts
+PASS src/plugins/postcss-global-variables/utils/__tests__/parse-variables.tests.ts
 PASS src/configs/app-configs/__tests__/update-with-package.tests.ts
+PASS src/configs/app-configs/__tests__/validate-settings-keys.tests.ts
+PASS src/plugins/postcss-global-variables/utils/__tests__/get-media-query-name.tests.ts
 Failed to load /home/runner/work/arui-scripts/arui-scripts/packages/arui-scripts/tsconfig.json: Missing baseUrl in compilerOptions
 Failed to load /home/runner/work/arui-scripts/arui-scripts/packages/arui-scripts/tsconfig.json: Missing baseUrl in compilerOptions
 Failed to load /home/runner/work/arui-scripts/arui-scripts/packages/arui-scripts/tsconfig.json: Missing baseUrl in compilerOptions
 Failed to load /home/runner/work/arui-scripts/arui-scripts/packages/arui-scripts/tsconfig.json: Missing baseUrl in compilerOptions
-PASS src/configs/util/__tests__/find-plugin.tests.ts (28.952 s)
+PASS src/configs/util/__tests__/find-plugin.tests.ts (23.652 s)
 
-Test Suites: 7 passed, 7 total
-Tests:       21 passed, 21 total
+Test Suites: 10 passed, 10 total
+Tests:       27 passed, 27 total
 Snapshots:   0 total
-Time:        30.509 s
+Time:        24.826 s
 Ran all test suites.

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # [15.3.0](https://github.com/core-ds/arui-scripts/compare/v15.2.0...v15.3.0) (2023-06-30)
 
+## 18.6.0
+
+### Minor Changes
+
+-   [#287](https://github.com/core-ds/arui-scripts/pull/287) [`fb3b80d`](https://github.com/core-ds/arui-scripts/commit/fb3b80db242978d88eb6c0eac382498b3aa04459) Thanks [@VladislavNsk](https://github.com/VladislavNsk)! - Добавлен кастомный плагин postcss-global-variables, для оптимизации времени обработки глобальных переменных.
+    @csstools/postcss-global-data _удален_
+
+    Проекты, которые использовали в оверрайдах кастомные настройки для плагина @csstools/postcss-global-data, должны перейти на использование postcss-global-variables следующим образом
+
+    ```
+    postcss: (config) => {
+      const overrideConfig = config.map((plugin) => {
+        if (plugin.name === 'postCssGlobalVariables') {
+          return {
+            ...plugin,
+            options: plugin.options.concat([
+              // ваши файлы
+            ])
+          }
+        }
+        return plugin;
+      });
+
+      return overrideConfig;
+    }
+    ```
+
+    Плагин работает только с глобальными переменными, если вам надо вставить что-то другое, отличное от глобальных переменных, вам нужно будет добавить @csstools/postcss-global-data в свой проект самостоятельно
+
 ## 18.5.0
 
 ### Minor Changes

package/build/configs/postcss.config.d.ts

@@ -1,16 +1,23 @@
+import type { PluginCreator } from 'postcss';
+type PostCssPluginName = string | PluginCreator<any>;
+type PostcssPlugin = string | [string, unknown] | {
+    name: string;
+    plugin: PluginCreator<any>;
+    options?: unknown;
+};
 /**
  * Функция для создания конфигурационного файла postcss
- * @param {String[]} plugins список плагинов
+ * @param {PostCssPluginName[]} plugins список плагинов
  * @param {Object} options коллекция конфигураций плагинов, где ключ - название плагина, а значение - аргумент для инициализации
  * @returns {*}
  */
-export declare function createPostcssConfig(plugins: string[], options: Record<string, unknown>): string[] | unknown[];
-export declare const postcssPlugins: string[];
+export declare function createPostcssConfig(plugins: PostCssPluginName[], options: Record<string, unknown>): PostcssPlugin[];
+export declare const postcssPlugins: PostCssPluginName[];
 export declare const postcssPluginsOptions: {
     'postcss-import': {
         path: string[];
     };
-    '@csstools/postcss-global-data': {
+    postCssGlobalVariables: {
         files: string[];
     };
     'postcss-url': {
@@ -26,3 +33,4 @@ export declare const postcssPluginsOptions: {
         overrideBrowserslist: string[];
     };
 };
+export {};

package/build/configs/postcss.config.js

@@ -6,20 +6,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.postcssPluginsOptions = exports.postcssPlugins = void 0;
 exports.createPostcssConfig = createPostcssConfig;
 const path_1 = __importDefault(require("path"));
+const postcss_global_variables_1 = require("../plugins/postcss-global-variables/postcss-global-variables");
 const app_configs_1 = __importDefault(require("./app-configs"));
 const supporting_browsers_1 = __importDefault(require("./supporting-browsers"));
 /**
  * Функция для создания конфигурационного файла postcss
- * @param {String[]} plugins список плагинов
+ * @param {PostCssPluginName[]} plugins список плагинов
  * @param {Object} options коллекция конфигураций плагинов, где ключ - название плагина, а значение - аргумент для инициализации
  * @returns {*}
  */
 function createPostcssConfig(plugins, options) {
     return plugins.map((pluginName) => {
-        if (pluginName in options) {
-            return [pluginName, options[pluginName]];
+        if (typeof pluginName === 'string') {
+            return pluginName in options
+                ? [pluginName, options[pluginName]]
+                : pluginName;
         }
-        return pluginName;
+        return {
+            name: pluginName.name,
+            plugin: pluginName,
+            options: options[pluginName.name]
+        };
     });
 }
 exports.postcssPlugins = [
@@ -29,7 +36,7 @@ exports.postcssPlugins = [
     'postcss-mixins',
     'postcss-for',
     'postcss-each',
-    '@csstools/postcss-global-data',
+    postcss_global_variables_1.postCssGlobalVariables,
     'postcss-custom-media',
     'postcss-color-mod-function',
     !app_configs_1.default.keepCssVars && 'postcss-custom-properties',
@@ -46,7 +53,7 @@ exports.postcssPluginsOptions = {
     'postcss-import': {
         path: ['./src'],
     },
-    '@csstools/postcss-global-data': {
+    'postCssGlobalVariables': {
         files: [path_1.default.join(__dirname, 'mq.css'), app_configs_1.default.componentsTheme].filter(Boolean),
     },
     'postcss-url': {

package/build/configs/postcss.d.ts

@@ -1,2 +1,2 @@
-declare const postcssConfig: string[] | unknown[];
+declare const postcssConfig: (string | import("postcss").Processor | import("postcss").Plugin | [string, unknown])[];
 export default postcssConfig;

package/build/configs/postcss.js

@@ -5,5 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const apply_overrides_1 = __importDefault(require("./util/apply-overrides"));
 const postcss_config_1 = require("./postcss.config");
-const postcssConfig = (0, apply_overrides_1.default)('postcss', (0, postcss_config_1.createPostcssConfig)(postcss_config_1.postcssPlugins, postcss_config_1.postcssPluginsOptions));
+const postcssConfig = (0, apply_overrides_1.default)('postcss', (0, postcss_config_1.createPostcssConfig)(postcss_config_1.postcssPlugins, postcss_config_1.postcssPluginsOptions)).map((plugin) => typeof plugin === 'string' || Array.isArray(plugin)
+    ? plugin
+    : plugin.plugin(plugin.options));
 exports.default = postcssConfig;

package/build/plugins/postcss-global-variables/postcss-global-variables.d.ts

@@ -0,0 +1,6 @@
+import type { PluginCreator } from 'postcss';
+type PluginOptions = {
+    files?: string[];
+};
+declare const postCssGlobalVariables: PluginCreator<PluginOptions>;
+export { postCssGlobalVariables };

package/build/plugins/postcss-global-variables/postcss-global-variables.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.postCssGlobalVariables = void 0;
+const utils_1 = require("./utils/utils");
+const postCssGlobalVariables = (opts) => {
+    const options = Object.assign({ files: [] }, opts);
+    const parsedVariables = {};
+    const parsedCustomMedia = {};
+    let rulesSelectors = new Set();
+    return {
+        postcssPlugin: '@alfalab/postcss-global-variables',
+        prepare() {
+            return {
+                postcssPlugin: '@alfalab/postcss-global-variables',
+                Once(root, postcssHelpers) {
+                    if (!Object.keys(parsedVariables).length) {
+                        options.files.forEach((filePath) => {
+                            const importedCss = (0, utils_1.parseImport)(root, postcssHelpers, filePath);
+                            (0, utils_1.parseVariables)(importedCss, parsedVariables);
+                            (0, utils_1.parseMediaQuery)(importedCss, parsedCustomMedia);
+                        });
+                    }
+                    const rootRule = (0, utils_1.insertParsedCss)(root, parsedVariables, parsedCustomMedia);
+                    root.append(rootRule);
+                    rulesSelectors.add(rootRule);
+                },
+                OnceExit() {
+                    rulesSelectors.forEach((rule) => {
+                        rule.remove();
+                    });
+                    rulesSelectors = new Set();
+                },
+            };
+        },
+    };
+};
+exports.postCssGlobalVariables = postCssGlobalVariables;
+postCssGlobalVariables.postcss = true;

package/build/plugins/postcss-global-variables/utils/utils.d.ts

@@ -0,0 +1,7 @@
+import { AtRule, Helpers, Root, Rule } from 'postcss';
+export declare const getMediaQueryName: (rule: AtRule) => string;
+export declare function parseImport(root: Root, postcssHelpers: Helpers, filePath: string): Root;
+export declare const parseVariables: (importedFile: Root, parsedVariables: Record<string, string>) => void;
+export declare const parseMediaQuery: (importedFile: Root, parsedCustomMedia: Record<string, AtRule>) => void;
+export declare function addGlobalVariable(cssValue: string, rootSelector: Rule, parsedVariables: Record<string, string>): void;
+export declare const insertParsedCss: (root: Root, parsedVariables: Record<string, string>, parsedCustomMedia: Record<string, AtRule>) => Rule;

package/build/plugins/postcss-global-variables/utils/utils.js

@@ -0,0 +1,77 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.insertParsedCss = exports.parseMediaQuery = exports.parseVariables = exports.getMediaQueryName = void 0;
+exports.parseImport = parseImport;
+exports.addGlobalVariable = addGlobalVariable;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const postcss_1 = require("postcss");
+const getMediaQueryName = (rule) => rule.params.split(' ')[0];
+exports.getMediaQueryName = getMediaQueryName;
+function parseImport(root, postcssHelpers, filePath) {
+    var _a, _b;
+    let resolvedPath = '';
+    try {
+        resolvedPath = path_1.default.resolve(filePath);
+    }
+    catch (err) {
+        throw new Error(`Failed to read ${filePath} with error ${(err instanceof Error) ? err.message : err}`);
+    }
+    postcssHelpers.result.messages.push({
+        type: 'dependency',
+        plugin: 'postcss-global-environments',
+        file: resolvedPath,
+        parent: (_b = (_a = root.source) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.file,
+    });
+    const fileContents = fs_1.default.readFileSync(resolvedPath, 'utf8');
+    return postcssHelpers.postcss.parse(fileContents, { from: resolvedPath });
+}
+const parseVariables = (importedFile, parsedVariables) => {
+    importedFile.walkDecls((decl) => {
+        // eslint-disable-next-line no-param-reassign
+        parsedVariables[decl.prop] = decl.value;
+    });
+};
+exports.parseVariables = parseVariables;
+const parseMediaQuery = (importedFile, parsedCustomMedia) => {
+    importedFile.walkAtRules('custom-media', (mediaRule) => {
+        const mediaName = (0, exports.getMediaQueryName)(mediaRule);
+        // eslint-disable-next-line no-param-reassign
+        parsedCustomMedia[mediaName] = mediaRule;
+    });
+};
+exports.parseMediaQuery = parseMediaQuery;
+function addGlobalVariable(cssValue, rootSelector, parsedVariables) {
+    const variableMatches = cssValue.match(/var\(\s*--([^)]+)\s*\)/g);
+    if (variableMatches) {
+        variableMatches.forEach((match) => {
+            // var(--gap-24) => --gap-24
+            const variableName = match.slice(4, -1).trim();
+            if (parsedVariables[variableName]) {
+                rootSelector.append(new postcss_1.Declaration({ prop: variableName, value: parsedVariables[variableName] }));
+                // Рекурсивно проходимся по значениям css, там тоже могут использоваться переменные
+                addGlobalVariable(parsedVariables[variableName], rootSelector, parsedVariables);
+            }
+        });
+    }
+}
+const insertParsedCss = (root, parsedVariables, parsedCustomMedia) => {
+    const rootRule = new postcss_1.Rule({ selector: ':root' });
+    root.walkDecls((decl) => {
+        addGlobalVariable(decl.value, rootRule, parsedVariables);
+    });
+    root.walkAtRules('media', (rule) => {
+        const mediaFullName = (0, exports.getMediaQueryName)(rule);
+        if (mediaFullName.startsWith('(--')) {
+            const mediaName = mediaFullName.slice(1, -1);
+            if (parsedCustomMedia[mediaName]) {
+                root.append(parsedCustomMedia[mediaName]);
+            }
+        }
+    });
+    return rootRule;
+};
+exports.insertParsedCss = insertParsedCss;