feat(*): remove postcss-global-data and add custom postcss-global-var…

…iables
core-ds · Nov 29, 2024 · d3234ee · d3234ee
1 parent fb3b80d
commit d3234ee
Show file tree

Hide file tree

Showing 13 changed files with 39 additions and 80 deletions.
diff --git a/packages/arui-scripts/package.json b/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",

diff --git a/packages/arui-scripts/src/configs/postcss.config.ts b/packages/arui-scripts/src/configs/postcss.config.ts
@@ -1,21 +1,36 @@
+import path from 'path';
+
+import type { Plugin, PluginCreator, Processor } from 'postcss';
+
+import { postCssGlobalVariables } from '../plugins/postcss-global-variables/postcss-global-variables';
+
 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]];
+        console.log('pluginName: ', pluginName);
+        if (typeof pluginName === 'string') {
+            return pluginName in options
+                ? [pluginName, options[pluginName]]
+                : pluginName;
         }
 
-        return pluginName;
+        console.log('pluginName.name', pluginName.name);
+
+        return () => pluginName(options[pluginName.name]);
     });
 }
 
@@ -26,6 +41,7 @@ export const postcssPlugins = [
     'postcss-mixins',
     'postcss-for',
     'postcss-each',
+    postCssGlobalVariables,
     'postcss-custom-media',
     'postcss-color-mod-function',
     !config.keepCssVars && 'postcss-custom-properties',
@@ -37,12 +53,15 @@ export const postcssPlugins = [
     'autoprefixer',
     'postcss-inherit',
     'postcss-discard-comments',
-].filter(Boolean) as string[];
+].filter(Boolean) as PostCssPluginName[];
 
 export const postcssPluginsOptions = {
     'postcss-import': {
         path: ['./src'],
     },
+    'postCssGlobalVariables': {
+        files: [path.join(__dirname, 'mq.css'), config.componentsTheme].filter(Boolean) as string[],
+    },
     'postcss-url': {
         url: 'rebase',
     },

diff --git a/packages/arui-scripts/src/configs/postcss.ts b/packages/arui-scripts/src/configs/postcss.ts
@@ -4,6 +4,8 @@ import { createPostcssConfig, postcssPlugins, postcssPluginsOptions } from './po
 const postcssConfig = applyOverrides(
     'postcss',
     createPostcssConfig(postcssPlugins, postcssPluginsOptions),
-);
+    // тк дается возможность переопределять options для плагинов импортируемых напрямую
+    // инициализировать их нужно после оверайдов
+).map((plugin) => typeof plugin === 'function' ? plugin() : plugin);
 
 export default postcssConfig;
diff --git a/packages/arui-scripts/src/configs/webpack.client.ts b/packages/arui-scripts/src/configs/webpack.client.ts
@@ -20,8 +20,6 @@ import { WebpackDeduplicationPlugin } from 'webpack-deduplication-plugin';
 import { WebpackManifestPlugin } from 'webpack-manifest-plugin';
 
 import { AruiRuntimePlugin, getInsertCssRuntimeMethod } from '../plugins/arui-runtime';
-import { insertPlugin } from '../plugins/insert-plugin';
-import { postCssGlobalData } from '../plugins/postcss-global-data/postcss-global-data';
 import { htmlTemplate } from '../templates/html.template';
 
 import { getImageMin } from './config-extras/minimizers';
@@ -287,10 +285,7 @@ export const createSingleClientWebpackConfig = (
                                 loader: require.resolve('postcss-loader'),
                                 options: {
                                     postcssOptions: {
-                                        // добавляем postCssGlobalData плагин перед postcss-custom-media
-                                        plugins: insertPlugin(postcssConf, 'postcss-custom-media', postCssGlobalData({
-                                            files: [path.join(__dirname, 'mq.css'), configs.componentsTheme].filter(Boolean) as string[]
-                                        }))
+                                        plugins: postcssConf,
                                     },
                                 },
                             },
@@ -318,10 +313,7 @@ export const createSingleClientWebpackConfig = (
                                 loader: require.resolve('postcss-loader'),
                                 options: {
                                     postcssOptions: {
-                                        // добавляем postCssGlobalData плагин перед postcss-custom-media
-                                        plugins: insertPlugin(postcssConf, 'postcss-custom-media', postCssGlobalData({
-                                            files: [path.join(__dirname, 'mq.css'), configs.componentsTheme].filter(Boolean) as string[]
-                                        }))
+                                        plugins: postcssConf,
                                     },
                                 },
                             },

diff --git a/packages/arui-scripts/src/configs/webpack.server.ts b/packages/arui-scripts/src/configs/webpack.server.ts
@@ -10,9 +10,6 @@ import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
 import webpack, { Configuration } from 'webpack';
 import nodeExternals from 'webpack-node-externals';
 
-import { insertPlugin } from '../plugins/insert-plugin';
-import { postCssGlobalData } from '../plugins/postcss-global-data/postcss-global-data';
-
 import getEntry from './util/get-entry';
 import { getWebpackCacheDependencies } from './util/get-webpack-cache-dependencies';
 import configs from './app-configs';
@@ -158,10 +155,7 @@ export const createServerConfig = (mode: 'dev' | 'prod'): Configuration => ({
                                 loader: require.resolve('postcss-loader'),
                                 options: {
                                     postcssOptions: {
-                                        // добавляем postCssGlobalData плагин перед postcss-custom-media
-                                        plugins: insertPlugin(postcssConf, 'postcss-custom-media', postCssGlobalData({
-                                            files: [path.join(__dirname, 'mq.css'), configs.componentsTheme].filter(Boolean) as string[]
-                                        }))
+                                        plugins: postcssConf,
                                     },
                                 },
                             },

diff --git a/packages/arui-scripts/src/plugins/__tests__/insert-plugin.test.ts b/packages/arui-scripts/src/plugins/__tests__/insert-plugin.test.ts
diff --git a/packages/arui-scripts/src/plugins/insert-plugin.ts b/packages/arui-scripts/src/plugins/insert-plugin.ts
diff --git a/...ostcss-global-data/postcss-global-data.ts → ...bal-variables/postcss-global-variables.ts b/...ostcss-global-data/postcss-global-data.ts → ...bal-variables/postcss-global-variables.ts
@@ -6,7 +6,7 @@ type PluginOptions = {
     files?: string[];
 };
 
-const postCssGlobalData: PluginCreator<PluginOptions> = (opts?: PluginOptions) => {
+const postCssGlobalVariables: 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-variables',
         prepare(): Plugin {
             return {
-                postcssPlugin: '@alfalab/postcss-global-data',
+                postcssPlugin: '@alfalab/postcss-global-variables',
                 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;
+postCssGlobalVariables.postcss = true;
 
-export { postCssGlobalData };
+export { postCssGlobalVariables };
diff --git a/...ls/__tests__/add-global-variable.tests.ts → ...ls/__tests__/add-global-variable.tests.ts b/...ls/__tests__/add-global-variable.tests.ts → ...ls/__tests__/add-global-variable.tests.ts
diff --git a/...s/__tests__/get-media-query-name.tests.ts → ...s/__tests__/get-media-query-name.tests.ts b/...s/__tests__/get-media-query-name.tests.ts → ...s/__tests__/get-media-query-name.tests.ts
diff --git a/.../utils/__tests__/parse-variables.tests.ts → .../utils/__tests__/parse-variables.tests.ts b/.../utils/__tests__/parse-variables.tests.ts → .../utils/__tests__/parse-variables.tests.ts
diff --git a/...lugins/postcss-global-data/utils/utils.ts → ...s/postcss-global-variables/utils/utils.ts b/...lugins/postcss-global-data/utils/utils.ts → ...s/postcss-global-variables/utils/utils.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,
     });

diff --git a/yarn.lock b/yarn.lock
@@ -2741,15 +2741,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@csstools/postcss-global-data@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "@csstools/postcss-global-data@npm:2.0.1"
-  peerDependencies:
-    postcss: ^8.4
-  checksum: 21e7057b7f527481c7374810c3b49a2d47414b39f4408c5d182bb6aab62d190da5b6173aa1accacb091994d1158cee2a651fbf2977957bbcf1fc654669886c1a
-  languageName: node
-  linkType: hard
-
 "@csstools/postcss-gradients-interpolation-method@npm:^3.0.6":
   version: 3.0.6
   resolution: "@csstools/postcss-gradients-interpolation-method@npm:3.0.6"
@@ -6485,7 +6476,6 @@ __metadata:
     "@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