FSCSS 1.2.5 ships property shorthands: size, px, inset-x, ratio-fit()

FSCSS 1.2.5 ships property shorthands: size, px, inset-x, ratio-fit()

●1 ●19 ●60
calendar_today • schedule1 min read

A new FSCSS release. This one's aimed at the pairs everyone keeps typing out by hand:

/* before */
width: 32px;
height: 32px;

/* after */
size: 32px;

Same deal for the other repeat offenders:

.card {
  px: 16px;      /* padding-left + padding-right */
  py: 14px;      /* padding-top + padding-bottom */
  mx: auto;      /* margin-left + margin-right */
  max-w: 360px;
}

.overlay-side {
  pos: absolute;
  inset-x: 45px; /* left + right only, top/bottom untouched */
  top: 0;
  h: 4px;
}

The inset-x one is the one I actually wanted to exist. inset: auto 45px sets all four sides, there's no native way to say "just left and right" without writing left and right separately. Now there is.

There's also ratio-fit() for the fill-container-keep-aspect-ratio pattern:

.media > img {
  inset: ratio-fit(16 / 9);
  obj-fit: cover;
}

Compiles ahead of time, no runtime polyfill needed for any of it if you're already compiling with the CLI.

npm install fscss@1.2.5
fscss input.fscss output.css

Also ships stack, hstack, center, auto-fit, truncate, line-clamp, border/background shorthands, and the usual aliases (fs, fw, jc, ai, pos, shadow...). Full map's linked below. There's a real UI using a chunk of these together, a dual-phone budget app template combining this with modules like st-core@v2 charts, if you want to see it in context rather than isolated snippets.

Release: https://github.com/Figsh/xfscss/releases/tag/v1.2.5
Shorthands reference: https://fscss.devtem.org/shorthands
Budget app template: https://github.com/fscss-ttr/st-core.fscss/tree/main/templates/budget-app

Anyone using size/px/inset-x already hit any edge cases worth flagging?

🔥 Join developers growing publicly
Share your knowledge, build in public, and grow your developer presence with a global community.

More Posts

How I Built a React Portfolio in 7 Days That Landed ₹1.2L in Freelance Work

Dharanidharan - Feb 9

AAIF Hits 10 Projects. Its CTO on What to Adopt Now and the Security Gaps Left Open

Tom Smithverified - Oct 23

FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit(), etc

Figsh - Oct 21

The Sovereign Vault — A Comprehensive Guide to Protocol-Driven AI

Ken W. Algerverified - Jun 4

FSCSS v1.2.0 is out: two clean entry points, full backward compatibility, and inline

Figsh - Sep 5
chevron_left
1.8k Points • 80 Badges
26Posts
17Comments
13Connections
A full-stack web developer: Building smart solutions, designing meaningful experiences, and continuo... Show more

Related Jobs

View all jobs →

Commenters (This Week)

3 comments
1 comment
1 comment

Contribute meaningful comments to climb the leaderboard and earn badges!