Forms: Only load the styles that are revelant for the specific form

[enejb]

Impacted plugin

Jetpack

Quick summary

Currently when a user add the Jetpack form on to the page we also load grunion css file.
Which is about 20kb of css and contains the css for all the different "styles" of forms.

This should be reduced in such a way so that we only load the necessary styles.
A good first step would be to only include 1 style per css file.

Steps to reproduce

Load a jetpack form on the frontend.
Notice the large css file.

Site owner impact

Fewer than 20% of the total website/platform users

Severity

Minor

What other impact(s) does this issue have?

No revenue impact

If a workaround is available, please outline it here.

No response

Platform (Simple and/or Atomic)

Simple, Atomic, Self-hosted

[github-actions]

This issue could use some more labels, to help prioritize and categorize our work. Could you please add at least a [Type], a [Feature], and a [Pri] label?

[simison]

I think that once many of the styles are in Global styles, the system will take care of this automatically; only global styles for inputs that are present are included. Not sure if that same mechanism applies to style variations, though. cc @aaronrobertshaw @talldan

[aaronrobertshaw]

I think that once many of the styles are in Global styles, the system will take care of this automatically; only global styles for inputs that are present are included

Global Styles, by default, will only output styles for blocks that are on the page. So if we move to inner blocks for forms, the global styles for those would appear whenever they are on the page. The other styles, e.g. custom date picker or select etc., will still need to be loaded somehow.

Not sure if that same mechanism applies to style variations, though. cc

Block style variations have styles generated for each application. This was to support nesting different variations and enhanced "section-based" styling. If a block style variation isn't on the page, no block style variation styles are generated.