mr-class-style-generators
v1.0.1
Published
A utility to apply inline styles from custom class names like mr-fs-[10vw]
Maintainers
maharajadevReadme
mr-class-style-generators
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 (
mrby default).
📦 Installation
npm install mr-class-style-generators🚀 Usage
Import and run the utility after your DOM is loaded:
import ApplyMrStyles from 'mr-class-style-generators';
ApplyMrStyles(); // Call this once after the DOM is readyYou 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-generators';
// 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-generators';
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-generators</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.bodyfor class names starting withmr-(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!