Tailwind Padding

[bkrmendy]

Problem

Paddings defined from Tailwind cannot be edited on the canvas.

Other problems that came up in this PR:

1. The plugin prop removal code removed props that were deleted at the start of a strategy, and then later set again
2. In some cases, the padding strategy removes both the shorthand padding prop and all four longhand padding props (padding{ Top | Left | Right | Bottom }), and sets them one or more of these later. When this happens, the property patching code kicks in, and sets all 5 props to their default value (0px). However I found an unknown unknown here: it seems like if the shorthand padding prop is set last, it takes precedence over the longhand padding props, so setting padding: 0 last negates a paddingTop: 10 for example. This is not a Utopia-specific problem, it can be reproed in codesandbox by commenting out and re-adding one of the padding props (utopia project for reference)

Fix

Tailwind paddings:

• Extend StyleInfo and add the necessary reader code
• update simplePaddingFromMetadata to read from StyleInfo and make the necessary refactors

Plugin prop removal code:

The immediate problem is fixed by tracking the prop setting/deleting commands, and simulate them to figure out which props are reset after they are deleted.

This solutions works for the specific problem in this PR, but it poses a bigger question: what if, in the command runner function, a command tries to remove a prop from some other element that's not in the command constructor function? The commands are only aware of the style prop, so in a Tailwind project, the remove just won't work (and we couldn't find out even if we diffed the project contents before and after a command has run)

Padding prop weirdness:

I fixed this by only using the longhand versions of a prop to patch the shorthand (see

utopia/editor/src/components/editor/actions/action-utils.ts

Lines 532 to 622 in c493375

	interface PropertyPatchValues {
	gap?: '0px'
	paddingTop?: '0px'
	paddingRight?: '0px'
	paddingBottom?: '0px'
	paddingLeft?: '0px'
	}
	function setPropertyValue(
	propertyPatchValues: PropertyPatchValues,
	prop: string,
	): PropertyPatchValues {
	switch (prop) {
	case 'gap':
	propertyPatchValues.gap = '0px'
	break
	case 'paddingTop':
	propertyPatchValues.paddingTop = '0px'
	break
	case 'paddingRight':
	propertyPatchValues.paddingRight = '0px'
	break
	case 'paddingBottom':
	propertyPatchValues.paddingBottom = '0px'
	break
	case 'paddingLeft':
	propertyPatchValues.paddingLeft = '0px'
	break
	default:
	break
	}
	return propertyPatchValues
	}
	export interface PropertiesToPatchWithDefaults {
	[elementPathString: string]: PropertyPatchValues
	}
	function substituteShorthandProperties(
	propsToSetByElement: Record<string, string[]>,
	elementPathString: string,
	prop: string,
	): string[] {
	const paddingShorthandSet = propsToSetByElement[elementPathString]?.includes('padding')
	if (prop === 'padding') {
	return PaddingLonghands.filter((p) => !propsToSetByElement[elementPathString]?.includes(p))
	}
	if (PaddingLonghands.includes(prop)) {
	if (paddingShorthandSet) {
	return []
	}
	}
	return [prop]
	}
	export function getPropertiesToPatchFromCommands(
	commands: CanvasCommand[],
	): PropertiesToPatchWithDefaults {
	const deltas = propertyUpdateDeltaFromCanvasCommand(commands)
	const propsToRemove = getPropertiesToRemoveFromDeltas(deltas)
	const propsToSetByElement: Record<string, string[]> = {}
	for (const delta of deltas) {
	if (delta.type === 'set') {
	ensureEntryExists(propsToSetByElement, delta.element, [])
	propsToSetByElement[EP.toString(delta.element)].push(delta.prop)
	}
	}
	const withPropsSubstituted = Object.entries(propsToRemove).map(
	([elementPathString, props]): [string, string[]] => [
	elementPathString,
	uniq(
	props.flatMap((prop) =>
	substituteShorthandProperties(propsToSetByElement, elementPathString, prop),
	),
	),
	],
	)
	const result: PropertiesToPatchWithDefaults = {}
	for (const [elementPathString, props] of withPropsSubstituted) {
	ensureEntryExists(result, EP.fromString(elementPathString), {})
	result[elementPathString] = props.reduce(setPropertyValue, {})
	}
	return result
	}

)

Manual Tests:
I hereby swear that:

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

Fixes #[ticket_number] (<< pls delete this line if it's not relevant)

[github-actions]

Try me

[relativeci]

#14885 Bundle Size — 57.98MiB (~+0.01%).

445fa14(current) vs 916e8b9 master#14883(baseline)

Warning

Bundle contains 70 duplicate packages – View duplicate packages

Bundle metrics   2 changes 1 regression

	Current #14885	Baseline #14883
Initial JS	40.96MiB(~+0.01%)	40.96MiB
Initial CSS	0B	0B
Cache Invalidation	17.99%	17.88%
Chunks	20	20
Assets	22	22
Modules	4153	4153
Duplicate Modules	213	213
Duplicate Code	27.33%	27.33%
Packages	477	477
Duplicate Packages	70	70

Bundle size by type   2 changes 1 regression 1 improvement

	Current #14885	Baseline #14883
JS	57.97MiB (~+0.01%)	57.97MiB
HTML	7.37KiB (-0.25%)	7.39KiB

Bundle analysis report Branch feature/padding-tailwind Project dashboard

---

^{Generated by RelativeCI Documentation Report issue}