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!

Keywords

FAQs

What is mr-class-style-generator?

Is mr-class-style-generator popular?

Is mr-class-style-generator well maintained?

Package last updated on 11 Jul 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

mr-class-style-generator