CSS Magi

CSS Magi is a JavaScript library that helps you create CSS styles from class names in HTML. The library automatically parses special class names and injects corresponding CSS into the document.

Installation

npm install css-magi

Usage

Import

import { init, parseDOM, injectStyles, PSEUDO_SELECTORS, cssPropertyMapping } from 'css-magi';

Quick Start

import { init } from 'css-magi';

// Automatically parse DOM and inject styles
init();

Manual Usage

import { parseDOM, injectStyles } from 'css-magi';

// Parse DOM to get class names
const uniqueClasses = parseDOM();

// Inject CSS into document
injectStyles(uniqueClasses);

Class Names Syntax

Shorthand CSS Properties

The library supports shorthand CSS properties:

• m → margin
• mt → margin-top
• mr → margin-right
• mb → margin-bottom
• ml → margin-left
• p → padding
• pt → padding-top
• pr → padding-right
• pb → padding-bottom
• pl → padding-left
• w → width
• h → height
• bg → background
• bg-color → background-color
• z → z-index
• d → display
• direction → flex-direction

Usage Examples

<!-- Margin -->
<div class="m:[20px]">Margin 20px</div>
<div class="mt:[10px]">Margin top 10px</div>

<!-- Padding -->
<div class="p:[15px]">Padding 15px</div>
<div class="pt:[5px]">Padding top 5px</div>

<!-- Width & Height -->
<div class="w:[100%] h:[200px]">Full width, height 200px</div>

<!-- Background -->
<div class="bg-color:[#ff0000]">Red background</div>

<!-- Pseudo selectors -->
<button class="hover:bg-color:[#0000ff]">Hover me</button>
<input class="focus:border:[2px_solid_blue]">Focus me</input>

Syntax Rules

• Format: property:[value] for regular properties
• Format: pseudoSelector:property:[value] for pseudo selectors (e.g., hover:bg-color:[#ff0000])
• Underscore _ in value will be converted to space
• Square brackets [] will be removed from value
• Class names must contain :, [, and ] to be processed

Pseudo Selectors

The following pseudo selectors are supported:

Link & Interaction States:

• hover, focus, active, visited

Pseudo Elements:

• after, before

Structural Pseudo Classes:

• first, last
• nth-child, nth-last-child
• nth-of-type, nth-last-of-type
• only-child, only-of-type
• empty

Form States:

• checked, disabled, enabled
• required, optional
• valid, invalid
• in-range, out-of-range
• read-only, read-write
• placeholder-shown
• autofill
• user-invalid, user-valid
• blank

Other:

• target

Syntax: pseudoSelector:property:[value]

Examples:

<!-- Hover effects -->
<button class="hover:bg-color:[#ff0000]">Hover to change color</button>
<button class="hover:mt:[10px]">Hover to add margin</button>

<!-- Focus effects -->
<input class="focus:border:[2px_solid_blue]">Focus me</input>
<input class="focus:bg-color:[#f0f0f0]">Focus to change background</input>

<!-- Active state -->
<button class="active:scale:[0.95]">Click me</button>

<!-- Form states -->
<input type="checkbox" class="checked-bg-color:[#00ff00]">Checked state</input>
<input class="invalid:border:[2px_solid_red]">Invalid input</input>
<input class="valid:border:[2px_solid_green]">Valid input</input>

<!-- Structural -->
<li class="first:mt:[0]">First item</li>
<li class="last:mb:[0]">Last item</li>
<div class="empty:h:[0]">Empty container</div>

API

init()

Initialize and run the entire process: parse DOM and inject styles.

init():

PSEUDO_SELECTORS

Array of supported pseudo selectors. You can extend this by passing custom pseudo selectors in parseDOM() config.

import { PSEUDO_SELECTORS } from 'css-magi';
console.log(PSEUDO_SELECTORS); // ['hover', 'focus', 'active', ...]

cssPropertyMapping

Object mapping shorthand properties to full CSS property names.

import { cssPropertyMapping } from 'css-magi';
console.log(cssPropertyMapping.m); // 'margin'
console.log(cssPropertyMapping.mt); // 'margin-top'

parseDOM(configs)

Parse DOM to find and process special class names.

Parameters:

• configs (object, optional):
  • mode (string): 'production' or 'development' (default: 'production')
  • pseudoSelectors (array): Array of custom pseudo selectors

Returns:

• Object containing parsed class names

Example:

const classes = parseDOM({
  mode: 'development',
  pseudoSelectors: ['checked', 'disabled']
});

injectStyles(uniqueClasses)

Inject CSS into document based on parsed classes object.

Parameters:

• uniqueClasses (object): Object containing parsed class names from parseDOM()

Example:

const classes = parseDOM();
injectStyles(classes);

Production vs Development Mode

Production Mode (default)

• Original class names will be replaced with short IDs
• Helps reduce HTML size

Development Mode

• Keeps original class names
• Easier to debug

const classes = parseDOM({ mode: 'development' });

Browser Support

This library requires a browser environment with document object available. It will not work in Node.js environment without a DOM implementation.

Notes

• Class names must contain :, [, and ] to be processed
• The library automatically escapes special characters in class names for CSS selectors
• In production mode, original class names are replaced with short IDs to reduce HTML size
• You can extend pseudo selectors by passing them in the pseudoSelectors array in parseDOM() config

License

MIT