🎨 Aesthetic is an end-to-end multi-platform styling framework that offers a strict design system, robust atomic CSS-in-JS engine, a structural style sheet specification (SSS), a low-runtime solution, and much more!
When I first designed the sss package, I extracted the functionality out so that it could be used in other contexts, or by other packages. However in practice, it caused the codebase to be more complex than I'd like, and caused other issues like:
Increased file sizes
More complex TS types
Should features go in sss or style (custom props, etc)?
The file sizes of each affected package before and after the merge:
Besides the amazing file size reduction, the SSS rule structure has been applied to the style package, which means that it now supports @variants, and other at-rules. Much nicer!
Screenshots
Checklist
[x] Build passes with yarn test.
[x] Code is formatted with yarn format.
[x] Tests have been added for my changes.
[x] Code coverage for my change is 100%.
[ ] Documentation has been updated for my changes.
Summary
When I first designed the
ssspackage, I extracted the functionality out so that it could be used in other contexts, or by other packages. However in practice, it caused the codebase to be more complex than I'd like, and caused other issues like:The file sizes of each affected package before and after the merge:
Besides the amazing file size reduction, the SSS rule structure has been applied to the style package, which means that it now supports
@variants, and other at-rules. Much nicer!Screenshots
Checklist
yarn test.yarn format.