🎨 css-utilities-generator

TypeScript utility package that generates a utilities.css file on demand with shorthand class names for common CSS properties. By using intuitive notations like d-f (display: flex) as values for className attributes inside your jsx, this package streamlines your styling process, making your main CSS structure cleaner, reusable and more maintainable while ensuring consistent, efficient application of styles across your project.

Installation & Setup (Auto)

First, run css-utils init CLI command, Initializes a css-utilities-creator configuration at your project root (cuconfig.json) with properties as writeTo (generated css directory/fileName) readFrom (useful to avoid watching changes on unnecessary directories) and utils excecutable script:

# Automatic installation executable:
> npx css-utils init

A css file with on demand generated class utilities from jsx/tsx className attributes, is generated at writeTo path, default: ./styles/utilities.css Imported properly at main root project file:

import "@/styles/index.scss"

app/layout.tsx

Run the following command to start generating css utilities on save:

# Run the following command (generates css utilities on save):
> npm run utils

Now the generated css file is imported to the project root file, start watching for changes in your root directory and automatically regenerate the CSS utilities.

Dictionary source

░	Property	Class	CSS Output	░	Property	Class	CSS Output
▀	display	.d-f	{ display: flex }	▀	justify-content	.jc-c	{ justify-content: center }
░		.d-n	{ display: none }	░		.jc-sb	{ justify-content: space-between }
░		.d-b	{ display: block }	░		.jc-sa	{ justify-content: space-around }
░		.d-g	{ display: grid }	░		.jc-fe	{ justify-content: flex-end }
▀	flex-direction	.fd-r	{ flex-direction: row }	▀	align-items	.ai-c	{ align-items: center }
░		.fd-c	{ flex-direction: column }	░		.ai-s	{ align-items: start }
░		.fd-rr	{ flex-direction: row-reverse }	░		.ai-e	{ align-items: end }
░		.fd-cr	{ flex-direction: column-reverse }	░		.ai-ba	{ align-items: baseline }
░		.fd-d	{ flex-direction: inherit }	▀	align-content	.ac-s	{ align-content: start }
░		.fd-n	{ flex-direction: none }	░		.ac-e	{ align-content: end }
░		.fd-r	{ flex-direction: row }	░		.ac-c	{ align-content: center }
░		.fd-c	{ flex-direction: column }	░		.ac-ba	{ align-content: baseline }
▀	grid-template-columns	.gtc-2	{ grid-template-columns: 2 }	▀	gap	.gap	{ gap: value }
░		.gtc-3	{ grid-template-columns: 3 }	░		.gap-40	{ gap: 40px }
░		.gtc-4	{ grid-template-columns: 4 }	░		.gap-20vw	{ gap: 20vw }
░		.gtc-5	{ grid-template-columns: 5 }	░		.gap-80	{ gap: 80px }
▀	margin	.m	{ margin: value }	▀	padding	.p	{ padding: value }
░		.ml-40	{ margin-left: 40px }	░		.pl-40	{ padding-left: 40px }
░		.mr-20vw	{ margin-right: 20vw }	░		.pr-20vw	{ padding-right: 20vw }
░		.mt-80	{ margin-top: 80px }	░		.pt-80	{ padding-top: 80px }
░		.mb	{ margin-bottom: value }	░		.pb	{ padding-bottom: value }

dictionary.ts

Example

  <main className="ml-50 mr-50">
    <header className="d-f h-64px ai-c jc-sb pos-sticky top-0 z-5">

some-file.tsx

.ml-50 { margin-left: 50px; }
.mr-50 { margin-right: 50px; }
.d-f { display: flex; }
.h-64px { height: 64px; }
.ai-c { align-items: center; }
.jc-sb { justify-content: space-between; }
.pos-sticky { position: sticky; }
.z-5 { z-index: 5; }

utilities.css

Configuration File (Defaults)

Write your own dictionary with extendKeys, extendValues or acceptAnyVariable: true altogether

{
    "acceptAnyVariable": true, /* Matching only dictionary or extension properties, Defaults to false */
    "acceptAnyKey": false, /* Applies only key */
    "acceptAnyValue": true, /* Applies only value */
    "units": "rem", /* Defines unit for those css properties with numeric values or others, Defaults to "px" */
    "extendKeys": /* Extend default dictionary abbreviations */ 
    {
        "fs": {"name": "font-size", "valueExtension": "vw"}, /* Would match for fs className */
        "fi": {"name": "filter", "valueExtension": ""} /* Would match for fs className */
    },
    "writeTo": "./styles/utilities.css", /* Where to write generated css file, Defaults to "./styles/utilities.css" */
    "readFrom": "./", /* Where to parse - interpret files from, Defaults to "./" */
    "extensions": ["tsx", "ts", "js", "jsx"] /* Read className attributes from files with extensions in Array */
    "exclude": ["node_modules", ".git"] /* Exclude directories from having files parsed, traversed ...  */
}

/cuconfig.json

Usage

Example of jsx elements with above configuration set, variables usage and their respective generated classes at utilities.css

<div className="d-f ml-40">
    <h1 className="fs-2 c--brand-primary">
        Hello World!
...

/src/some-file.tsx

...
.d-f {display: flex}
.ml-40 {margin-left: 40rem}
.fs-2 {font-size: 2vw}
.c--brand-primary {color: var(--brand-primary)}
...

src/styles/utilities.css

Contributions

This project encourages contributions and suggestions.