From d3234eebe4841f591a1c5e039880cf48c55c254e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=9E=D0=B1=D0=BC=D0=BE=D1=87=D0=B5=D0=B2=D1=81=D0=BA?= =?UTF-8?q?=D0=B8=D0=B9=20=D0=92=D0=BB=D0=B0=D0=B4=D0=B8=D1=81=D0=BB=D0=B0?= =?UTF-8?q?=D0=B2=20=D0=92=D1=8F=D1=87=D0=B5=D1=81=D0=BB=D0=B0=D0=B2=D0=BE?= =?UTF-8?q?=D0=B2=D0=B8=D1=87?= Date: Fri, 29 Nov 2024 13:43:38 +0700 Subject: [PATCH] feat(*): remove postcss-global-data and add custom postcss-global-variables --- packages/arui-scripts/package.json | 1 - .../src/configs/postcss.config.ts | 33 +++++++++++++++---- packages/arui-scripts/src/configs/postcss.ts | 4 ++- .../src/configs/webpack.client.ts | 12 ++----- .../src/configs/webpack.server.ts | 8 +---- .../plugins/__tests__/insert-plugin.test.ts | 19 ----------- .../arui-scripts/src/plugins/insert-plugin.ts | 19 ----------- .../postcss-global-variables.ts} | 11 ++++--- .../__tests__/add-global-variable.tests.ts | 0 .../__tests__/get-media-query-name.tests.ts | 0 .../utils/__tests__/parse-variables.tests.ts | 0 .../utils/utils.ts | 2 +- yarn.lock | 10 ------ 13 files changed, 39 insertions(+), 80 deletions(-) delete mode 100644 packages/arui-scripts/src/plugins/__tests__/insert-plugin.test.ts delete mode 100644 packages/arui-scripts/src/plugins/insert-plugin.ts rename packages/arui-scripts/src/plugins/{postcss-global-data/postcss-global-data.ts => postcss-global-variables/postcss-global-variables.ts} (79%) rename packages/arui-scripts/src/plugins/{postcss-global-data => postcss-global-variables}/utils/__tests__/add-global-variable.tests.ts (100%) rename packages/arui-scripts/src/plugins/{postcss-global-data => postcss-global-variables}/utils/__tests__/get-media-query-name.tests.ts (100%) rename packages/arui-scripts/src/plugins/{postcss-global-data => postcss-global-variables}/utils/__tests__/parse-variables.tests.ts (100%) rename packages/arui-scripts/src/plugins/{postcss-global-data => postcss-global-variables}/utils/utils.ts (98%) diff --git a/packages/arui-scripts/package.json b/packages/arui-scripts/package.json index 539ec098..d10c4e7a 100644 --- 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 index 034c929b..2fc22d0a 100644 --- 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; +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[] { +): 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 index 122c706b..1b7dfdd5 100644 --- 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 index d01aa713..56e5d9d3 100644 --- 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 index b5a0c20d..3fd34299 100644 --- 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 deleted file mode 100644 index 9ad157c8..00000000 --- a/packages/arui-scripts/src/plugins/__tests__/insert-plugin.test.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { insertPlugin } from '../insert-plugin'; - -describe('insertPlugin', () => { - it('Должен корректно добавить плагин перед искомым плагином', () => { - const plugins = ['plugin1', 'plugin2', 'plugin3', 'plugin4']; - - const newPlugins = insertPlugin(plugins, 'plugin4', 'plugin777'); - - expect(newPlugins).toEqual(['plugin1', 'plugin2', 'plugin3', 'plugin777', 'plugin4']); - }); - - it('Должен корректно добавить плагин перед искомым плагином, если искомый плагин в массиве', () => { - const plugins = ['plugin1', 'plugin2', ['plugin3', {}], 'plugin4']; - - const newPlugins = insertPlugin(plugins, 'plugin3', 'plugin777'); - - expect(newPlugins).toEqual(['plugin1', 'plugin2', 'plugin777', ['plugin3', {}], 'plugin4']); - }); -}); diff --git a/packages/arui-scripts/src/plugins/insert-plugin.ts b/packages/arui-scripts/src/plugins/insert-plugin.ts deleted file mode 100644 index b899a7a7..00000000 --- a/packages/arui-scripts/src/plugins/insert-plugin.ts +++ /dev/null @@ -1,19 +0,0 @@ -export const insertPlugin = (plugins: string[] | unknown[], beforePluginName: string, plugin: string | unknown): string[] | unknown[] => { - let beforePluginIndex = -1; - - plugins.forEach((pluginName, index) => { - if(Array.isArray(pluginName) && pluginName[0] === beforePluginName){ - beforePluginIndex = index; - } - - if(!Array.isArray(pluginName) && pluginName === beforePluginName){ - beforePluginIndex = index; - } - }); - - if(beforePluginIndex === -1) { - return plugins; - } - - return [...plugins.slice(0, beforePluginIndex), plugin, ...plugins.slice(beforePluginIndex)] -} \ No newline at end of file diff --git a/packages/arui-scripts/src/plugins/postcss-global-data/postcss-global-data.ts b/packages/arui-scripts/src/plugins/postcss-global-variables/postcss-global-variables.ts similarity index 79% rename from packages/arui-scripts/src/plugins/postcss-global-data/postcss-global-data.ts rename to packages/arui-scripts/src/plugins/postcss-global-variables/postcss-global-variables.ts index d02b51a6..01ef62b9 100644 --- a/packages/arui-scripts/src/plugins/postcss-global-data/postcss-global-data.ts +++ b/packages/arui-scripts/src/plugins/postcss-global-variables/postcss-global-variables.ts @@ -6,7 +6,7 @@ type PluginOptions = { files?: string[]; }; -const postCssGlobalData: PluginCreator = (opts?: PluginOptions) => { +const postCssGlobalVariables: PluginCreator = (opts?: PluginOptions) => { const options = { files: [], ...opts, @@ -18,13 +18,14 @@ const postCssGlobalData: PluginCreator = (opts?: PluginOptions) = let rulesSelectors = new Set(); 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 = (opts?: PluginOptions) = }; }; -postCssGlobalData.postcss = true; +postCssGlobalVariables.postcss = true; -export { postCssGlobalData }; \ No newline at end of file +export { postCssGlobalVariables }; \ No newline at end of file diff --git a/packages/arui-scripts/src/plugins/postcss-global-data/utils/__tests__/add-global-variable.tests.ts b/packages/arui-scripts/src/plugins/postcss-global-variables/utils/__tests__/add-global-variable.tests.ts similarity index 100% rename from packages/arui-scripts/src/plugins/postcss-global-data/utils/__tests__/add-global-variable.tests.ts rename to packages/arui-scripts/src/plugins/postcss-global-variables/utils/__tests__/add-global-variable.tests.ts diff --git a/packages/arui-scripts/src/plugins/postcss-global-data/utils/__tests__/get-media-query-name.tests.ts b/packages/arui-scripts/src/plugins/postcss-global-variables/utils/__tests__/get-media-query-name.tests.ts similarity index 100% rename from packages/arui-scripts/src/plugins/postcss-global-data/utils/__tests__/get-media-query-name.tests.ts rename to packages/arui-scripts/src/plugins/postcss-global-variables/utils/__tests__/get-media-query-name.tests.ts diff --git a/packages/arui-scripts/src/plugins/postcss-global-data/utils/__tests__/parse-variables.tests.ts b/packages/arui-scripts/src/plugins/postcss-global-variables/utils/__tests__/parse-variables.tests.ts similarity index 100% rename from packages/arui-scripts/src/plugins/postcss-global-data/utils/__tests__/parse-variables.tests.ts rename to packages/arui-scripts/src/plugins/postcss-global-variables/utils/__tests__/parse-variables.tests.ts diff --git a/packages/arui-scripts/src/plugins/postcss-global-data/utils/utils.ts b/packages/arui-scripts/src/plugins/postcss-global-variables/utils/utils.ts similarity index 98% rename from packages/arui-scripts/src/plugins/postcss-global-data/utils/utils.ts rename to packages/arui-scripts/src/plugins/postcss-global-variables/utils/utils.ts index a1895167..281e56d1 100644 --- a/packages/arui-scripts/src/plugins/postcss-global-data/utils/utils.ts +++ b/packages/arui-scripts/src/plugins/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 index c313e086..bf71c618 100644 --- 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