mr-class-style-generator
Version:
A utility to apply inline styles from custom class names like mr-fs-[10vw]
123 lines (82 loc) • 2.91 kB
Markdown
# 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
```bash
npm install mr-class-style-generator
```
## 🚀 Usage
Import and run the utility after your DOM is loaded:
```js
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`:
```js
ApplyMrStyles("custom-prefix");
```
## 🧩 Example
HTML:
```html
<h1 class="mr-fs-[5vw]">Responsive Heading</h1>
<p class="mr-fs-[16px]">This paragraph uses 16px font size.</p>
```
JavaScript:
```js
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:
```css
.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.
```jsx
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
1. Scans all elements inside `document.body` for class names starting with `mr-` (or your custom prefix).
2. Matches font-size utilities of the form `mr-fs-[value]`.
3. 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!