Mojo CSS v0.2: Static CSS Generation, revamped color engine and more

Mojo CSS v0.2 has landed, and it's packed with awesome new features and improvements. 🤩🎉

What's New in Mojo CSS v0.2?

Since our initial launch, we've been hard at work, listening to your feedback and striving to make Mojo even better. Version 0.2 introduces a host of new features, optimizations, and fixes designed to enhance your development experience.

SCG (Static CSS Generation)

Mojo CSS now includes Static CSS Generation, which generates CSS directly from your HTML. This is particularly useful for Progressive Rendering, improving load times and performance.

Optimized Color System

We've optimized our color engine to use HSLA instead of RGBA, providing more accurate color manipulations and better performance.

This new color engine allows for new color utilities that allow you to change the tinting or shading amount without specifying the color name. For example, you can now use bg-c:+5 to adjust colors more flexibly and intuitively.

<button class="bg-c-primary ..." hover="-- bg-c:+5 **">
    Hover me!
</button>

Using Variants Inside Arbitrary Selectors

Mojo now supports using variants inside arbitrary selectors. This allows for more complex and dynamic styling, such as:

<div -- _="(@dark:hover .testclass) bg-c-red" **>
    ...
</div>

Logical Margin and Padding Utilities

To support better layout control, we've added logical margin and padding utilities: ms-* (margin start), me-* (margin end), ps-* (padding start), and pe-* (padding end).

Shorter Border and Rounded Namings

To simplify your code, we've shortened the naming for borders and rounded corners. For example, border-top-1 is now border-t-1 and rounded-top-r-1 is now rounded-t-r-1.

Size Optimization

We've managed to reduce Mojo's overall size by approximately 10%, making it even more lightweight without sacrificing functionality.

Bug Fixes

• Fixed various pattern bugs.
• Resolved issues in CSS string generation.
• User Reported Bugs: More details in #13, #17, #20, #21
• Corrected bugs in generating media queries for variants like print.

New Integrations and Examples

We've created a Nuxt module and developed an example project for AstroJS with Mojo CSS SCG enabled.

We plan to extend our integrations to other frameworks soon, including Next.js, SvelteKit, and Angular, to make Mojo CSS accessible and beneficial for a wider range of developers and projects.

Stay tuned for more updates!