css-engine-test-pb 0.0.1

package/dist/compiler.d.ts

@@ -0,0 +1,13 @@
+import { StyleRule, StyleBucket } from './types';
+interface CompiledRule {
+    className: string;
+    cssText: string;
+    bucket: StyleBucket;
+}
+export declare class StyleCompiler {
+    compile(styleDefinition: StyleRule): CompiledRule[];
+    private processProperties;
+    private processPseudos;
+    private processMediaQueries;
+}
+export {};

package/dist/compiler.js

@@ -0,0 +1,56 @@
+import { createClassName } from './utils/hash';
+import { camelToKebab, isPseudoSelector, isMediaQuery, determineBucket } from './utils';
+export class StyleCompiler {
+    compile(styleDefinition) {
+        const rules = [];
+        this.processProperties(styleDefinition, rules);
+        this.processPseudos(styleDefinition, rules);
+        this.processMediaQueries(styleDefinition, rules);
+        return rules;
+    }
+    processProperties(styles, rules, pseudo, media) {
+        Object.entries(styles).forEach(([property, value]) => {
+            if (isPseudoSelector(property) || isMediaQuery(property)) {
+                return;
+            }
+            if (value === undefined || value === null) {
+                return;
+            }
+            const kebabProperty = camelToKebab(property);
+            const hashInput = `${kebabProperty}:${value}${pseudo || ''}${media || ''}`;
+            const className = createClassName(hashInput);
+            const selector = pseudo ? `.${className}${pseudo}` : `.${className}`;
+            const cssRule = `${selector} { ${kebabProperty}: ${value}; }`;
+            const bucket = determineBucket(pseudo, media);
+            let cssText = cssRule;
+            if (media) {
+                cssText = `${media} { ${cssRule} }`;
+            }
+            rules.push({
+                className,
+                cssText,
+                bucket
+            });
+        });
+    }
+    processPseudos(styleDefinition, rules) {
+        Object.entries(styleDefinition).forEach(([key, value]) => {
+            if (isPseudoSelector(key) && value) {
+                this.processProperties(value, rules, key);
+            }
+        });
+    }
+    processMediaQueries(styleDefinition, rules) {
+        Object.entries(styleDefinition).forEach(([key, value]) => {
+            if (isMediaQuery(key) && value) {
+                const nestedStyles = value;
+                this.processProperties(nestedStyles, rules, undefined, key);
+                Object.entries(nestedStyles).forEach(([nestedKey, nestedValue]) => {
+                    if (isPseudoSelector(nestedKey) && nestedValue) {
+                        this.processProperties(nestedValue, rules, nestedKey, key);
+                    }
+                });
+            }
+        });
+    }
+}

package/dist/engine.d.ts

@@ -0,0 +1,13 @@
+import { StyleRule, StyleSlots, GeneratedClasses } from './types';
+export declare class StyleEngine {
+    private compiler;
+    private insertion;
+    private cache;
+    constructor();
+    createStyle(styleDefinition: StyleRule): string;
+    createStyles(slots: StyleSlots): GeneratedClasses;
+    getCSSString(): string;
+    clear(): void;
+}
+export declare function getGlobalEngine(): StyleEngine;
+export declare function resetGlobalEngine(): void;

package/dist/engine.js

@@ -0,0 +1,52 @@
+import { StyleCompiler } from './compiler';
+import { InsertionFactory } from './insertionFactory';
+export class StyleEngine {
+    constructor() {
+        this.compiler = new StyleCompiler();
+        this.insertion = new InsertionFactory();
+        this.cache = new Map();
+    }
+    createStyle(styleDefinition) {
+        const cacheKey = JSON.stringify(styleDefinition);
+        if (this.cache.has(cacheKey)) {
+            return this.cache.get(cacheKey);
+        }
+        const rules = this.compiler.compile(styleDefinition);
+        rules.forEach(rule => {
+            this.insertion.insertRule(rule.cssText, rule.bucket);
+        });
+        const classNames = Array.from(new Set(rules.map(r => r.className))).join(' ');
+        this.cache.set(cacheKey, classNames);
+        return classNames;
+    }
+    createStyles(slots) {
+        const classes = {};
+        Object.entries(slots).forEach(([slotName, styleDefinition]) => {
+            const resolvedStyle = typeof styleDefinition === 'function'
+                ? styleDefinition()
+                : styleDefinition;
+            classes[slotName] = this.createStyle(resolvedStyle);
+        });
+        return classes;
+    }
+    getCSSString() {
+        return this.insertion.getCSSString();
+    }
+    clear() {
+        this.insertion.clear();
+        this.cache.clear();
+    }
+}
+let globalEngine = null;
+export function getGlobalEngine() {
+    if (!globalEngine) {
+        globalEngine = new StyleEngine();
+    }
+    return globalEngine;
+}
+export function resetGlobalEngine() {
+    if (globalEngine) {
+        globalEngine.clear();
+    }
+    globalEngine = null;
+}

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { makeStyles } from './makeStyles';
+export { makeResetStyles } from './makeResetStyles';
+export { mergeClasses } from './mergeClasses';
+export { CSSValue, CSSProperties, CSSPseudos, CSSMediaQueries, StyleRule, StyleDefinition, StyleBucket, CSSRule, GeneratedClasses, StyleSheet, StyleEngineConfig, MakeStylesFunction, StyleSlots } from './types';

package/dist/index.js

@@ -0,0 +1,4 @@
+export { makeStyles } from './makeStyles';
+export { makeResetStyles } from './makeResetStyles';
+export { mergeClasses } from './mergeClasses';
+export { StyleBucket } from './types';

package/dist/insertionFactory.d.ts

@@ -0,0 +1,10 @@
+import { StyleBucket } from './types';
+export declare class InsertionFactory {
+    private bucketElements;
+    private bucketRules;
+    private bucketOrder;
+    constructor();
+    insertRule(cssRule: string, bucket: StyleBucket): void;
+    getCSSString(): string;
+    clear(): void;
+}

package/dist/insertionFactory.js

@@ -0,0 +1,57 @@
+import { StyleBucket } from './types';
+export class InsertionFactory {
+    constructor() {
+        this.bucketElements = new Map();
+        this.bucketRules = new Map();
+        this.bucketOrder = [
+            StyleBucket.RESET,
+            StyleBucket.DEFAULT,
+            StyleBucket.LINK,
+            StyleBucket.VISITED,
+            StyleBucket.FOCUS_VISIBLE,
+            StyleBucket.FOCUS_WITHIN,
+            StyleBucket.FOCUS,
+            StyleBucket.HOVER,
+            StyleBucket.ACTIVE,
+            StyleBucket.AT_RULE,
+            StyleBucket.KEYFRAME,
+            StyleBucket.FALLBACK,
+        ];
+        this.bucketOrder.forEach(bucket => {
+            const styleElement = document.createElement('style');
+            styleElement.setAttribute('data-bucket', bucket);
+            document.head.appendChild(styleElement);
+            this.bucketElements.set(bucket, styleElement);
+            this.bucketRules.set(bucket, new Set());
+        });
+    }
+    insertRule(cssRule, bucket) {
+        const bucketSet = this.bucketRules.get(bucket);
+        const styleElement = this.bucketElements.get(bucket);
+        if (!bucketSet || !styleElement) {
+            console.warn(`Unknown bucket: ${bucket}`);
+            return;
+        }
+        if (bucketSet.has(cssRule)) {
+            return;
+        }
+        bucketSet.add(cssRule);
+        styleElement.textContent += cssRule + '\n';
+    }
+    getCSSString() {
+        const allRules = [];
+        this.bucketOrder.forEach(bucket => {
+            const styleElement = this.bucketElements.get(bucket);
+            if (styleElement && styleElement.textContent) {
+                allRules.push(styleElement.textContent);
+            }
+        });
+        return allRules.join('');
+    }
+    clear() {
+        this.bucketRules.forEach(set => set.clear());
+        this.bucketElements.forEach(el => {
+            el.textContent = '';
+        });
+    }
+}

package/dist/makeResetStyles.d.ts

@@ -0,0 +1,2 @@
+import { StyleRule } from './types';
+export declare function makeResetStyles(styleDefinition: StyleRule): string;

package/dist/makeResetStyles.js

@@ -0,0 +1,5 @@
+import { getGlobalEngine } from './engine';
+export function makeResetStyles(styleDefinition) {
+    const engine = getGlobalEngine();
+    return engine.createStyle(styleDefinition);
+}

package/dist/makeStyles.d.ts

@@ -0,0 +1,2 @@
+import { StyleSlots } from './types';
+export declare function makeStyles(slots: StyleSlots): () => import("./types").GeneratedClasses;

package/dist/makeStyles.js

@@ -0,0 +1,6 @@
+import { getGlobalEngine } from './engine';
+export function makeStyles(slots) {
+    const engine = getGlobalEngine();
+    const classes = engine.createStyles(slots);
+    return () => classes;
+}

package/dist/mergeClasses.d.ts

@@ -0,0 +1 @@
+export declare function mergeClasses(...classNames: (string | false | null | undefined)[]): string;

package/dist/mergeClasses.js

@@ -0,0 +1,3 @@
+export function mergeClasses(...classNames) {
+    return classNames.filter(Boolean).join(' ');
+}

package/dist/types.d.ts

@@ -0,0 +1,143 @@
+export type CSSValue = string | number;
+export interface CSSProperties {
+    display?: CSSValue;
+    position?: CSSValue;
+    top?: CSSValue;
+    right?: CSSValue;
+    bottom?: CSSValue;
+    left?: CSSValue;
+    width?: CSSValue;
+    height?: CSSValue;
+    minWidth?: CSSValue;
+    minHeight?: CSSValue;
+    maxWidth?: CSSValue;
+    maxHeight?: CSSValue;
+    flex?: CSSValue;
+    flexDirection?: CSSValue;
+    flexWrap?: CSSValue;
+    flexGrow?: CSSValue;
+    flexShrink?: CSSValue;
+    flexBasis?: CSSValue;
+    justifyContent?: CSSValue;
+    alignItems?: CSSValue;
+    alignContent?: CSSValue;
+    alignSelf?: CSSValue;
+    order?: CSSValue;
+    gap?: CSSValue;
+    gridTemplateColumns?: CSSValue;
+    gridTemplateRows?: CSSValue;
+    gridColumn?: CSSValue;
+    gridRow?: CSSValue;
+    margin?: CSSValue;
+    marginTop?: CSSValue;
+    marginRight?: CSSValue;
+    marginBottom?: CSSValue;
+    marginLeft?: CSSValue;
+    padding?: CSSValue;
+    paddingTop?: CSSValue;
+    paddingRight?: CSSValue;
+    paddingBottom?: CSSValue;
+    paddingLeft?: CSSValue;
+    color?: CSSValue;
+    fontSize?: CSSValue;
+    fontWeight?: CSSValue;
+    fontFamily?: CSSValue;
+    lineHeight?: CSSValue;
+    textAlign?: CSSValue;
+    textDecoration?: CSSValue;
+    textTransform?: CSSValue;
+    letterSpacing?: CSSValue;
+    background?: CSSValue;
+    backgroundColor?: CSSValue;
+    backgroundImage?: CSSValue;
+    backgroundSize?: CSSValue;
+    backgroundPosition?: CSSValue;
+    backgroundRepeat?: CSSValue;
+    border?: CSSValue;
+    borderTop?: CSSValue;
+    borderRight?: CSSValue;
+    borderBottom?: CSSValue;
+    borderLeft?: CSSValue;
+    borderWidth?: CSSValue;
+    borderStyle?: CSSValue;
+    borderColor?: CSSValue;
+    borderRadius?: CSSValue;
+    opacity?: CSSValue;
+    boxShadow?: CSSValue;
+    transform?: CSSValue;
+    transition?: CSSValue;
+    animation?: CSSValue;
+    overflow?: CSSValue;
+    overflowX?: CSSValue;
+    overflowY?: CSSValue;
+    cursor?: CSSValue;
+    pointerEvents?: CSSValue;
+    zIndex?: CSSValue;
+    visibility?: CSSValue;
+    content?: CSSValue;
+    [key: string]: CSSValue | undefined;
+}
+export interface CSSPseudos {
+    ':hover'?: CSSProperties;
+    ':focus'?: CSSProperties;
+    ':active'?: CSSProperties;
+    ':disabled'?: CSSProperties;
+    ':visited'?: CSSProperties;
+    ':focus-visible'?: CSSProperties;
+    ':focus-within'?: CSSProperties;
+    '::before'?: CSSProperties;
+    '::after'?: CSSProperties;
+    '::placeholder'?: CSSProperties;
+    [key: string]: CSSProperties | undefined;
+}
+export interface CSSMediaQueries {
+    '@media (min-width: 480px)'?: CSSProperties & CSSPseudos;
+    '@media (min-width: 768px)'?: CSSProperties & CSSPseudos;
+    '@media (min-width: 1024px)'?: CSSProperties & CSSPseudos;
+    '@media (min-width: 1440px)'?: CSSProperties & CSSPseudos;
+    '@media (prefers-color-scheme: dark)'?: CSSProperties & CSSPseudos;
+    '@media (prefers-reduced-motion: reduce)'?: CSSProperties & CSSPseudos;
+    [key: string]: (CSSProperties & CSSPseudos) | undefined;
+}
+export type StyleRule = CSSProperties & CSSPseudos & CSSMediaQueries;
+export type StyleDefinition = StyleRule | (() => StyleRule);
+export declare enum StyleBucket {
+    RESET = "d",
+    DEFAULT = "l",
+    LINK = "v",
+    VISITED = "w",
+    FOCUS_VISIBLE = "f",
+    FOCUS_WITHIN = "i",
+    FOCUS = "o",
+    HOVER = "h",
+    ACTIVE = "a",
+    AT_RULE = "t",
+    KEYFRAME = "k",
+    FALLBACK = "c"
+}
+export interface CSSRule {
+    selector: string;
+    property: string;
+    value: string | number;
+    bucket: StyleBucket;
+    media?: string;
+    support?: string;
+    pseudo?: string;
+}
+export interface GeneratedClasses {
+    [key: string]: string;
+}
+export interface StyleSheet {
+    insertRule(rule: string, bucket: StyleBucket): void;
+    getRules(): string;
+    clearRules(): void;
+}
+export interface StyleEngineConfig {
+    styleSheet?: StyleSheet;
+    prefix?: string;
+    sourceMaps?: boolean;
+}
+export type MakeStylesFunction = () => GeneratedClasses;
+export interface StyleSlots {
+    [slotName: string]: StyleDefinition;
+}

package/dist/types.js

@@ -0,0 +1,15 @@
+export var StyleBucket;
+(function (StyleBucket) {
+    StyleBucket["RESET"] = "d";
+    StyleBucket["DEFAULT"] = "l";
+    StyleBucket["LINK"] = "v";
+    StyleBucket["VISITED"] = "w";
+    StyleBucket["FOCUS_VISIBLE"] = "f";
+    StyleBucket["FOCUS_WITHIN"] = "i";
+    StyleBucket["FOCUS"] = "o";
+    StyleBucket["HOVER"] = "h";
+    StyleBucket["ACTIVE"] = "a";
+    StyleBucket["AT_RULE"] = "t";
+    StyleBucket["KEYFRAME"] = "k";
+    StyleBucket["FALLBACK"] = "c";
+})(StyleBucket || (StyleBucket = {}));

package/dist/utils/bucket.d.ts

@@ -0,0 +1,2 @@
+import { StyleBucket } from '../types';
+export declare function determineBucket(pseudo?: string, media?: string): StyleBucket;

package/dist/utils/bucket.js

@@ -0,0 +1,27 @@
+import { StyleBucket } from '../types';
+export function determineBucket(pseudo, media) {
+    if (media) {
+        return StyleBucket.AT_RULE;
+    }
+    if (pseudo) {
+        switch (pseudo) {
+            case ':link':
+                return StyleBucket.LINK;
+            case ':visited':
+                return StyleBucket.VISITED;
+            case ':focus-visible':
+                return StyleBucket.FOCUS_VISIBLE;
+            case ':focus-within':
+                return StyleBucket.FOCUS_WITHIN;
+            case ':focus':
+                return StyleBucket.FOCUS;
+            case ':hover':
+                return StyleBucket.HOVER;
+            case ':active':
+                return StyleBucket.ACTIVE;
+            default:
+                return StyleBucket.DEFAULT;
+        }
+    }
+    return StyleBucket.DEFAULT;
+}

package/dist/utils/css.d.ts

@@ -0,0 +1,3 @@
+export declare function camelToKebab(str: string): string;
+export declare function isPseudoSelector(key: string): boolean;
+export declare function isMediaQuery(key: string): boolean;

package/dist/utils/css.js

@@ -0,0 +1,9 @@
+export function camelToKebab(str) {
+    return str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`);
+}
+export function isPseudoSelector(key) {
+    return key.startsWith(':') || key.startsWith('::');
+}
+export function isMediaQuery(key) {
+    return key.startsWith('@media');
+}

package/dist/utils/hash.d.ts

@@ -0,0 +1,2 @@
+export declare function hashString(input: string): string;
+export declare function createClassName(hashInput: string): string;

package/dist/utils/hash.js

@@ -0,0 +1,10 @@
+export function hashString(input) {
+    let hash = 5381;
+    for (let i = 0; i < input.length; i++) {
+        hash = (hash * 33) ^ input.charCodeAt(i);
+    }
+    return (hash >>> 0).toString(36);
+}
+export function createClassName(hashInput) {
+    return `f${hashString(hashInput)}`;
+}

package/dist/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { hashString } from './hash';
+export { camelToKebab, isPseudoSelector, isMediaQuery } from './css';
+export { determineBucket } from './bucket';

package/dist/utils/index.js

@@ -0,0 +1,3 @@
+export { hashString } from './hash';
+export { camelToKebab, isPseudoSelector, isMediaQuery } from './css';
+export { determineBucket } from './bucket';

package/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "css-engine-test-pb",
+  "version": "0.0.1",
+  "description": "",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  },
+  "files": [
+    "dist"
+  ]
+}