feat(*): remove postcss-global-data and add custom postcss-global-environments postcss plugin

Author: Обмочевский Владислав Вячеславович

packages/arui-scripts/package.json

@@ -36,7 +36,6 @@
         "@babel/preset-react": "^7.23.3",
         "@babel/preset-typescript": "^7.23.3",
         "@babel/runtime": "^7.23.8",
-        "@csstools/postcss-global-data": "^2.0.1",
         "@pmmmwh/react-refresh-webpack-plugin": "0.5.11",
         "@swc/core": "^1.7.35",
         "@swc/jest": "^0.2.36",

packages/arui-scripts/src/configs/postcss.config.ts

@@ -1,23 +1,33 @@
 import path from 'path';
 
+import type { Plugin, PluginCreator, Processor } from 'postcss';
+
+import { postCssGlobalEnvironments } from '../plugins/postcss-global-environments/postcss-global-environments';
+
 import config from './app-configs';
 import supportingBrowsers from './supporting-browsers';
+
+type PostCssPluginName = string | PluginCreator<any>;
+type PostcssPlugin = string | [string, unknown] | (() => Plugin | Processor);
+
 /**
  * Функция для создания конфигурационного файла postcss
- * @param {String[]} plugins список плагинов
+ * @param {PostCssPluginName[]} plugins список плагинов
  * @param {Object} options коллекция конфигураций плагинов, где ключ - название плагина, а значение - аргумент для инициализации
  * @returns {*}
  */
 export function createPostcssConfig(
-    plugins: string[],
+    plugins: PostCssPluginName[],
     options: Record<string, unknown>,
-): string[] | unknown[] {
+): PostcssPlugin[] {
     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 () => pluginName(options[pluginName.name]);
     });
 }
 
@@ -28,7 +38,7 @@ export const postcssPlugins = [
     'postcss-mixins',
     'postcss-for',
     'postcss-each',
-    '@csstools/postcss-global-data',
+    postCssGlobalEnvironments,
     'postcss-custom-media',
     'postcss-color-mod-function',
     !config.keepCssVars && 'postcss-custom-properties',
@@ -40,13 +50,13 @@ export const postcssPlugins = [
     'autoprefixer',
     'postcss-inherit',
     'postcss-discard-comments',
-].filter(Boolean) as string[];
+].filter(Boolean) as PostCssPluginName[];
 
 export const postcssPluginsOptions = {
     'postcss-import': {
         path: ['./src'],
     },
-    '@csstools/postcss-global-data': {
+    '@alfalab/postcss-global-environments': {
         files: [path.join(__dirname, 'mq.css'), config.componentsTheme].filter(Boolean) as string[],
     },
     'postcss-url': {

packages/arui-scripts/src/configs/postcss.ts

@@ -1,6 +1,3 @@
-import { replacePlugin } from '../plugins/insert-plugin';
-import { postCssGlobalData } from '../plugins/postcss-global-data/postcss-global-data';
-
 import applyOverrides from './util/apply-overrides';
 import { createPostcssConfig, postcssPlugins, postcssPluginsOptions } from './postcss.config';
 
@@ -9,7 +6,4 @@ const postcssConfig = applyOverrides(
     createPostcssConfig(postcssPlugins, postcssPluginsOptions),
 );
 
-// заменяем postCssGlobalData на кастомный
-const modifiedPostcssConfig = replacePlugin(postcssConfig, '@csstools/postcss-global-data', postCssGlobalData)
-
-export default modifiedPostcssConfig;
+export default postcssConfig;

packages/arui-scripts/src/plugins/__tests__/insert-plugin.test.ts

@@ -6,7 +6,7 @@ type PluginOptions = {
     files?: string[];
 };
 
-const postCssGlobalData: PluginCreator<PluginOptions> = (opts?: PluginOptions) => {
+const postCssGlobalEnvironments: PluginCreator<PluginOptions> = (opts?: PluginOptions) => {
 	const options = {
         files: [],
         ...opts,
@@ -18,13 +18,14 @@ const postCssGlobalData: PluginCreator<PluginOptions> = (opts?: PluginOptions) =
     let rulesSelectors = new Set<Rule>();
 
     return {
-        postcssPlugin: '@alfalab/postcss-global-data',
+        postcssPlugin: '@alfalab/postcss-global-environments',
         prepare(): Plugin {
             return {
-                postcssPlugin: '@alfalab/postcss-global-data',
+                postcssPlugin: '@alfalab/postcss-global-environments',
                 Once(root, postcssHelpers): void {
                     if (!Object.keys(parsedVariables).length) {
                         options.files.forEach((filePath) => {
+                            console.log('parse file: ', filePath);
                             const importedCss = parseImport(root, postcssHelpers, filePath);
 
                             parseVariables(importedCss, parsedVariables);
@@ -47,6 +48,6 @@ const postCssGlobalData: PluginCreator<PluginOptions> = (opts?: PluginOptions) =
     };
 };
 
-postCssGlobalData.postcss = true;
+postCssGlobalEnvironments.postcss = true;
 
-export { postCssGlobalData };
+export { postCssGlobalEnvironments };

packages/arui-scripts/src/plugins/insert-plugin.ts

@@ -16,7 +16,7 @@ export function parseImport(root: Root, postcssHelpers: Helpers, filePath: strin
 
     postcssHelpers.result.messages.push({
         type: 'dependency',
-        plugin: 'postcss-global-data',
+        plugin: 'postcss-global-environments',
         file: resolvedPath,
         parent: root.source?.input?.file,
     });