Improving styled-components class names for debugging

Task Description

Re-sharing feedback from https://github.com/GoogleForCreators/web-stories-wp/pull/11737#discussion_r901929974:

I understand and agree with your point about consistency. This may be more of a concern related to the patterns required to use Styled Components than anything specific to this project.

A lot of the classNames generated by Styled Components can be redundant and hard to track up the component tree. For example, classNames like components__Container-sc-xxxxxx and components__CardWrapper-sc-xxxxxx are generic and lose meaning because they’re repeatedly redefined in components to accommodate the patterns required for composition using the Styled Components library.

Going up the component tree offers a little context, but navigating the codebase to find specific instances of general-use components isn’t obvious (maybe just to developers new to the codebase and patterns used, myself included).

Additional Context

Related links:

https://styled-components.com/docs/tooling#better-debugging

[barklund]

"meaninglessFileNames": ["index", "styles"]

This looks like a great option to use. We sometimes have our S-C components in a single file named components.js or styles.js, so this would make their debuggable names more traceable.

[spacedmonkey]

I updated the babel config and not seeing see any change in markup / class.