deven-org / boiler

A fully customisable and tokenised design system boilerplate built by Accenture Song
https://boilerds.com/
MIT License
18 stars 7 forks source link

Research Vanilla-Extract as a CSS solution #1098

Open thrbnhrtmnn opened 6 months ago

thrbnhrtmnn commented 6 months ago

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 https://github.com/deven-org/boiler/issues/1081 .

The following key factors need to be considered:

Requirements / Prerequisites

Acceptance Criteria

Additional information

Current findings as researched via https://github.com/deven-org/boiler/issues/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

thrbnhrtmnn commented 4 months ago

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.