Visual form builder should have well configured editor styles methodology

[DevinWalker]

Details

A well thought out and structure css methodology is required for the long term health of this project. It seems like we want to go the route of CSS modules with Sass. I'm fine with this, but we should agree on and document how this is to be structured and built out.

Currently, the styles lack any logic in their organization and structure. Looking at the build currently there is 10k lines of CSS - nearly all of it is from the Gutenberg styles we are importing.

Questions:

• How can we utilize what WordPress already provides and avoid conflicts and bloat?
• Can the unneeded CSS be purged?
• How do we optimize reusability within components (buttons, fields, etc).
• How do the actual template styles work compared to the application (builder) styles?

Additional Context

I've been looking into what Gutenberg provides, for example the "base-styles" package here: https://github.com/WordPress/gutenberg/blob/58c78ec5200a38401281c14186095bced2f6f12a/packages/base-styles/README.md

CSS Modules React Doc: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Acceptance Criteria

• [ ] CSS is organized and files are named in a clear and logical way
• [ ] Build is optimized as possible (no excess bloat)
• [ ] Documentation is written that makes it clear for developers

[kjohnson]

Resolved by changes introduced in https://github.com/impress-org/givewp-next-gen/pull/32.