Package Exports

mr-class-style-generator
mr-class-style-generator/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mr-class-style-generator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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!