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!
