Style plugins

[bkrmendy]

Example project with a flex gap

Problem

The canvas controls can't edit elements that are styled with Tailwind

Fix

Add a plugin system, where each plugin provides a data source that strategies can read from (so as of this PR, either Tailwind or the inline style), and a function that takes props from the inline style, and moves them to the right place the style element. For example, the plugin that implements Tailwind styling takes the inline style props, converts them to the right tailwind classes, and adds them to the className prop.

The flex gap strategy and the flex gap control is updated to use the data provided by the plugin system to read the necessary data.

Out of scope

There's one known limitation of this system as implemented in this PR: props that are removed by a strategy don't get removed by the normalization step in plugins. This is only a problem for the Tailwind plugin (since the inline style plugin leaves the inline style prop as the strategies left them, so the fix for this will come on a follow-up PR after this one (the actual fix is already implemented here for anyone interested b2fc141)

Details

• Types for the plugin system, and two concrete plugin implementations are added in the canvas/plugins folder
• The data provided by the plugins is added to InteractionCanvasState as the styleInfoReader function
• The normalization step provided by the plugins is hooked into the strategy lifecycle in interactionFinished
• The flex gap strategy/controls are updated to use styleInfoReader
• UpdateClassList is fixed so that it can write the className prop even if it doesn't exist on element at the start of the command

[github-actions]

Try me

[relativeci]

#14699 Bundle Size — 57.94MiB (+0.01%).

0c27924(current) vs 916e8b9 master#14690(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics   3 changes 1 regression

	Current #14699	Baseline #14690
Initial JS	40.94MiB(+0.02%)	40.93MiB
Initial CSS	0B	0B
Cache Invalidation	17.93%	17.91%
Chunks	21	21
Assets	23	23
Modules	4145(+0.07%)	4142
Duplicate Modules	213	213
Duplicate Code	27.32%	27.32%
Packages	477	477
Duplicate Packages	70	70

Bundle size by type   2 changes 1 regression 1 improvement

	Current #14699	Baseline #14690
JS	57.93MiB (+0.01%)	57.92MiB
HTML	7.37KiB (-0.25%)	7.39KiB

Bundle analysis report Branch feature/style-plugins Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[bkrmendy]

the refactor here was necessary because the existing early return didn't respect the rules of hooks, and broke some tests after the flex gap was calculated from the data provided by the plugins

[ruggi]

note for future selves: gap is not only for flex, but also for grids (https://developer.mozilla.org/en-US/docs/Web/CSS/gap), so maybe we should take that into account when naming things (e.g. flexGap)