Set props through style plugin

[bkrmendy]

See #6574 for a long-form writeup on the full background of this PR.

The problem addressed on this PR

The normalisation step cannot easily handle commands/actions removing properties from elements.

Fix

Instead of working around the limitation of the normalisation step, this PR introduces an approach where the style plugins themselves implement setting/removing style props on elements, and the SetProperty / DeleteProperty command uses the style plugin API to set/remove style props. The PR deals with patching props that are removed during a canvas interaction (details in #6574, TLDR: if gap is removed with the gap control, it needs to be set to 0px while the interaction is in progress, otherwise the value from the Tailwind class will be applied which would be janky).

This is an under-the-hood PR, no user-facing functionality is added.

Details

• Updated the StylePlugin interface with the updateStyles function, which can be used to set/delete element styles. The inline style plugin and the Tailwind style plugin are updated accordingly
• Injected StylePlugin.updateStyles into runSetProperty and runDeleteProperties via the new runStyleUpdateForStrategy function. This function encapsulates a performance-related feature: if an interaction is ongoing, it sets props in the inline style prop (and patches removed props), so updates are real-time, and when an interaction is done, it uses the active plugin. This trick works because the active strategy is re-run on interaction finish, producing the right patches for a style update.
• The machinery dealing with zeroing props is added. The entrypoint for adding the zeroed props is patchRemovedProperties (called from dispatch-strategies.tsx, and the entrypoint for recording which props need to be zeroed is runStyleUpdateMidInteraction
• The code related to the normalisation step is removed
• UpdateClassListCommand is removed and turned into a helper function (since it's not called as a command anymore, just as a helper in the Tailwind style plugin)

Manual Tests:
I hereby swear that:

• I opened a hydrogen project and it loaded
• I could navigate to various routes in Play mode

[github-actions]

Try me

[relativeci]

#15079 Bundle Size — 58.06MiB (~-0.01%).

badf4e9(current) vs d1d46c1 master#15078(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 improvement

	Current #15079	Baseline #15078
Initial JS	41.04MiB(~-0.01%)	41.04MiB
Initial CSS	0B	0B
Cache Invalidation	18.11%	18%
Chunks	20	20
Assets	22	22
Modules	4167	4167
Duplicate Modules	213	213
Duplicate Code	27.3%	27.3%
Packages	477	477
Duplicate Packages	70	70

Bundle size by type   2 changes 2 improvements

	Current #15079	Baseline #15078
JS	58.06MiB (~-0.01%)	58.06MiB
HTML	7.37KiB (-0.25%)	7.39KiB

Bundle analysis report Branch feature/set-prop-through-plugin Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}

[balazsbajorics]

isn't this leftover?

[bkrmendy]

It's very much not a leftover, this prop is read by these functions

utopia/editor/src/components/canvas/plugins/style-plugins.ts

Lines 77 to 83 in 0908603

	export function resetUpdatedProperties(editorState: EditorState): EditorState {
	return { ...editorState, propertiesUpdatedDuringInteraction: {} }
	}
	function getPropertiesUpdatedDuringInteraction(editorState: EditorState) {
	return editorState.propertiesUpdatedDuringInteraction
	}

and written to here

utopia/editor/src/components/canvas/plugins/style-plugins.ts

Lines 132 to 138 in 0908603

	return {
	editorStateWithChanges: editorStateWithChanges,
	editorStatePatches: [
	editorStatePatch,
	{ propertiesUpdatedDuringInteraction: { $set: updatedProperties } },
	],
	}

[balazsbajorics]

The machinery dealing with zeroing props is added. The entrypoint for adding the zeroed props is patchRemovedProperties (called from dispatch-strategies.tsx, and the entrypoint for recording which props need to be zeroed is runStyleUpdateMidInteraction

why doesn't the runStyleUpdateMidInteraction inject the zeroing? feels like it is a leftover idea to run it in a later part of the update flow – IIUC the style plugin has all the information and all the power necessary to internally deal with adding these changes

[bkrmendy]

The machinery dealing with zeroing props is added. The entrypoint for adding the zeroed props is patchRemovedProperties (called from dispatch-strategies.tsx, and the entrypoint for recording which props need to be zeroed is runStyleUpdateMidInteraction

why doesn't the runStyleUpdateMidInteraction inject the zeroing? feels like it is a leftover idea to run it in a later part of the update flow – IIUC the style plugin has all the information and all the power necessary to internally deal with adding these changes

We talked about this IRL, the reason this is needed is because the code that does the zeroing for padding needs to know about all the props that have been set/unset (see this code from the spike)