Show HN: CSS Extras

Summary

A collection of useful CSS custom functions A comprehensive collection of CSS custom functions that leverage the new native CSS @function rule. No build step required! Feel free to copy-paste what you need. No credit needed. Caution Work in progress. Requirements Currently only supported in Chrome 141+. The @function rule is going through the W3C standardization process and will be available in other browsers soon. Install npm install css-extras Usage @import 'css-extras' ; Or link directly in HTML: < link rel =" stylesheet " href =" node_modules/css-extras/index.css " > Then use any of the functions in your CSS: . element { /* Math functions */ padding : --negate ( var ( --spacing )); margin : --abs ( -20 px ); /* Color functions */ background : --opacity (blue , 50 % ); border-color : --tint ( var ( --primary-color ) , 20 % ); /* Typography */ font-size : --fluid-type ( 16 px , 24 px ); /* Layout */ border-radius : --conditional-radius ( 1 rem ); /* And many more! */ } Demo (requires Chrome 141+) Functions This package includes ~50 CSS custom functions organized into these categories: Math & Number - Mathematical operations and calculations - Mathematical operations and calculations Color - Color manipulation, generation, and accessibility helpers - Color manipulation, generation, and accessibility helpers Typography - Fluid type scaling and line height - Fluid type scaling and line height Layout - Responsive layouts and aspect ratios - Responsive layouts and aspect ratios Spacing - Consistent spacing systems - Consistent spacing systems Animation - Easing functions - Easing functions Grid - Responsive grid helpers - Responsive grid helpers Filter - Shadows and effects - Shadows and effects Theme - Light/dark mode utilities - Light/dark mode utilities Utility - Unit conversion and helpers Complete function reference Examples Responsive card component . card { /* Conditional border radius */ border-radius : --conditional-radius ( 1 rem ); /* Smooth shadow */ box-sh...