Research Vanilla-Extract as a CSS solution

[thrbnhrtmnn]

Description / User story

We want to invest some more time too investigate if Vanilla-Extract is a potential CSS library to use, as recommended by #1081 .

The following key factors need to be considered:

• Supports Server Side Rendering (SSR)
• Supports code driven transformation of CSS (either at build-time or runtime)
• Provides a satisfying developer experience which includes:
• Syntax highlighting
• Context aware editor auto-completion, code navigation and refactoring
• CLI validation tools
• Extensive documentation
• Allow for targeted style overrides from outside the component
• Allow for targeted style re-use from outside the component

Requirements / Prerequisites

• Research CSS Improvements #1081
• Evaluate Server Side Rendering (SSR) capabilities of lit with example applicaiton #1096
• Research Emotion as a CSS solution #1097

Acceptance Criteria

• Vanilla-Extract has been evaluated by the key factors we defined for a CSS solution
• The outcome has been documented
• We are able to decide on the CSS approach after further research of Vanilla Extract and SASS has been finished

Additional information

Current findings as researched via #1081

I only did a high-level investigation by looking at the docs. It has a few promising features but also a few shortcomings.

Pros

Extracts and injects static styles. Good fit for our current classMap approach and general lit compatibility.
Doesn't require an extra formatter or linter since it uses a typed object style API instead of tagged template literals. That means it integrates well with TypeScript, Prettier and ESLint.
Features a well designed API for incorporating dynamic styles through CSS variables.
Seems to support custom class names as well as auto generated ones so it can be adopted incrementally.
Seems to be well maintained.
Dynamic TokenIterator concept might be covered by add-function-serializer
Well documented.
Cons

Requires extra build tooling configuration (e.g. webpack plugin) to extract and inject styles.
We'd have to re-write our entire css to use style objects.
Might have the same problem with semi dynamic generation of styles through our TokenIterator concept as linaria.
The object style syntax can lead to poor readability.

Code of Conduct

• I agree to follow this project's Code of Conduct

[thrbnhrtmnn]

Improving our current CSS approach with #922 and #1021 (and follow up tasks for all other components to remove class maps) seems to be the more safe next steps than to invest time in this task.