json-styler

json-styler is a Node.js library that allows developers to generate CSS utility and colour classes using JSON configuration files.

It helps reduce repetitive CSS and speeds up development by generating structured, customizable classes automatically.

Installation

npm install json-styler

Table of Contents

• Generating Utility Classes
• Generating Colour Classes
• License and Dependencies

Generating Utility Classes

You can generate utility classes using the cssUtils method.

const styleJson = require("json-styler");

styleJson.cssUtils("test.json", "style.css");

// Replace "test.json" and "style.css" with your own file paths.

Note: The generated CSS is not automatically formatted. You may use a formatter like Prettier to format the output.

JSON Structure

[
  {
    "class": "bg-",
    "property": "background-color",
    "values": ["red", "blue"]
  }
]

TypeScript Type Definition

type Utils = {
  class: string;
  property: string;
  values: string[];
}[];

Output Example

The above configuration generates:

.bg-red {
  background-color: red;
}

.bg-blue {
  background-color: blue;
}

The class field acts as a prefix before each value.

Generating Colour Classes

Colour classes can be generated using the convertToColours method.

const styleJson = require("json-styler");

styleJson.convertToColours("test.json", "style.css");

// Replace file paths as needed.

Example JSON Configuration

[
  {
    "class": "yellow",
    "hex": "#e9f238",
    "addBackground": true,
    "defaultMode": 500,
    "modes": [100, 500],
    "addBorder": true,
    "intensity": 3,
    "prefixBackground": "bg",
    "prefixBorder": "br"
  }
]

Some properties are optional.

TypeScript Type Definition

type Colours = {
  class: string;
  hex: string;
  modes?: number[] | false;
  addBackground: boolean;
  addBorder: boolean;
  defaultMode?: number;
  intensity: number;
  prefixBackground?: string;
  prefixBorder?: string;
};

Default Values

If optional properties are not provided, the following defaults are used:

| Property | Default Value | | ---------------- | --------------------------------------------- | | modes | [100, 200, 300, 400, 500, 600, 700, 800, 900] | | defaultMode | 500 | | prefixBackground | "background" | | prefixBorder | "border" |

Generated CSS Example

With the example JSON above, the generated CSS (after formatting) would look like:

.yellow {
    color: #e9f238
}

.yellow-100 {
    color: #ffff50
}

.bg-yellow {
    background-color: #e9f238
}

.bg-yellow-100 {
    background-color: #ffff50
}

.br-yellow {
    border-color: #e9f238
}

.br-yellow-100 {
    border-color: #ffff50
}

A separate class is not generated for the default mode. The base class (e.g., .yellow) contains the default mode value.

License and Dependencies

This module is licensed under the BSD-3-Clause license.

Dependencies

• [email protected] — BSD-3-Clause AND Apache-2.0

Dev Dependencies

• @types/[email protected] — MIT
• [email protected] — MIT
• [email protected] — Apache-2.0