Rhubarb CSS - Mixins for Writing Logical CSS

At the end of 2020, I wrote about how CSS Logical Properties Are the Future of the Web & I18N. Since then, I've used and advocated for the new properties heavily as I see them as the next huge step toward creating truly fluid and inclusive UIs.

However, browser support requirements for the products I was working on didn't always align with browser support for logical properties. So I started writing and re-using various mixins to allow the gradual use of logical CSS through progressive enhancement with physical box model fallbacks when needed.

I'd first written the mixins for Styled Components. Later, I needed to convert those same mixins into a SCSS project. And it was here that Rhubarb CSS was born.

Rhubarb CSS

🚀 View Rhubarb CSS on GitHub

Rhubarb CSS is a collection of mixins to support writing progressively-enhanced logical CSS in many different flavors.

What started as a collection of mixins for just Styled Components, is now a collection of mixins for SCSS, Stylus and Less.

Rhubarb Styled Components

So what exactly do these mixins do?

import { Margin, Padding } from "@rhubarb-css/styled-components";

const Container = styled.section`
  ${Margin({ inline: "auto" })};
  ${Padding({ block: "var(--custom-property-value)" })};
`;

This example, would generate the following CSS.

section {
  margin-inline-end: auto;
  margin-inline-block: auto;
  padding-block-end: var(--custom-property-value);
  padding-block-start: var(--custom-property-value);

  @supports not (margin-inline-end: 1rem) {
    margin-left: auto;
    margin-right: auto;
  }

  @supports not (padding-block-end: 1rem) {
    padding-bottom: var(--custom-property-value);
    padding-top: var(--custom-property-value);
  }
}

An added benefit when using Rhubarb Styled Components is the TypeScript autocompletion of properties and values.

With the compiled CSS, the logical properties are prioritized. In environments where they're not supported, the @supports query will be triggered, and the physical-property equivalents are used as fallbacks. Eventually, as browser support catches up and becomes broad enough, the @supports query will no longer be needed.

Rhubarb CSS Scope

There were a couple key goals when creating the Rhubarb CSS library:

1. Keep APIs consistent across projects
2. Support all logical properties with direct physical fallbacks

Mixin APIs

Because of the support for Styled Components, the API conventions were generally pegged to this environment, as the outlier.

All property keys follow a camelCase naming convention, with any processor-specific leading character, such as $ for SCSS and @ for Less.

// Styled Components
blockSize

// SCSS
$blockSize

// Less
@blockSize

// Stylus
blockSize

Logical Property Support (v0.2.0)

Here is a list of logical property support and their fallback properties.

Border

Border Radius

Layout

Margin

Padding

Position

Wrap Up

Is there a need for this? At least for me there was. So why not? Isn't that the whole point of open source? Hopefully, someone else will find it useful in moving their project toward logical properties.

Either way, I'm quite happy with this.

Resources

• Rhubarb CSS on Github
• Rhubarb Styled Components
• Rhubarb SCSS
• Rhubarb Stylus
• Rhubarb Less