Добавлен кастомный postcss плагин postcss-global-data #287

VladislavNsk · 2024-11-09T15:31:40Z

Стандартный плагин каждый раз парсил одни и те же переданные файлы в options на каждом css файле.
Плюс в каждый файл, не зависимо надо или не надо, много или мало глобальных переменных, всегда добавлял все глобальные переменные

Сейчас файл будет парситься 1 раз и переменные добавляются только те, которые нужны

[email protected]

changeset-bot · 2024-11-09T15:31:44Z

🦋 Changeset detected

Latest commit: 53896eb

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
arui-scripts	Minor
example-modules	Patch
example	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

heymdall-legal · 2024-11-09T18:13:41Z

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

@@ -28,7 +26,6 @@ export const postcssPlugins = [
    'postcss-mixins',
    'postcss-for',
    'postcss-each',
-    '@csstools/postcss-global-data',


К сожалению часть команд завязалась на старое название плагина, плюс они хотят передавать кастомные настройки в него. Пример можно получить поискав по гиту название плагина.

Предлагаю такой вариант:
в функции createPostcssConfig инициализировать все плагины по старому, если же pluginName === '@csstools/postcss-global-data' - использовать кастомный плагин.
На сколько помню можно передавать вместо массива [плагин, опции] сразу инициализированный плагин

ок, поправлю

Если это сделать в createPostcssConfig, то проектам придется все равно делать изменения, тк например такая проверка уже будет не валидна в файле arui-scripts.overrides.ts
if (Array.isArray(plugin) && plugin[0] === '@csstools/postcss-global-data')
тк вместо массива, будет функция создания плагина или объект, если инициализовать на месте плагин

Может лучше сделать это сразу после applyOverrides? Тогда уже будет применен конфиг из проекта и можно заменять на кастомный с использованием переданных новых файлов

Сделал это в последнем комите
Если есть другие мысли или я не так понял, поправлю)

heymdall-legal · 2024-11-09T18:27:45Z

Вообще оч круто получилось, проверил сейчас на крупном проекте - вместе с доп оптимизациями из rspack получилось процентов так на 40 время на postcss сократить. типа 86 секунд было, 50 стало. Повнимательнее почитаю в будний день, но вообще оч круто

VladislavNsk · 2024-11-10T09:20:50Z

Так же вижу например есть проект, который все css файла импортирует из коров
и эти файлы добавляются в этот плагин, в том числе там есть mixin
https://git.moscow.alfaintra.net/projects/MOOS/repos/verify-ui/browse/arui-scripts.overrides.ts#63

Если ранее плагин просто добавлял все переданные файлы в css, то сейчас же он умеет только парсить глобальные переменные и кастомные медиа запросы

Как будто тут не верно сконфигурирован плагин на проекте и файлы с миксинами надо переместить в options плагина postcss-mixins
https://git.moscow.alfaintra.net/projects/MOOS/repos/verify-ui/browse/arui-scripts.overrides.ts#78

Или надо будет сделать поддержку mixin?
Если не делать поддержку, что по мне логично вроде) то проектам кто делает так же, надо будет поправить оверайды корректно

VladislavNsk · 2024-11-25T07:27:20Z

Последние изменения:
плагин @csstools/postcss-global-data полностью удален, если кому-то будет нужен, надо будет поставить себе на проект отдельно

Подрефакторил функцию createPostcssConfig, чтобы была возможность переопределять options и для плагинов импортируемых на прямую в массиве postcssPlugins

VladislavNsk · 2024-11-25T07:38:12Z

не понимаю почему тесты не проходят, локально выполняю yarn run test --force и никаких ошибок нет

…iables

VladislavNsk · 2024-11-29T07:32:24Z

не понимаю почему тесты не проходят, локально выполняю yarn run test --force и никаких ошибок нет

Разобрался, засквошил лишние комиты
Сейчас все вроде гуд

VladislavNsk · 2024-11-29T08:14:19Z

arui-scripts@0.0.0-next-0.0.1-postcss-global-variables-20241129074045

heymdall-legal · 2024-12-04T07:39:27Z

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

    return plugins.map((pluginName) => {
-        if (pluginName in options) {
-            return [pluginName, options[pluginName]];
+        console.log('pluginName: ', pluginName);


console.log лишний

heymdall-legal · 2024-12-04T07:39:37Z

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

        }

-        return pluginName;
+        console.log('pluginName.name', pluginName.name);


heymdall-legal · 2024-12-04T07:42:05Z

packages/arui-scripts/src/plugins/postcss-global-variables/postcss-global-variables.ts

+                Once(root, postcssHelpers): void {
+                    if (!Object.keys(parsedVariables).length) {
+                        options.files.forEach((filePath) => {
+                            console.log('parse file: ', filePath);


и тут log

packages/arui-scripts/src/plugins/postcss-global-variables/utils/utils.ts

heymdall-legal · 2024-12-04T08:05:51Z

.changeset/quick-starfishes-taste.md

+'arui-scripts': minor
+---
+
+Добавлен кастомный плагин postcss-global-data, для оптимизации времени обработки глобальных переменных


Тут конечно возникает вопрос, который в скриптах часто сложно решить - изменение внутренней структуры вроде как не является мажоркой, но тем не менее обновление на новую версию точно сломает что-то командам, которые в оверрайдах использовали postcss-global-data.

Я бы наверное оставил версию как minor, но добавил тут чуть больше информации типа:
Проекты, которые использовали в оверрайдах кастомные настройки для плагина global-data должны у себя поменять название на такое-то (ну или что так они должны сделать)

VladislavNsk · 2024-12-05T06:11:19Z

Поправил, протестировал демку, все ок
arui-scripts@0.0.0-next-0.0.2-postcss-global-variables-20241204180330

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

    return plugins.map((pluginName) => {
-        if (pluginName in options) {
-            return [pluginName, options[pluginName]];
+        console.log('pluginName: ', pluginName);


packages/arui-scripts/src/plugins/postcss-global-variables/postcss-global-variables.ts

packages/arui-scripts/src/plugins/postcss-global-variables/utils/utils.ts

heymdall-legal reviewed Nov 9, 2024

View reviewed changes

VladislavNsk force-pushed the feature/postcss-perfom branch from e81bdf4 to a8c1949 Compare November 10, 2024 08:30

feat(postcss): add custom postcss plugin - postcss-global-data

fb3b80d

VladislavNsk force-pushed the feature/postcss-perfom branch 2 times, most recently from c6afba3 to deea02c Compare November 25, 2024 07:16

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

d3234ee

…iables

VladislavNsk force-pushed the feature/postcss-perfom branch from 768dbb1 to d3234ee Compare November 29, 2024 07:16

feat(*): remove console.log

b9bdd8a

heymdall-legal reviewed Dec 4, 2024

View reviewed changes

Обмочевский Владислав Вячеславович and others added 2 commits December 5, 2024 00:47

feat(*): fix parse css variable and override css plugin creators

10fc6dd

Update quick-starfishes-taste.md

834daed

heymdall-legal reviewed Dec 5, 2024

View reviewed changes

feat(*): add rootRule in rulesSelectors

53896eb

heymdall-legal approved these changes Dec 5, 2024

View reviewed changes

VladislavNsk merged commit 5d15dcf into master Dec 5, 2024
5 checks passed

core-ds-bot mentioned this pull request Dec 5, 2024

Version Packages #290

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Добавлен кастомный postcss плагин postcss-global-data #287

Добавлен кастомный postcss плагин postcss-global-data #287

VladislavNsk commented Nov 9, 2024 •

edited

Loading

changeset-bot bot commented Nov 9, 2024 •

edited

Loading

heymdall-legal Nov 9, 2024

VladislavNsk Nov 9, 2024

VladislavNsk Nov 10, 2024 •

edited

Loading

heymdall-legal commented Nov 9, 2024

VladislavNsk commented Nov 10, 2024 •

edited

Loading

VladislavNsk commented Nov 25, 2024

VladislavNsk commented Nov 25, 2024

VladislavNsk commented Nov 29, 2024

VladislavNsk commented Nov 29, 2024

heymdall-legal Dec 4, 2024

This comment was marked as resolved.

heymdall-legal Dec 4, 2024

heymdall-legal Dec 4, 2024

heymdall-legal Dec 4, 2024

VladislavNsk commented Dec 5, 2024

This comment was marked as resolved.

Добавлен кастомный postcss плагин postcss-global-data #287

Добавлен кастомный postcss плагин postcss-global-data #287

Conversation

VladislavNsk commented Nov 9, 2024 • edited Loading

changeset-bot bot commented Nov 9, 2024 • edited Loading

🦋 Changeset detected

heymdall-legal Nov 9, 2024

Choose a reason for hiding this comment

VladislavNsk Nov 9, 2024

Choose a reason for hiding this comment

VladislavNsk Nov 10, 2024 • edited Loading

Choose a reason for hiding this comment

heymdall-legal commented Nov 9, 2024

VladislavNsk commented Nov 10, 2024 • edited Loading

VladislavNsk commented Nov 25, 2024

VladislavNsk commented Nov 25, 2024

VladislavNsk commented Nov 29, 2024

VladislavNsk commented Nov 29, 2024

heymdall-legal Dec 4, 2024

Choose a reason for hiding this comment

This comment was marked as resolved.

heymdall-legal Dec 4, 2024

Choose a reason for hiding this comment

heymdall-legal Dec 4, 2024

Choose a reason for hiding this comment

heymdall-legal Dec 4, 2024

Choose a reason for hiding this comment

VladislavNsk commented Dec 5, 2024

This comment was marked as resolved.

VladislavNsk commented Nov 9, 2024 •

edited

Loading

changeset-bot bot commented Nov 9, 2024 •

edited

Loading

VladislavNsk Nov 10, 2024 •

edited

Loading

VladislavNsk commented Nov 10, 2024 •

edited

Loading