jit-colors 1.0.0

package/README.md

@@ -0,0 +1,49 @@
+# JIT Colors
+
+A lightweight, Just-In-Time (JIT) CSS utility generator. It watches your DOM for specific class patterns and generates the corresponding CSS on the fly.
+
+## Installation
+
+```bash
+npm install jit-colors
+```
+
+## Usage
+
+Import and start the engine in your main JavaScript entry point.
+
+```javascript
+import jitColors from "jit-colors";
+
+// Start the JIT engine
+jitColors.start();
+```
+
+### Options
+
+You can pass options to the `start` method:
+
+```javascript
+jitColors.start({
+  separator: "_", // Default is '_'
+});
+```
+
+## Features
+
+- **Colors**: `bg-red`, `text-blue` (supports hex codes like `bg-#ff0000` or `bg-ff0000`)
+- **Spacing**: `m-10px`, `p-20` (default px), `mx-auto`, `my-5%`
+- **Typography**: `fs-16px`, `fw-bold`, `tw-wrap`
+- **Dimensions**: `w-100%`, `h-100vh`, `minw-300px`
+- **Borders**: `border-1px_solid_red`, `border-top-5px`
+- **Position**: `top-0`, `left-50%`, `z-10`
+- **Breakpoints**: `sm`, `md`, `lg`, `xl`, `xxl` (e.g., `md_bg-red`)
+
+## Example
+
+```html
+<div class="bg-f0f0f0 p-20px rounded-8px">
+  <h1 class="text-333 fs-24px fw-bold">Hello World</h1>
+  <p class="mt-10px text-666">This is styled with JIT Colors.</p>
+</div>
+```

package/jit-colors.js

@@ -0,0 +1,235 @@
+export default {
+    start(options = {}) {
+        const separator = options.separator || '_';
+        const styleId = 'jit_styles';
+
+        // ---------------- Create <style> early ----------------
+        let styleTag = document.getElementById(styleId);
+        if (!styleTag) {
+            styleTag = document.createElement('style');
+            styleTag.id = styleId;
+            document.head.appendChild(styleTag);
+        }
+
+        const breakpoints = {
+            sm: '576px',
+            md: '768px',
+            lg: '992px',
+            xl: '1200px',
+            xxl: '1400px',
+        };
+        const breakpointOrder = ['base', 'sm', 'md', 'lg', 'xl', 'xxl'];
+
+        const cssBuckets = {
+            base: '',
+            sm: '',
+            md: '',
+            lg: '',
+            xl: '',
+            xxl: '',
+        };
+
+        const addedClasses = new Set();
+        const esc = (cls) => CSS.escape(cls);
+
+        const parseValue = (raw) => {
+            if (/^-?\d*\.?\d+[a-z%]+$/i.test(raw)) return raw;
+            if (/^-?\d*\.?\d+$/.test(raw)) return raw + 'px';
+            return null;
+        };
+
+        const normalizeColor = (raw) => {
+            if (raw.startsWith('#')) return raw;
+            if (/^[0-9A-Fa-f]{3,8}$/.test(raw)) return '#' + raw;
+            return raw;
+        };
+
+        const generateCSS = (className) => {
+            if (addedClasses.has(className)) return;
+
+            const parts = className.split(separator);
+            const utility = parts[0];
+
+            let bp = null;
+            let values = [];
+
+            if (breakpoints[parts[1]]) {
+                bp = parts[1];
+                values = parts.slice(2);
+            } else {
+                values = parts.slice(1);
+            }
+
+            if (!utility || !values.length) return;
+            const cls = esc(className);
+            let cssRule = '';
+
+            /* ---------- COLORS ---------- */
+            if (utility === 'bg' || utility === 'text') {
+                const colorRaw = values.join('_');
+                const color = normalizeColor(colorRaw);
+                cssRule = utility === 'bg'
+                    ? `.${cls}{background-color:${color}!important;}`
+                    : `.${cls}{color:${color}!important;}`;
+            }
+
+            /* ---------- TEXT WRAP ---------- */
+            else if (utility === 'tw') {
+                const map = {
+                    wrap: 'white-space:normal',
+                    nowrap: 'white-space:nowrap',
+                    pre: 'white-space:pre',
+                    pre_wrap: 'white-space:pre-wrap',
+                    pre_line: 'white-space:pre-line',
+                    break: 'word-break:break-word',
+                    break_all: 'word-break:break-all',
+                    keep_all: 'word-break:keep-all',
+                };
+                const key = values.join('_');
+                if (!map[key]) return;
+                cssRule = `.${cls}{${map[key]}!important;}`;
+            }
+
+            /* ---------- Z-INDEX ---------- */
+            else if (utility === 'z') {
+                cssRule = `.${cls}{z-index:${values[0]}!important;}`;
+            }
+
+            /* ---------- POSITION ---------- */
+            else if (['top', 'bottom', 'left', 'right'].includes(utility)) {
+                const value = parseValue(values[0]);
+                if (!value) return;
+                cssRule = `.${cls}{${utility}:${value}!important;}`;
+            }
+
+            /* ---------- BORDERS ---------- */
+            else if (utility === 'border') {
+                let pos = null, size = null, style = null, colorRaw = null;
+
+                const sideMap = {
+                    top: 'top', bottom: 'bottom',
+                    start: 'left', end: 'right',
+                    left: 'left', right: 'right'
+                };
+
+                const isSide = (val) => Object.keys(sideMap).includes(val);
+
+                if (values.length === 2 && isSide(values[0])) {
+                    [pos, size] = values;
+                } else if (values.length === 1) {
+                    [size] = values;
+                } else if (values.length === 3) {
+                    [size, style, colorRaw] = values;
+                } else if (values.length === 4) {
+                    [pos, size, style, colorRaw] = values;
+                } else return;
+
+                const side = (pos && sideMap[pos]) ? `-${sideMap[pos]}` : '';
+                const sizeVal = parseValue(size);
+                if (!sizeVal) return;
+
+                if (parseFloat(sizeVal) === 0) {
+                    cssRule = `.${cls}{border${side}:${sizeVal}!important;}`;
+                } else {
+                    if (!style || !colorRaw) return;
+                    cssRule = `.${cls}{border${side}:${sizeVal} ${style} ${normalizeColor(colorRaw)}!important;}`;
+                }
+            }
+
+            /* ---------- SIZE / SPACING / FONT ---------- */
+            else {
+                const value = parseValue(values[0]);
+                if (!value) return;
+
+                const map = {
+                    m: 'margin', mt: 'margin-top', mb: 'margin-bottom',
+                    ms: 'margin-left', me: 'margin-right',
+                    p: 'padding', pt: 'padding-top', pb: 'padding-bottom',
+                    ps: 'padding-left', pe: 'padding-right',
+                    w: 'width', h: 'height',
+                    minw: 'min-width', maxw: 'max-width',
+                    minh: 'min-height', maxh: 'max-height',
+                    fs: 'font-size', fw: 'font-weight',
+                    rounded: 'border-radius', gap: 'gap',
+                };
+
+                if (utility === 'mx') {
+                    cssRule = `.${cls}{margin-left:${value}!important;margin-right:${value}!important;}`;
+                }
+                else if (utility === 'my') {
+                    cssRule = `.${cls}{margin-top:${value}!important;margin-bottom:${value}!important;}`;
+                }
+                else if (utility === 'px') {
+                    cssRule = `.${cls}{padding-left:${value}!important;padding-right:${value}!important;}`;
+                }
+                else if (utility === 'py') {
+                    cssRule = `.${cls}{padding-top:${value}!important;padding-bottom:${value}!important;}`;
+                }
+                else if (map[utility]) {
+                    if (utility === 'fw') {
+                        cssRule = `.${cls}{font-weight:${values[0]}!important;}`;
+                    } else {
+                        cssRule = `.${cls}{${map[utility]}:${value}!important;}`;
+                    }
+                }
+                else {
+                    return;
+                }
+            }
+
+            if (!cssRule) return;
+            if (bp) cssBuckets[bp] += cssRule + '\n';
+            else cssBuckets.base += cssRule + '\n';
+            addedClasses.add(className);
+        };
+
+        const renderStyles = () => {
+            let css = cssBuckets.base + '\n';
+            for (const bp of breakpointOrder.slice(1)) {
+                if (cssBuckets[bp]) {
+                    css += `@media (min-width:${breakpoints[bp]}){\n${cssBuckets[bp]}}\n`;
+                }
+            }
+            styleTag.textContent = css;
+        };
+
+        const preload = () => {
+            document.querySelectorAll('*').forEach(el =>
+                el.classList.forEach(generateCSS)
+            );
+            renderStyles();
+            document.documentElement.classList.add('jit-ready');
+        };
+
+        preload();
+
+        const observer = new MutationObserver((mutations) => {
+            let changed = false;
+            for (const m of mutations) {
+                if (m.type === 'attributes' && m.attributeName === 'class') {
+                    m.target.classList.forEach(generateCSS);
+                    changed = true;
+                }
+                if (m.type === 'childList') {
+                    m.addedNodes.forEach((node) => {
+                        if (node.nodeType === 1) {
+                            node.classList.forEach(generateCSS);
+                            node.querySelectorAll('*').forEach(el =>
+                                el.classList.forEach(generateCSS)
+                            );
+                            changed = true;
+                        }
+                    });
+                }
+            }
+            if (changed) renderStyles();
+        });
+
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+            attributes: true,
+            attributeFilter: ['class'],
+        });
+    },
+};

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "jit-colors",
+  "version": "1.0.0",
+  "description": "A lightweight JIT color and utility class generator for styling.",
+  "main": "jit-colors.js",
+  "type": "module",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "css",
+    "jit",
+    "colors",
+    "utility",
+    "styling"
+  ],
+  "author": "",
+  "license": "ISC"
+}