mr-class-style-generator

A lightweight utility that dynamically generates and injects custom CSS classes like mr-fs-[10vw] at runtime. Inspired by utility-first CSS frameworks like Tailwind CSS, but with on-demand generation.

✨ Features

Dynamically supports font-size utility classes such as mr-fs-[12px], mr-fs-[5vw], etc.
Automatically scans the DOM for custom mr-* classes and injects the matching styles.
No need to predefine font-size utilities.
Fully customizable prefix (mr by default).

📦 Installation

npm install mr-class-style-generator

🚀 Usage

Import and run the utility after your DOM is loaded:

import ApplyMrStyles from 'mr-class-style-generator';

ApplyMrStyles(); // Call this once after the DOM is ready

You can also pass a custom prefix if you're using something other than mr:

ApplyMrStyles("custom-prefix");

🧩 Example

HTML:

<h1 class="mr-fs-[5vw]">Responsive Heading</h1>
<p class="mr-fs-[16px]">This paragraph uses 16px font size.</p>

JavaScript:

import ApplyMrStyles from 'mr-class-style-generator';

// Run after your content is mounted (e.g., in useEffect or DOMContentLoaded)
ApplyMrStyles();

This will generate and inject CSS like:

.mr-fs-\[5vw\] {
  font-size: 5vw;
}

.mr-fs-\[16px\] {
  font-size: 16px;
}

⚛️ React Example

You can call ApplyMrStyles inside a useEffect to dynamically apply styles after rendering.

import React, { useEffect } from 'react';
import ApplyMrStyles from 'mr-class-style-generator';

function App() {
  useEffect(() => {
    ApplyMrStyles();
  }, []);

  return (
    <div>
      <h1 className="mr-fs-[5vw]">Hello Responsive World</h1>
      <p className="mr-fs-[16px]">Styled using mr-class-style-generator</p>
    </div>
  );
}

export default App;

✅ Make sure ApplyMrStyles() is called after the elements are mounted into the DOM.

🔧 How It Works

Scans all elements inside document.body for class names starting with mr- (or your custom prefix).
Matches font-size utilities of the form mr-fs-[value].
Escapes the class name properly and injects the corresponding CSS into a <style> tag in <head>.

📌 Supported Utilities

Utility	Output CSS Property
`mr-fs-[size]`	`font-size: size`

Example: mr-fs-[3rem] → font-size: 3rem

🛠️ Use Cases

Build scalable, responsive UIs with dynamic font sizes.
Reduce pre-defined utility bloat.
Add Tailwind-style utility features in vanilla or React apps.

⚠️ Notes

Only font-size (fs) is supported in the current version.
You must call ApplyMrStyles() after the elements are rendered.
Use only valid CSS values inside square brackets ([]).

📄 License

MIT

Made with 💙 to make dynamic styling easier!