Migrate components to CSS Modules

[connor-baer]

Implements #2153.

Purpose

From the RFC:

Replacing Emotion.js with CSS Modules in Circuit UI Web will significantly improve the performance of SumUp’s web applications, future-proof the component library against ecosystem changes and start to decouple it from React.

Note
I apologize for the size of this pull request. Each commit migrates one or a group of components, so I recommend reviewing commit by commit.

Approach and changes

• Build Circuit UI with Vite to support importing and bundling CSS Modules. The styles are exported as @sumup/circuit-ui/styles.css.
• Migrated all stable components to CSS Modules:
  • Extracted all styles into <ComponentName>.module.css files
  • Replaced JS tokens with CSS variables
  • Removed snapshot tests since the styles from CSS Modules aren't included in snapshots. Snapshot tests are brittle anyway, and visual regressions are already detected by Chromatic. Where necessary, I've replaced snapshot tests with unit tests that verify a specific behavior or structure of a component.
• Marked the style mixins as legacy. Use the new utilClasses export instead.
• Removed the BaseStyles component. The base styles are included in @sumup/circuit-ui/styles.css.
• Migrated all custom Storybook components and stories to CSS Modules or inline styles
• Bonus: Improved the accessibility of the SearchInput component. The input now has the search type and focus is returned to the input after clearing the value.
• Bonus: Fixed the IconsManifest type exported from @sumup/icons.

Definition of done

• Development completed
• Reviewers assigned
• Unit and integration tests
• Meets minimum browser support
• Meets accessibility requirements

[changeset-bot]

🦋 Changeset detected

Latest commit: e11025e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@sumup/icons	Patch
@sumup/circuit-ui	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
oss-circuit-ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 11, 2023 0:09am

[codecov]

Codecov Report

Merging #2163 (e11025e) into next (415c73d) will decrease coverage by 0.55%.
The diff coverage is 95.93%.

@@            Coverage Diff             @@
##             next    #2163      +/-   ##
==========================================
- Coverage   97.03%   96.48%   -0.55%     
==========================================
  Files         265      255      -10     
  Lines       25142    19882    -5260     
  Branches     2277     1860     -417     
==========================================
- Hits        24396    19183    -5213     
+ Misses        738      691      -47     
  Partials        8        8              

Impacted Files	Coverage Δ
...es/circuit-ui/components/ImageInput/ImageInput.tsx	92.95% <ø> (+2.43%)	⬆️
packages/circuit-ui/components/Input/Input.tsx	95.56% <ø> (-1.66%)	⬇️
packages/circuit-ui/components/List/List.tsx	100.00% <ø> (ø)
...ckages/circuit-ui/components/ListItem/ListItem.tsx	91.22% <ø> (-3.05%)	⬇️
...cuit-ui/components/ListItemGroup/ListItemGroup.tsx	92.10% <ø> (-3.86%)	⬇️
packages/circuit-ui/components/Modal/Modal.tsx	94.66% <ø> (+2.28%)	⬆️
...ircuit-ui/components/ModalContext/ModalContext.tsx	98.23% <ø> (-0.16%)	⬇️
...es/circuit-ui/components/Notification/constants.ts	100.00% <ø> (ø)
...mponents/NotificationBanner/NotificationBanner.tsx	100.00% <ø> (+2.80%)	⬆️
.../NotificationFullscreen/NotificationFullscreen.tsx	100.00% <ø> (ø)
... and 57 more

... and 34 files with indirect coverage changes