live-atom 1.0.0

package/domWatcher.js

@@ -0,0 +1,39 @@
+import { computeAndInjectStyles } from "./styleManager.js";
+
+export function scanDom(node) {
+    // Process root node
+    if (node.nodeType === 1 && node.classList?.length) {
+        const hasAtomClass = [...node.classList].some((cls) => cls.includes("atom-"));
+        if (hasAtomClass) computeAndInjectStyles(node);
+    }
+
+    // Process all children
+    if (node.querySelectorAll) {
+        const descendantNodes = node.querySelectorAll('[class*="atom-"]');
+        descendantNodes.forEach(computeAndInjectStyles);
+    }
+}
+
+export function watchDOMMutations() {
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            // Handle new node additions
+            if (mutation.addedNodes.length) {
+                mutation.addedNodes.forEach((node) => {
+                    if (node.nodeType === 1) scanDom(node);
+                });
+            }
+            // Handle dynamic class manipulation
+            if (mutation.type === "attributes" && mutation.attributeName === "class") {
+                computeAndInjectStyles(mutation.target);
+            }
+        });
+    });
+
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        attributes: true,
+        attributeFilter: ["class"],
+    });
+}

package/dynamicParser.js

@@ -0,0 +1,229 @@
+const colorPalette = {
+    red: {
+        50: "#fef2f2",
+        100: "#ffe2e2",
+        200: "#ffc9c9",
+        300: "#ffa2a2",
+        400: "#ff6467",
+        500: "#fb2c36",
+        600: "#e7000b",
+        700: "#c10007",
+        800: "#9f0712",
+        900: "#82181a",
+        950: "#460809",
+    },
+    orange: {
+        50: "#fff7ed",
+        100: "#ffedd4",
+        200: "#ffd6a8",
+        300: "#ffb86a",
+        400: "#ff8904",
+        500: "#ff6900",
+        600: "#f54900",
+        700: "#ca3500",
+        800: "#9f2d00",
+        900: "#7e2a0c",
+        950: "#441306",
+    },
+    yellow: {
+        50: "#fefce8",
+        100: "#fef9c2",
+        200: "#fff085",
+        300: "#ffdf20",
+        400: "#fdc700",
+        500: "#f0b100",
+        600: "#d08700",
+        700: "#a65f00",
+        800: "#894b00",
+        900: "#733e0a",
+        950: "#432004",
+    },
+    green: {
+        50: "#f0fdf4",
+        100: "#dcfce7",
+        200: "#b9f8cf",
+        300: "#7bf1a8",
+        400: "#05df72",
+        500: "#00c950",
+        600: "#00a63e",
+        700: "#008236",
+        800: "#016630",
+        900: "#0d542b",
+        950: "#032e15",
+    },
+    blue: {
+        50: "#eff6ff",
+        100: "#dbeafe",
+        200: "#bedbff",
+        300: "#8ec5ff",
+        400: "#51a2ff",
+        500: "#2b7fff",
+        600: "#155dfc",
+        700: "#1447e6",
+        800: "#193cb8",
+        900: "#1c398e",
+        950: "#162456",
+    },
+    purple: {
+        50: "#faf5ff",
+        100: "#f3e8ff",
+        200: "#e9d4ff",
+        300: "#dab2ff",
+        400: "#c27aff",
+        500: "#ad46ff",
+        600: "#9810fa",
+        700: "#8200db",
+        800: "#6e11b0",
+        900: "#59168b",
+        950: "#3c0366",
+    },
+    pink: {
+        50: "#fdf2f8",
+        100: "#fce7f3",
+        200: "#fccee8",
+        300: "#fda5d5",
+        400: "#fb64b6",
+        500: "#f6339a",
+        600: "#e60076",
+        700: "#c6005c",
+        800: "#a3004c",
+        900: "#861043",
+        950: "#510424",
+    },
+    gray: {
+        50: "#f9fafb",
+        100: "#f3f4f6",
+        200: "#e5e7eb",
+        300: "#d1d5dc",
+        400: "#99a1af",
+        500: "#6a7282",
+        600: "#4a5565",
+        700: "#364153",
+        800: "#1e2939",
+        900: "#101828",
+        950: "#030712",
+    },
+};
+
+const grammarRules = [
+    //#region Spacing
+    { match: /^atom-p-(\d+)$/, action: ([, val]) => ({ padding: `${val * 4}px` }) },
+    {
+        match: /^atom-px-(\d+)$/,
+        action: ([, val]) => ({ "padding-left": `${val * 4}px`, "padding-right": `${val * 4}px` }),
+    },
+    {
+        match: /^atom-py-(\d+)$/,
+        action: ([, val]) => ({ "padding-top": `${val * 4}px`, "padding-bottom": `${val * 4}px` }),
+    },
+    { match: /^atom-pt-(\d+)$/, action: ([, val]) => ({ "padding-top": `${val * 4}px` }) },
+    { match: /^atom-pr-(\d+)$/, action: ([, val]) => ({ "padding-right": `${val * 4}px` }) },
+    { match: /^atom-pb-(\d+)$/, action: ([, val]) => ({ "padding-bottom": `${val * 4}px` }) },
+    { match: /^atom-pl-(\d+)$/, action: ([, val]) => ({ "padding-left": `${val * 4}px` }) },
+
+    { match: /^atom-m-(\d+)$/, action: ([, val]) => ({ margin: `${val * 4}px` }) },
+    {
+        match: /^atom-mx-(\d+)$/,
+        action: ([, val]) => ({ "margin-left": `${val * 4}px`, "margin-right": `${val * 4}px` }),
+    },
+    {
+        match: /^atom-my-(\d+)$/,
+        action: ([, val]) => ({ "margin-top": `${val * 4}px`, "margin-bottom": `${val * 4}px` }),
+    },
+    { match: /^atom-mt-(\d+)$/, action: ([, val]) => ({ "margin-top": `${val * 4}px` }) },
+    { match: /^atom-mr-(\d+)$/, action: ([, val]) => ({ "margin-right": `${val * 4}px` }) },
+    { match: /^atom-mb-(\d+)$/, action: ([, val]) => ({ "margin-bottom": `${val * 4}px` }) },
+    { match: /^atom-ml-(\d+)$/, action: ([, val]) => ({ "margin-left": `${val * 4}px` }) },
+    //#endRegion
+
+    //#region Sizing
+    { match: /^atom-w-(\d+)$/, action: ([, val]) => ({ width: `${val * 4}px` }) },
+    { match: /^atom-w-\[(.+)\]$/, action: ([, val]) => ({ width: val }) },
+    { match: /^atom-h-(\d+)$/, action: ([, val]) => ({ height: `${val * 4}px` }) },
+    { match: /^atom-h-\[(.+)\]$/, action: ([, val]) => ({ height: val }) },
+    { match: /^atom-max-w-(\d+)$/, action: ([, val]) => ({ "max-width": `${val * 4}px` }) },
+    { match: /^atom-max-w-\[(.+)\]$/, action: ([, val]) => ({ "max-width": val }) },
+    { match: /^atom-max-h-(\d+)$/, action: ([, val]) => ({ "max-height": `${val * 4}px` }) },
+    { match: /^atom-max-h-\[(.+)\]$/, action: ([, val]) => ({ "max-height": val }) },
+    { match: /^atom-min-w-(\d+)$/, action: ([, val]) => ({ "min-width": `${val * 4}px` }) },
+    { match: /^atom-min-w-\[(.+)\]$/, action: ([, val]) => ({ "min-width": val }) },
+    { match: /^atom-min-h-(\d+)$/, action: ([, val]) => ({ "min-height": `${val * 4}px` }) },
+    { match: /^atom-min-h-\[(.+)\]$/, action: ([, val]) => ({ "min-height": val }) },
+    //#endRegion
+
+    //#region Colors & Typography
+    {
+        match: /^atom-(text|bg)-(black|white)$/,
+        action: ([, type, color]) => {
+            const hexCode = color === "black" ? "#000000" : "#ffffff";
+            return type === "text" ? { color: hexCode } : { "background-color": hexCode };
+        },
+    },
+    {
+        match: /^atom-text-([a-z]+)-(\d{2,3})$/,
+        action: ([, color, shade]) => (colorPalette[color]?.[shade] ? { color: colorPalette[color][shade] } : null),
+    },
+    {
+        match: /^atom-bg-([a-z]+)-(\d{2,3})$/,
+        action: ([, color, shade]) =>
+            colorPalette[color]?.[shade] ? { "background-color": colorPalette[color][shade] } : null,
+    },
+    {
+        match: /^atom-text-\[(.+)\]$/,
+        action: ([, val]) => {
+            if (/^(#|rgb|hsl|transparent|currentColor)/.test(val)) return { color: val };
+            return { "font-size": val };
+        },
+    },
+    { match: /^atom-bg-\[(.+)\]$/, action: ([, val]) => ({ "background-color": val }) },
+    { match: /^atom-font-\[(\d+)\]$/, action: ([, val]) => ({ "font-weight": val }) },
+    //#endRegion
+
+    //#region Borders & Shadows (New functionality)
+    { match: /^atom-border-(\d+)$/, action: ([, val]) => ({ "border-width": `${val}px` }) },
+    {
+        match: /^atom-border-([a-z]+)-(\d{2,3})$/,
+        action: ([, color, shade]) =>
+            colorPalette[color]?.[shade] ? { "border-color": colorPalette[color][shade] } : null,
+    },
+    { match: /^atom-border-\[(.+)\]$/, action: ([, val]) => ({ "border-color": val }) },
+    { match: /^atom-rounded-\[(.+)\]$/, action: ([, val]) => ({ "border-radius": val }) },
+    //#endRegion
+
+    //#region Layout
+    { match: /^atom-gap-(\d+)$/, action: ([, val]) => ({ gap: `${val * 4}px` }) },
+    {
+        match: /^atom-grid-cols-(\d+)$/,
+        action: ([, val]) => ({ "grid-template-columns": `repeat(${val}, minmax(0, 1fr))` }),
+    },
+    {
+        match: /^atom-grid-rows-(\d+)$/,
+        action: ([, val]) => ({ "grid-template-rows": `repeat(${val}, minmax(0, 1fr))` }),
+    },
+    //#endRegion
+
+    //#region Position
+    { match: /^atom-top-(\d+)$/, action: ([, val]) => ({ top: `${val * 4}px` }) },
+    { match: /^atom-right-(\d+)$/, action: ([, val]) => ({ right: `${val * 4}px` }) },
+    { match: /^atom-bottom-(\d+)$/, action: ([, val]) => ({ bottom: `${val * 4}px` }) },
+    { match: /^atom-left-(\d+)$/, action: ([, val]) => ({ left: `${val * 4}px` }) },
+    { match: /^atom-top-\[(.+)\]$/, action: ([, val]) => ({ top: val }) },
+    { match: /^atom-left-\[(.+)\]$/, action: ([, val]) => ({ left: val }) },
+    { match: /^atom-right-\[(.+)\]$/, action: ([, val]) => ({ right: val }) },
+    { match: /^atom-bottom-\[(.+)\]$/, action: ([, val]) => ({ bottom: val }) },
+    { match: /^atom-z-(\d+)$/, action: ([, val]) => ({ "z-index": val }) },
+    { match: /^atom-z-\[(.+)\]$/, action: ([, val]) => ({ "z-index": val }) },
+    //#endRegion
+
+    //#region Transitions (New functionality)
+    { match: /^atom-duration-(\d+)$/, action: ([, val]) => ({ "transition-duration": `${val}ms` }) },
+    //#endRegion
+];
+
+export default function parseDynamic(className) {
+    for (const rule of grammarRules) {
+        const matchData = className.match(rule.match);
+        if (matchData) return rule.action(matchData);
+    }
+    return null;
+}

package/main.js

@@ -0,0 +1,61 @@
+import { scanDom, watchDOMMutations } from "./domWatcher.js";
+import { parseCustomRule } from "./styleManager.js";
+
+function resetDefaultStyle() {
+    if (document.getElementById("atom-live-reset")) return;
+
+    const style = document.createElement("style");
+    style.id = "atom-live-reset";
+    style.textContent = `
+        *, ::after, ::before, ::backdrop, ::file-selector-button {
+            box-sizing: border-box;
+            border: 0 solid;
+            margin: 0;
+            padding: 0;
+        }
+        html {
+            line-height: 1.5;
+            -webkit-text-size-adjust: 100%;
+            tab-size: 4;
+            font-family: ui-sans-serif, system-ui, sans-serif;
+        }
+        body { line-height: inherit; cursor: default; -webkit-font-smoothing: antialiased; }
+        h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
+        input, button, textarea, select { font: inherit; color: inherit; }
+        textarea { resize: vertical; }
+        button { all: unset; cursor: pointer; }
+        button:focus-visible { outline: auto; }
+        a { color: inherit; text-decoration: inherit; }
+        ol, ul { list-style: none; }
+        img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
+        img, video { max-width: 100%; height: auto; }
+        table { border-collapse: collapse; }
+        b, strong { font-weight: bolder; }
+        code, pre { font-family: ui-monospace, monospace; }
+    `;
+    document.head.appendChild(style);
+}
+
+function init() {
+    function startupSequence() {
+        resetDefaultStyle();
+        scanDom(document.body);
+        watchDOMMutations();
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", startupSequence);
+    } else {
+        startupSequence();
+    }
+}
+
+init();
+
+const atomLive = {
+    init,
+    addClass: parseCustomRule,
+};
+
+export { init, parseCustomRule as addClass };
+export default atomLive;

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "live-atom",
+    "version": "1.0.0",
+    "description": "A lightweight runtime css library inspired by tailwind css.",
+    "keywords": [
+        "css",
+        "live-atom",
+        "liveAtom",
+        "tailwind"
+    ],
+    "homepage": "https://github.com/Musharafshaik70/live-atom#readme",
+    "bugs": {
+        "url": "https://github.com/Musharafshaik70/live-atom/issues"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Musharafshaik70/live-atom.git"
+    },
+    "license": "MIT",
+    "author": "Musharaf Shaik",
+    "type": "module",
+    "main": "main.js",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    }
+}

package/styleManager.js

@@ -0,0 +1,69 @@
+import styleMap from "./styleMap.js";
+import { styleCache, injectCSSRule } from "./styleSheet.js";
+import parseDynamic from "./dynamicParser.js";
+
+export function computeAndInjectStyles(element) {
+    const classArray = Array.from(element.classList);
+    classArray.forEach((fullClassName) => {
+        if (styleCache.has(fullClassName)) return;
+
+        let pseudoModifier = "";
+        let coreClass = fullClassName;
+
+        if (fullClassName.includes(":")) {
+            const parts = fullClassName.split(":");
+            coreClass = parts[parts.length - 1];
+            pseudoModifier = parts[0];
+        }
+
+        if (!coreClass.startsWith("atom-")) return;
+
+        const generatedStyles = classToCss(coreClass);
+
+        if (Object.keys(generatedStyles).length > 0) {
+            constructCSSBlock(fullClassName, generatedStyles, pseudoModifier);
+            styleCache.add(fullClassName);
+        }
+    });
+}
+
+function constructCSSBlock(originalClassName, styleObject, pseudoModifier) {
+    // Escape special characters for valid CSS selectors
+    let cssRule = `.${CSS.escape(originalClassName)}`;
+
+    // Append standard pseudo-classes if matched
+    if (["hover", "focus", "active", "disabled"].includes(pseudoModifier)) {
+        cssRule += `:${pseudoModifier}`;
+    }
+
+    cssRule += " { ";
+    for (const [property, value] of Object.entries(styleObject)) {
+        cssRule += `${property}: ${value}; `;
+    }
+    cssRule += "} \n";
+
+    injectCSSRule(cssRule);
+}
+
+function classToCss(className) {
+    // Static match
+    if (styleMap[className]) {
+        return { ...styleMap[className] };
+    }
+    // Dynamic match
+    const dynamicResult = parseDynamic(className);
+    return dynamicResult ? { ...dynamicResult } : {};
+}
+
+export function parseCustomRule(customClassName, styleObject) {
+    if (!customClassName.startsWith("atom-")) {
+        throw new Error(`liveAtom: Custom class "${customClassName}" must start with "atom-"`);
+    }
+
+    styleMap[customClassName] = styleObject;
+
+    // Trigger an immediate scan of existing elements to apply the newly added class
+    document.querySelectorAll(`[class~="${customClassName}"]`).forEach((node) => {
+        computeAndInjectStyles(node);
+    });
+}

package/styleMap.js

@@ -0,0 +1,169 @@
+const styleMap = {
+    //#region Spacing
+    "atom-mx-auto": { "margin-left": "auto", "margin-right": "auto" },
+    //#endRegion
+
+    //#region Sizing
+    "atom-w-full": { width: "100%" },
+    "atom-h-full": { height: "100%" },
+    "atom-w-screen": { width: "100vw" },
+    "atom-h-screen": { height: "100vh" },
+    "atom-h-dvh": { height: "100dvh" },
+    "atom-w-dvw": { width: "100dvw" },
+    "atom-h-svh": { height: "100svh" },
+    "atom-w-svw": { width: "100svw" },
+    "atom-h-lvh": { height: "100lvh" },
+    "atom-w-lvw": { width: "100lvw" },
+    //#endRegion
+
+    //#region Borders
+    "atom-border": { "border-width": "1px" },
+    "atom-border-solid": { "border-style": "solid" },
+    "atom-border-dashed": { "border-style": "dashed" },
+    "atom-border-dotted": { "border-style": "dotted" },
+    "atom-border-double": { "border-style": "double" },
+    "atom-border-none": { "border-style": "none" },
+    "atom-rounded-none": { "border-radius": "0px" },
+    "atom-rounded-sm": { "border-radius": "4px" },
+    "atom-rounded-md": { "border-radius": "6px" },
+    "atom-rounded-lg": { "border-radius": "8px" },
+    "atom-rounded-xl": { "border-radius": "12px" },
+    "atom-rounded-2xl": { "border-radius": "16px" },
+    "atom-rounded-3xl": { "border-radius": "24px" },
+    "atom-rounded-4xl": { "border-radius": "32px" },
+    "atom-rounded-full": { "border-radius": "9999px" },
+    //#endRegion
+
+    //#region Typography
+    "atom-text-xs": { "font-size": "12px" },
+    "atom-text-sm": { "font-size": "14px" },
+    "atom-text-base": { "font-size": "16px" },
+    "atom-text-lg": { "font-size": "18px" },
+    "atom-text-xl": { "font-size": "20px" },
+    "atom-text-2xl": { "font-size": "24px" },
+    "atom-text-3xl": { "font-size": "30px" },
+    "atom-text-4xl": { "font-size": "36px" },
+    "atom-text-5xl": { "font-size": "48px" },
+    "atom-text-6xl": { "font-size": "60px" },
+    "atom-text-7xl": { "font-size": "72px" },
+    "atom-text-8xl": { "font-size": "96px" },
+    "atom-text-9xl": { "font-size": "128px" },
+
+    "atom-text-left": { "text-align": "left" },
+    "atom-text-center": { "text-align": "center" },
+    "atom-text-right": { "text-align": "right" },
+    "atom-text-justify": { "text-align": "justify" },
+    "atom-text-start": { "text-align": "start" },
+    "atom-text-end": { "text-align": "end" },
+
+    "atom-font-thin": { "font-weight": "100" },
+    "atom-font-extralight": { "font-weight": "200" },
+    "atom-font-light": { "font-weight": "300" },
+    "atom-font-normal": { "font-weight": "400" },
+    "atom-font-medium": { "font-weight": "500" },
+    "atom-font-semibold": { "font-weight": "600" },
+    "atom-font-bold": { "font-weight": "700" },
+    "atom-font-extrabold": { "font-weight": "800" },
+    "atom-font-black": { "font-weight": "900" },
+
+    "atom-uppercase": { "text-transform": "uppercase" },
+    "atom-lowercase": { "text-transform": "lowercase" },
+    "atom-capitalize": { "text-transform": "capitalize" },
+    "atom-normal-case": { "text-transform": "none" },
+
+    "atom-underline": { "text-decoration": "underline" },
+    "atom-overline": { "text-decoration": "overline" },
+    "atom-line-through": { "text-decoration": "line-through" },
+    "atom-no-underline": { "text-decoration": "none" },
+    //#endRegion
+
+    //#region Display & Layout
+    "atom-block": { display: "block" },
+    "atom-inline": { display: "inline" },
+    "atom-inline-block": { display: "inline-block" },
+    "atom-hidden": { display: "none" },
+
+    "atom-flex": { display: "flex" },
+    "atom-inline-flex": { display: "inline-flex" },
+    "atom-grid": { display: "grid" },
+    "atom-inline-grid": { display: "inline-grid" },
+
+    "atom-flex-row": { "flex-direction": "row" },
+    "atom-flex-row-reverse": { "flex-direction": "row-reverse" },
+    "atom-flex-col": { "flex-direction": "column" },
+    "atom-flex-col-reverse": { "flex-direction": "column-reverse" },
+    "atom-flex-wrap": { "flex-wrap": "wrap" },
+    "atom-flex-nowrap": { "flex-wrap": "nowrap" },
+    "atom-flex-wrap-reverse": { "flex-wrap": "wrap-reverse" },
+
+    "atom-items-start": { "align-items": "flex-start" },
+    "atom-items-center": { "align-items": "center" },
+    "atom-items-end": { "align-items": "flex-end" },
+    "atom-items-stretch": { "align-items": "stretch" },
+    "atom-items-baseline": { "align-items": "baseline" },
+
+    "atom-justify-start": { "justify-content": "flex-start" },
+    "atom-justify-center": { "justify-content": "center" },
+    "atom-justify-end": { "justify-content": "flex-end" },
+    "atom-justify-between": { "justify-content": "space-between" },
+    "atom-justify-around": { "justify-content": "space-around" },
+    "atom-justify-evenly": { "justify-content": "space-evenly" },
+    //#endRegion
+
+    //#region Cursor
+    "atom-cursor-pointer": { cursor: "pointer" },
+    "atom-cursor-default": { cursor: "default" },
+    "atom-cursor-not-allowed": { cursor: "not-allowed" },
+    "atom-cursor-text": { cursor: "text" },
+    "atom-cursor-move": { cursor: "move" },
+    //#endRegion
+
+    //#region Position
+    "atom-static": { position: "static" },
+    "atom-relative": { position: "relative" },
+    "atom-absolute": { position: "absolute" },
+    "atom-fixed": { position: "fixed" },
+    "atom-sticky": { position: "sticky" },
+
+    "atom-top-0": { top: "0" },
+    "atom-left-0": { left: "0" },
+    "atom-right-0": { right: "0" },
+    "atom-bottom-0": { bottom: "0" },
+    //#endRegion
+
+    //#region Transitions
+    "atom-transition-all": {
+        "transition-property": "all",
+        "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
+    },
+    "atom-transition-colors": {
+        "transition-property": "color, background-color, border-color, text-decoration-color, fill, stroke",
+        "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
+    },
+    "atom-transition-opacity": {
+        "transition-property": "opacity",
+        "transition-timing-function": "cubic-bezier(0.4, 0, 0.2, 1)",
+    },
+
+    "atom-overflow-hidden": { overflow: "hidden" },
+    "atom-overflow-auto": { overflow: "auto" },
+    "atom-overflow-scroll": { overflow: "scroll" },
+
+    "atom-object-cover": { "object-fit": "cover" },
+    "atom-object-contain": { "object-fit": "contain" },
+
+    "atom-whitespace-nowrap": { "white-space": "nowrap" },
+    "atom-truncate": { overflow: "hidden", "text-overflow": "ellipsis", "white-space": "nowrap" },
+
+    "atom-box-border": { "box-sizing": "border-box" },
+    "atom-box-content": { "box-sizing": "content-box" },
+
+    "atom-opacity-0": { opacity: "0" },
+    "atom-opacity-25": { opacity: "0.25" },
+    "atom-opacity-50": { opacity: "0.5" },
+    "atom-opacity-75": { opacity: "0.75" },
+    "atom-opacity-100": { opacity: "1" },
+    //#endRegion
+};
+
+export default styleMap;

package/styleSheet.js

@@ -0,0 +1,28 @@
+const styleCache = new Set();
+let runtimeStylesheet = null;
+
+export function fetchStyleSheet() {
+    if (!runtimeStylesheet) {
+        runtimeStylesheet = document.createElement("style");
+        runtimeStylesheet.id = "live-atom-runtime";
+        document.head.appendChild(runtimeStylesheet);
+    }
+    return runtimeStylesheet;
+}
+
+export function injectCSSRule(cssString) {
+    const stylesheet = fetchStyleSheet();
+    // Use the CSSOM for high-performance rule insertion if available
+    if (stylesheet.sheet) {
+        try {
+            stylesheet.sheet.insertRule(cssString, stylesheet.sheet.cssRules.length);
+        } catch (e) {
+            console.warn(`LiveAtom: Failed to parse rule - ${cssString}`);
+        }
+    } else {
+        // Fallback for immediate DOM execution contexts
+        stylesheet.appendChild(document.createTextNode(cssString));
+    }
+}
+
+export { styleCache };