css-engine-test-pb 0.1.4 → 0.1.6

package/dist/compiler.d.ts

@@ -11,9 +11,11 @@ export declare class StyleCompiler {
     private compileMonolithic;
     private buildCSSBlock;
     private buildMonolithicPseudos;
+    private buildMonolithicCombinators;
     private buildMonolithicMedia;
     private processProperties;
     private processPseudos;
+    private processCombinators;
     private processMediaQueries;
 }
 export {};

package/dist/compiler.js

@@ -1,6 +1,6 @@
 import { StyleBucket } from './types';
 import { createClassName, hashString } from './utils/hash';
-import { camelToKebab, isPseudoSelector, isMediaQuery, determineBucket } from './utils';
+import { camelToKebab, isPseudoSelector, isMediaQuery, isCombinator, determineBucket } from './utils';
 export class StyleCompiler {
     compile(styleDefinition, mode = 'atomic') {
         if (mode === 'monolithic') {
@@ -12,6 +12,7 @@ export class StyleCompiler {
         const rules = [];
         this.processProperties(styleDefinition, rules);
         this.processPseudos(styleDefinition, rules);
+        this.processCombinators(styleDefinition, rules);
         this.processMediaQueries(styleDefinition, rules);
         return rules;
     }
@@ -24,6 +25,7 @@ export class StyleCompiler {
             cssText += `.${className} { ${mainStyles} }\n`;
         }
         cssText += this.buildMonolithicPseudos(styleDefinition, className);
+        cssText += this.buildMonolithicCombinators(styleDefinition, className);
         cssText += this.buildMonolithicMedia(styleDefinition, className);
         return [{
                 className,
@@ -34,7 +36,7 @@ export class StyleCompiler {
     buildCSSBlock(styles) {
         let css = '';
         for (const [property, value] of Object.entries(styles)) {
-            if (isPseudoSelector(property) || isMediaQuery(property)) {
+            if (isPseudoSelector(property) || isMediaQuery(property) || isCombinator(property)) {
                 continue;
             }
             if (value === undefined || value === null) {
@@ -66,6 +68,19 @@ export class StyleCompiler {
         }
         return css;
     }
+    buildMonolithicCombinators(styleDefinition, className) {
+        let css = '';
+        for (const [key, value] of Object.entries(styleDefinition)) {
+            if (isCombinator(key) && value) {
+                const combinatorStyles = this.buildCSSBlock(value);
+                if (combinatorStyles) {
+                    const selector = key.replace('&', `.${className}`);
+                    css += `${selector} { ${combinatorStyles} }\n`;
+                }
+            }
+        }
+        return css;
+    }
     buildMonolithicMedia(styleDefinition, className) {
         let css = '';
         for (const [key, value] of Object.entries(styleDefinition)) {
@@ -92,6 +107,13 @@ export class StyleCompiler {
                             }
                         }
                     }
+                    else if (isCombinator(nestedKey) && nestedValue) {
+                        const combinatorStyles = this.buildCSSBlock(nestedValue);
+                        if (combinatorStyles) {
+                            const selector = nestedKey.replace('&', `.${className}`);
+                            mediaCss += `${selector} { ${combinatorStyles} }\n`;
+                        }
+                    }
                 }
                 if (mediaCss) {
                     css += `${key} {\n${mediaCss}}\n`;
@@ -102,7 +124,7 @@ export class StyleCompiler {
     }
     processProperties(styles, rules, pseudo, media) {
         Object.entries(styles).forEach(([property, value]) => {
-            if (isPseudoSelector(property) || isMediaQuery(property)) {
+            if (isPseudoSelector(property) || isMediaQuery(property) || isCombinator(property)) {
                 return;
             }
             if (value === undefined || value === null) {
@@ -112,7 +134,11 @@ export class StyleCompiler {
             const hashInput = `${kebabProperty}:${value}${pseudo || ''}${media || ''}`;
             const className = createClassName(hashInput);
             let selector;
-            if (pseudo && pseudo.includes(',')) {
+            if (pseudo && pseudo.startsWith('& ')) {
+                // It's a combinator - replace & with class
+                selector = pseudo.replace('&', `.${className}`);
+            }
+            else if (pseudo && pseudo.includes(',')) {
                 const selectors = pseudo
                     .split(',')
                     .map(s => `.${className}${s.trim()}`)
@@ -142,6 +168,13 @@ export class StyleCompiler {
             }
         });
     }
+    processCombinators(styleDefinition, rules) {
+        Object.entries(styleDefinition).forEach(([key, value]) => {
+            if (isCombinator(key) && value) {
+                this.processProperties(value, rules, key);
+            }
+        });
+    }
     processMediaQueries(styleDefinition, rules) {
         Object.entries(styleDefinition).forEach(([key, value]) => {
             if (isMediaQuery(key) && value) {
@@ -151,6 +184,9 @@ export class StyleCompiler {
                     if (isPseudoSelector(nestedKey) && nestedValue) {
                         this.processProperties(nestedValue, rules, nestedKey, key);
                     }
+                    else if (isCombinator(nestedKey) && nestedValue) {
+                        this.processProperties(nestedValue, rules, nestedKey, key);
+                    }
                 });
             }
         });

package/dist/index.d.ts

@@ -1,9 +1,32 @@
-import { borderColor } from './shorthands';
+import { border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderStyle, borderWidth, borderRadius, flex, gap, gridArea, inset, margin, marginBlock, marginInline, outline, overflow, padding, paddingBlock, paddingInline, textDecoration, transition } from './shorthands';
 export declare const shorthands: {
+    border: typeof border;
+    borderTop: typeof borderTop;
+    borderRight: typeof borderRight;
+    borderBottom: typeof borderBottom;
+    borderLeft: typeof borderLeft;
     borderColor: typeof borderColor;
+    borderStyle: typeof borderStyle;
+    borderWidth: typeof borderWidth;
+    borderRadius: typeof borderRadius;
+    flex: typeof flex;
+    gap: typeof gap;
+    gridArea: typeof gridArea;
+    inset: typeof inset;
+    margin: typeof margin;
+    marginBlock: typeof marginBlock;
+    marginInline: typeof marginInline;
+    outline: typeof outline;
+    overflow: typeof overflow;
+    padding: typeof padding;
+    paddingBlock: typeof paddingBlock;
+    paddingInline: typeof paddingInline;
+    textDecoration: typeof textDecoration;
+    transition: typeof transition;
 };
 export { makeStyles } from './makeStyles';
 export { makeResetStyles } from './makeResetStyles';
 export { mergeClasses } from './mergeClasses';
 export { makeStaticStyles } from './makeStaticStyles';
-export type { StyleRule, CSSProperties, GeneratedClasses, StyleSlots } from './types';
+export { makeFontFace } from './makeFontFace';
+export type { StyleRule, CSSProperties, GeneratedClasses, StyleSlots, FontFaceDefinition } from './types';

package/dist/index.js

@@ -1,8 +1,31 @@
-import { borderColor } from './shorthands';
+import { border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderStyle, borderWidth, borderRadius, flex, gap, gridArea, inset, margin, marginBlock, marginInline, outline, overflow, padding, paddingBlock, paddingInline, textDecoration, transition, } from './shorthands';
 export const shorthands = {
-    borderColor
+    border,
+    borderTop,
+    borderRight,
+    borderBottom,
+    borderLeft,
+    borderColor,
+    borderStyle,
+    borderWidth,
+    borderRadius,
+    flex,
+    gap,
+    gridArea,
+    inset,
+    margin,
+    marginBlock,
+    marginInline,
+    outline,
+    overflow,
+    padding,
+    paddingBlock,
+    paddingInline,
+    textDecoration,
+    transition,
 };
 export { makeStyles } from './makeStyles';
 export { makeResetStyles } from './makeResetStyles';
 export { mergeClasses } from './mergeClasses';
 export { makeStaticStyles } from './makeStaticStyles';
+export { makeFontFace } from './makeFontFace';

package/dist/makeFontFace.d.ts

@@ -0,0 +1,2 @@
+import type { FontFaceDefinition } from './types';
+export declare function makeFontFace(fonts: FontFaceDefinition | FontFaceDefinition[]): () => void;

package/dist/makeFontFace.js

@@ -0,0 +1,70 @@
+import { getGlobalEngine } from './engine';
+import { StyleBucket } from './types';
+export function makeFontFace(fonts) {
+    const engine = getGlobalEngine();
+    const fontsArray = Array.isArray(fonts) ? fonts : [fonts];
+    let inserted = false;
+    return function useFontFace() {
+        if (inserted) {
+            return;
+        }
+        fontsArray.forEach(font => {
+            const properties = [];
+            // Required properties
+            properties.push(`font-family: ${quoteIfNeeded(font.fontFamily)}`);
+            properties.push(`src: ${font.src}`);
+            // Optional properties
+            if (font.fontWeight !== undefined) {
+                properties.push(`font-weight: ${font.fontWeight}`);
+            }
+            if (font.fontStyle !== undefined) {
+                properties.push(`font-style: ${font.fontStyle}`);
+            }
+            if (font.fontDisplay !== undefined) {
+                properties.push(`font-display: ${font.fontDisplay}`);
+            }
+            if (font.unicodeRange !== undefined) {
+                properties.push(`unicode-range: ${font.unicodeRange}`);
+            }
+            if (font.fontStretch !== undefined) {
+                properties.push(`font-stretch: ${font.fontStretch}`);
+            }
+            if (font.fontVariant !== undefined) {
+                properties.push(`font-variant: ${font.fontVariant}`);
+            }
+            if (font.fontFeatureSettings !== undefined) {
+                properties.push(`font-feature-settings: ${font.fontFeatureSettings}`);
+            }
+            if (font.fontVariationSettings !== undefined) {
+                properties.push(`font-variation-settings: ${font.fontVariationSettings}`);
+            }
+            if (font.ascentOverride !== undefined) {
+                properties.push(`ascent-override: ${font.ascentOverride}`);
+            }
+            if (font.descentOverride !== undefined) {
+                properties.push(`descent-override: ${font.descentOverride}`);
+            }
+            if (font.lineGapOverride !== undefined) {
+                properties.push(`line-gap-override: ${font.lineGapOverride}`);
+            }
+            const cssRule = `@font-face { ${properties.join('; ')}; }`;
+            engine['insertion'].insertRule(cssRule, StyleBucket.RESET);
+        });
+        inserted = true;
+    };
+}
+function quoteIfNeeded(fontFamily) {
+    // If already quoted or is a generic family, return as-is
+    if (fontFamily.startsWith('"') || fontFamily.startsWith("'")) {
+        return fontFamily;
+    }
+    const genericFamilies = ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui'];
+    if (genericFamilies.includes(fontFamily.toLowerCase())) {
+        return fontFamily;
+    }
+    // Quote font family names with spaces or special characters
+    if (/[\s\-]/.test(fontFamily)) {
+        return `"${fontFamily}"`;
+    }
+    return fontFamily;
+}

package/dist/makeStaticStyles.js

@@ -10,16 +10,49 @@ export function makeStaticStyles(styles) {
         }
         stylesArray.forEach(styleBlock => {
             Object.entries(styleBlock).forEach(([selector, properties]) => {
+                const isFontFace = selector === '@font-face';
                 const cssProperties = Object.entries(properties)
                     .map(([prop, value]) => {
                     const kebabProp = prop.replace(/[A-Z]/g, m => `-${m.toLowerCase()}`);
-                    return `${kebabProp}: ${value};`;
+                    let cssValue = String(value);
+                    // Quote font-family values that contain spaces and aren't already quoted
+                    if (kebabProp === 'font-family' && typeof value === 'string') {
+                        cssValue = quoteFontFamily(value);
+                    }
+                    return `${kebabProp}: ${cssValue};`;
                 })
                     .join(' ');
-                const cssRule = `${selector} { ${cssProperties} }`;
+                let cssRule;
+                if (isFontFace) {
+                    cssRule = `@font-face { ${cssProperties} }`;
+                }
+                else {
+                    cssRule = `${selector} { ${cssProperties} }`;
+                }
                 engine['insertion'].insertRule(cssRule, StyleBucket.RESET);
             });
         });
         inserted = true;
     };
 }
+function quoteFontFamily(value) {
+    // Handle comma-separated font stacks
+    return value.split(',').map(font => {
+        font = font.trim();
+        // Already quoted
+        if ((font.startsWith('"') && font.endsWith('"')) ||
+            (font.startsWith("'") && font.endsWith("'"))) {
+            return font;
+        }
+        // Generic families don't need quotes
+        const genericFamilies = ['serif', 'sans-serif', 'monospace', 'cursive', 'fantasy', 'system-ui', 'ui-serif', 'ui-sans-serif', 'ui-monospace', 'ui-rounded', 'inherit', 'initial', 'unset'];
+        if (genericFamilies.includes(font.toLowerCase())) {
+            return font;
+        }
+        // Quote if contains spaces or special characters
+        if (/[\s\-()]/.test(font)) {
+            return `"${font}"`;
+        }
+        return font;
+    }).join(', ');
+}

package/dist/shorthands/border.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function border(width: CSSValue, style?: CSSValue, color?: CSSValue): CSSProperties;

package/dist/shorthands/border.js

@@ -0,0 +1,32 @@
+import { borderWidth } from './borderWidth';
+import { borderStyle } from './borderStyle';
+import { borderColor } from './borderColor';
+const BORDER_STYLES = ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'];
+function isBorderStyleValue(value) {
+    return typeof value === 'string' && BORDER_STYLES.includes(value);
+}
+export function border(width, style, color) {
+    if (style === undefined && color === undefined) {
+        if (isBorderStyleValue(width)) {
+            return borderStyle(width);
+        }
+        return borderWidth(width);
+    }
+    if (color === undefined) {
+        if (isBorderStyleValue(width)) {
+            return {
+                ...borderStyle(width),
+                ...borderColor(style),
+            };
+        }
+        return {
+            ...borderWidth(width),
+            ...borderStyle(style),
+        };
+    }
+    return {
+        ...borderWidth(width),
+        ...borderStyle(style),
+        ...borderColor(color),
+    };
+}

package/dist/shorthands/borderBottom.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function borderBottom(width: CSSValue, style?: CSSValue, color?: CSSValue): CSSProperties;

package/dist/shorthands/borderBottom.js

@@ -0,0 +1,29 @@
+const BORDER_STYLES = ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'];
+function isBorderStyle(value) {
+    return typeof value === 'string' && BORDER_STYLES.includes(value);
+}
+export function borderBottom(width, style, color) {
+    if (style === undefined && color === undefined) {
+        if (isBorderStyle(width)) {
+            return { borderBottomStyle: width };
+        }
+        return { borderBottomWidth: width };
+    }
+    if (color === undefined) {
+        if (isBorderStyle(width)) {
+            return {
+                borderBottomStyle: width,
+                borderBottomColor: style,
+            };
+        }
+        return {
+            borderBottomWidth: width,
+            borderBottomStyle: style,
+        };
+    }
+    return {
+        borderBottomWidth: width,
+        borderBottomStyle: style,
+        borderBottomColor: color,
+    };
+}

package/dist/shorthands/borderLeft.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function borderLeft(width: CSSValue, style?: CSSValue, color?: CSSValue): CSSProperties;

package/dist/shorthands/borderLeft.js

@@ -0,0 +1,29 @@
+const BORDER_STYLES = ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'];
+function isBorderStyle(value) {
+    return typeof value === 'string' && BORDER_STYLES.includes(value);
+}
+export function borderLeft(width, style, color) {
+    if (style === undefined && color === undefined) {
+        if (isBorderStyle(width)) {
+            return { borderLeftStyle: width };
+        }
+        return { borderLeftWidth: width };
+    }
+    if (color === undefined) {
+        if (isBorderStyle(width)) {
+            return {
+                borderLeftStyle: width,
+                borderLeftColor: style,
+            };
+        }
+        return {
+            borderLeftWidth: width,
+            borderLeftStyle: style,
+        };
+    }
+    return {
+        borderLeftWidth: width,
+        borderLeftStyle: style,
+        borderLeftColor: color,
+    };
+}

package/dist/shorthands/borderRadius.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function borderRadius(topLeft: CSSValue, topRight?: CSSValue, bottomRight?: CSSValue, bottomLeft?: CSSValue): CSSProperties;

package/dist/shorthands/borderRadius.js

@@ -0,0 +1,8 @@
+export function borderRadius(topLeft, topRight = topLeft, bottomRight = topLeft, bottomLeft = topRight) {
+    return {
+        borderTopLeftRadius: topLeft,
+        borderTopRightRadius: topRight,
+        borderBottomRightRadius: bottomRight,
+        borderBottomLeftRadius: bottomLeft,
+    };
+}

package/dist/shorthands/borderRight.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function borderRight(width: CSSValue, style?: CSSValue, color?: CSSValue): CSSProperties;

package/dist/shorthands/borderRight.js

@@ -0,0 +1,29 @@
+const BORDER_STYLES = ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'];
+function isBorderStyle(value) {
+    return typeof value === 'string' && BORDER_STYLES.includes(value);
+}
+export function borderRight(width, style, color) {
+    if (style === undefined && color === undefined) {
+        if (isBorderStyle(width)) {
+            return { borderRightStyle: width };
+        }
+        return { borderRightWidth: width };
+    }
+    if (color === undefined) {
+        if (isBorderStyle(width)) {
+            return {
+                borderRightStyle: width,
+                borderRightColor: style,
+            };
+        }
+        return {
+            borderRightWidth: width,
+            borderRightStyle: style,
+        };
+    }
+    return {
+        borderRightWidth: width,
+        borderRightStyle: style,
+        borderRightColor: color,
+    };
+}

package/dist/shorthands/borderStyle.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function borderStyle(top: CSSValue, right?: CSSValue, bottom?: CSSValue, left?: CSSValue): CSSProperties;

package/dist/shorthands/borderStyle.js

@@ -0,0 +1,8 @@
+export function borderStyle(top, right = top, bottom = top, left = right) {
+    return {
+        borderTopStyle: top,
+        borderRightStyle: right,
+        borderBottomStyle: bottom,
+        borderLeftStyle: left,
+    };
+}

package/dist/shorthands/borderTop.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function borderTop(width: CSSValue, style?: CSSValue, color?: CSSValue): CSSProperties;

package/dist/shorthands/borderTop.js

@@ -0,0 +1,29 @@
+const BORDER_STYLES = ['dashed', 'dotted', 'double', 'groove', 'hidden', 'inset', 'none', 'outset', 'ridge', 'solid'];
+function isBorderStyle(value) {
+    return typeof value === 'string' && BORDER_STYLES.includes(value);
+}
+export function borderTop(width, style, color) {
+    if (style === undefined && color === undefined) {
+        if (isBorderStyle(width)) {
+            return { borderTopStyle: width };
+        }
+        return { borderTopWidth: width };
+    }
+    if (color === undefined) {
+        if (isBorderStyle(width)) {
+            return {
+                borderTopStyle: width,
+                borderTopColor: style,
+            };
+        }
+        return {
+            borderTopWidth: width,
+            borderTopStyle: style,
+        };
+    }
+    return {
+        borderTopWidth: width,
+        borderTopStyle: style,
+        borderTopColor: color,
+    };
+}

package/dist/shorthands/borderWidth.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function borderWidth(top: CSSValue, right?: CSSValue, bottom?: CSSValue, left?: CSSValue): CSSProperties;

package/dist/shorthands/borderWidth.js

@@ -0,0 +1,8 @@
+export function borderWidth(top, right = top, bottom = top, left = right) {
+    return {
+        borderTopWidth: top,
+        borderRightWidth: right,
+        borderBottomWidth: bottom,
+        borderLeftWidth: left,
+    };
+}

package/dist/shorthands/flex.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function flex(grow: CSSValue, shrinkOrBasis?: CSSValue, basis?: CSSValue): CSSProperties;

package/dist/shorthands/flex.js

@@ -0,0 +1,49 @@
+const WIDTH_KEYWORDS = ['max-content', 'min-content', 'fit-content', 'content'];
+function isUnitless(value) {
+    return typeof value === 'number' || (typeof value === 'string' && /^[0-9.]+$/.test(value));
+}
+function isWidth(value) {
+    if (typeof value === 'number')
+        return false;
+    if (typeof value === 'string') {
+        if (WIDTH_KEYWORDS.includes(value))
+            return true;
+        if (/^[0-9.]+(%|px|em|rem|vh|vw|ch|ex|cm|mm|in|pt|pc|vmin|vmax)$/.test(value))
+            return true;
+    }
+    return false;
+}
+export function flex(grow, shrinkOrBasis, basis) {
+    // Single value
+    if (shrinkOrBasis === undefined && basis === undefined) {
+        if (grow === 'initial') {
+            return { flexGrow: 0, flexShrink: 1, flexBasis: 'auto' };
+        }
+        if (grow === 'auto') {
+            return { flexGrow: 1, flexShrink: 1, flexBasis: 'auto' };
+        }
+        if (grow === 'none') {
+            return { flexGrow: 0, flexShrink: 0, flexBasis: 'auto' };
+        }
+        if (isUnitless(grow)) {
+            return { flexGrow: grow, flexShrink: 1, flexBasis: 0 };
+        }
+        if (isWidth(grow)) {
+            return { flexGrow: 1, flexShrink: 1, flexBasis: grow };
+        }
+        return { flexGrow: grow };
+    }
+    // Two values
+    if (basis === undefined) {
+        if (isUnitless(shrinkOrBasis)) {
+            return { flexGrow: grow, flexShrink: shrinkOrBasis };
+        }
+        return { flexGrow: grow, flexShrink: 1, flexBasis: shrinkOrBasis };
+    }
+    // Three values
+    return {
+        flexGrow: grow,
+        flexShrink: shrinkOrBasis,
+        flexBasis: basis,
+    };
+}

package/dist/shorthands/gap.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function gap(columnGap: CSSValue, rowGap?: CSSValue): CSSProperties;

package/dist/shorthands/gap.js

@@ -0,0 +1,6 @@
+export function gap(columnGap, rowGap = columnGap) {
+    return {
+        columnGap,
+        rowGap,
+    };
+}

package/dist/shorthands/gridArea.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function gridArea(rowStart: CSSValue, columnStart?: CSSValue, rowEnd?: CSSValue, columnEnd?: CSSValue): CSSProperties;

package/dist/shorthands/gridArea.js

@@ -0,0 +1,8 @@
+export function gridArea(rowStart, columnStart, rowEnd, columnEnd) {
+    return {
+        gridRowStart: rowStart,
+        gridColumnStart: columnStart ?? rowStart,
+        gridRowEnd: rowEnd ?? rowStart,
+        gridColumnEnd: columnEnd ?? (columnStart ?? rowStart),
+    };
+}

package/dist/shorthands/index.d.ts

@@ -1 +1,23 @@
+export { border } from './border';
+export { borderTop } from './borderTop';
+export { borderRight } from './borderRight';
+export { borderBottom } from './borderBottom';
+export { borderLeft } from './borderLeft';
 export { borderColor } from './borderColor';
+export { borderStyle } from './borderStyle';
+export { borderWidth } from './borderWidth';
+export { borderRadius } from './borderRadius';
+export { flex } from './flex';
+export { gap } from './gap';
+export { gridArea } from './gridArea';
+export { inset } from './inset';
+export { margin } from './margin';
+export { marginBlock } from './marginBlock';
+export { marginInline } from './marginInline';
+export { outline } from './outline';
+export { overflow } from './overflow';
+export { padding } from './padding';
+export { paddingBlock } from './paddingBlock';
+export { paddingInline } from './paddingInline';
+export { textDecoration } from './textDecoration';
+export { transition } from './transition';

package/dist/shorthands/index.js

@@ -1 +1,23 @@
+export { border } from './border';
+export { borderTop } from './borderTop';
+export { borderRight } from './borderRight';
+export { borderBottom } from './borderBottom';
+export { borderLeft } from './borderLeft';
 export { borderColor } from './borderColor';
+export { borderStyle } from './borderStyle';
+export { borderWidth } from './borderWidth';
+export { borderRadius } from './borderRadius';
+export { flex } from './flex';
+export { gap } from './gap';
+export { gridArea } from './gridArea';
+export { inset } from './inset';
+export { margin } from './margin';
+export { marginBlock } from './marginBlock';
+export { marginInline } from './marginInline';
+export { outline } from './outline';
+export { overflow } from './overflow';
+export { padding } from './padding';
+export { paddingBlock } from './paddingBlock';
+export { paddingInline } from './paddingInline';
+export { textDecoration } from './textDecoration';
+export { transition } from './transition';

package/dist/shorthands/inset.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function inset(top: CSSValue, right?: CSSValue, bottom?: CSSValue, left?: CSSValue): CSSProperties;

package/dist/shorthands/inset.js

@@ -0,0 +1,8 @@
+export function inset(top, right = top, bottom = top, left = right) {
+    return {
+        top,
+        right,
+        bottom,
+        left,
+    };
+}

package/dist/shorthands/margin.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function margin(top: CSSValue, right?: CSSValue, bottom?: CSSValue, left?: CSSValue): CSSProperties;

package/dist/shorthands/margin.js

@@ -0,0 +1,8 @@
+export function margin(top, right = top, bottom = top, left = right) {
+    return {
+        marginTop: top,
+        marginRight: right,
+        marginBottom: bottom,
+        marginLeft: left,
+    };
+}

package/dist/shorthands/marginBlock.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function marginBlock(start: CSSValue, end?: CSSValue): CSSProperties;

package/dist/shorthands/marginBlock.js

@@ -0,0 +1,6 @@
+export function marginBlock(start, end = start) {
+    return {
+        marginBlockStart: start,
+        marginBlockEnd: end,
+    };
+}

package/dist/shorthands/marginInline.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function marginInline(start: CSSValue, end?: CSSValue): CSSProperties;

package/dist/shorthands/marginInline.js

@@ -0,0 +1,6 @@
+export function marginInline(start, end = start) {
+    return {
+        marginInlineStart: start,
+        marginInlineEnd: end,
+    };
+}

package/dist/shorthands/outline.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function outline(outlineWidth: CSSValue, outlineStyle?: CSSValue, outlineColor?: CSSValue): CSSProperties;

package/dist/shorthands/outline.js

@@ -0,0 +1,7 @@
+export function outline(outlineWidth, outlineStyle, outlineColor) {
+    return {
+        outlineWidth,
+        ...(outlineStyle !== undefined && { outlineStyle }),
+        ...(outlineColor !== undefined && { outlineColor }),
+    };
+}

package/dist/shorthands/overflow.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function overflow(overflowX: CSSValue, overflowY?: CSSValue): CSSProperties;

package/dist/shorthands/overflow.js

@@ -0,0 +1,6 @@
+export function overflow(overflowX, overflowY = overflowX) {
+    return {
+        overflowX,
+        overflowY,
+    };
+}

package/dist/shorthands/padding.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function padding(top: CSSValue, right?: CSSValue, bottom?: CSSValue, left?: CSSValue): CSSProperties;

package/dist/shorthands/padding.js

@@ -0,0 +1,8 @@
+export function padding(top, right = top, bottom = top, left = right) {
+    return {
+        paddingTop: top,
+        paddingRight: right,
+        paddingBottom: bottom,
+        paddingLeft: left,
+    };
+}

package/dist/shorthands/paddingBlock.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function paddingBlock(start: CSSValue, end?: CSSValue): CSSProperties;

package/dist/shorthands/paddingBlock.js

@@ -0,0 +1,6 @@
+export function paddingBlock(start, end = start) {
+    return {
+        paddingBlockStart: start,
+        paddingBlockEnd: end,
+    };
+}

package/dist/shorthands/paddingInline.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function paddingInline(start: CSSValue, end?: CSSValue): CSSProperties;

package/dist/shorthands/paddingInline.js

@@ -0,0 +1,6 @@
+export function paddingInline(start, end = start) {
+    return {
+        paddingInlineStart: start,
+        paddingInlineEnd: end,
+    };
+}

package/dist/shorthands/textDecoration.d.ts

@@ -0,0 +1,2 @@
+import { CSSValue, CSSProperties } from '../types';
+export declare function textDecoration(line: CSSValue, style?: CSSValue, color?: CSSValue, thickness?: CSSValue): CSSProperties;

package/dist/shorthands/textDecoration.js

@@ -0,0 +1,23 @@
+const TEXT_DECORATION_STYLES = ['dashed', 'dotted', 'double', 'solid', 'wavy'];
+function isTextDecorationStyle(value) {
+    return typeof value === 'string' && TEXT_DECORATION_STYLES.includes(value);
+}
+export function textDecoration(line, style, color, thickness) {
+    // Handle case where first arg is a style (for backward compat)
+    if (style === undefined && isTextDecorationStyle(line)) {
+        return { textDecorationStyle: line };
+    }
+    const result = {
+        textDecorationLine: line,
+    };
+    if (style !== undefined) {
+        result.textDecorationStyle = style;
+    }
+    if (color !== undefined) {
+        result.textDecorationColor = color;
+    }
+    if (thickness !== undefined) {
+        result.textDecorationThickness = thickness;
+    }
+    return result;
+}

package/dist/shorthands/transition.d.ts

@@ -0,0 +1,4 @@
+import { CSSValue, CSSProperties } from '../types';
+type TransitionInput = [CSSValue, CSSValue?, CSSValue?, CSSValue?];
+export declare function transition(...args: TransitionInput[] | [CSSValue]): CSSProperties;
+export {};

package/dist/shorthands/transition.js

@@ -0,0 +1,37 @@
+const GLOBAL_VALUES = ['inherit', 'initial', 'revert', 'revert-layer', 'unset'];
+function isGlobalValue(value) {
+    return typeof value === 'string' && GLOBAL_VALUES.includes(value);
+}
+export function transition(...args) {
+    // Handle global values
+    if (args.length === 1 && !Array.isArray(args[0]) && isGlobalValue(args[0])) {
+        const value = args[0];
+        return {
+            transitionProperty: value,
+            transitionDuration: value,
+            transitionDelay: value,
+            transitionTimingFunction: value,
+        };
+    }
+    // Normalize inputs
+    const transitions = Array.isArray(args[0])
+        ? args
+        : [args];
+    const properties = [];
+    const durations = [];
+    const delays = [];
+    const timings = [];
+    for (const t of transitions) {
+        const [property, duration = '0s', delay = '0s', timing = 'ease'] = t;
+        properties.push(property);
+        durations.push(duration);
+        delays.push(delay);
+        timings.push(timing);
+    }
+    return {
+        transitionProperty: properties.join(', '),
+        transitionDuration: durations.join(', '),
+        transitionDelay: delays.join(', '),
+        transitionTimingFunction: timings.join(', '),
+    };
+}

package/dist/types.d.ts

@@ -30,16 +30,36 @@ export interface CSSProperties {
     gridTemplateRows?: CSSValue;
     gridColumn?: CSSValue;
     gridRow?: CSSValue;
+    gridArea?: CSSValue;
+    gridRowStart?: CSSValue;
+    gridRowEnd?: CSSValue;
+    gridColumnStart?: CSSValue;
+    gridColumnEnd?: CSSValue;
+    columnGap?: CSSValue;
+    rowGap?: CSSValue;
     margin?: CSSValue;
     marginTop?: CSSValue;
     marginRight?: CSSValue;
     marginBottom?: CSSValue;
     marginLeft?: CSSValue;
+    marginBlock?: CSSValue;
+    marginBlockStart?: CSSValue;
+    marginBlockEnd?: CSSValue;
+    marginInline?: CSSValue;
+    marginInlineStart?: CSSValue;
+    marginInlineEnd?: CSSValue;
     padding?: CSSValue;
     paddingTop?: CSSValue;
     paddingRight?: CSSValue;
     paddingBottom?: CSSValue;
     paddingLeft?: CSSValue;
+    paddingBlock?: CSSValue;
+    paddingBlockStart?: CSSValue;
+    paddingBlockEnd?: CSSValue;
+    paddingInline?: CSSValue;
+    paddingInlineStart?: CSSValue;
+    paddingInlineEnd?: CSSValue;
+    inset?: CSSValue;
     color?: CSSValue;
     fontSize?: CSSValue;
     fontWeight?: CSSValue;
@@ -48,6 +68,9 @@ export interface CSSProperties {
     textAlign?: CSSValue;
     textDecoration?: CSSValue;
     textDecorationLine?: CSSValue;
+    textDecorationStyle?: CSSValue;
+    textDecorationColor?: CSSValue;
+    textDecorationThickness?: CSSValue;
     textTransform?: CSSValue;
     letterSpacing?: CSSValue;
     background?: CSSValue;
@@ -69,8 +92,23 @@ export interface CSSProperties {
     borderRightColor?: CSSValue;
     borderBottomColor?: CSSValue;
     borderLeftColor?: CSSValue;
+    borderTopWidth?: CSSValue;
+    borderRightWidth?: CSSValue;
+    borderBottomWidth?: CSSValue;
+    borderLeftWidth?: CSSValue;
+    borderTopStyle?: CSSValue;
+    borderRightStyle?: CSSValue;
+    borderBottomStyle?: CSSValue;
+    borderLeftStyle?: CSSValue;
+    borderTopLeftRadius?: CSSValue;
+    borderTopRightRadius?: CSSValue;
+    borderBottomRightRadius?: CSSValue;
+    borderBottomLeftRadius?: CSSValue;
     opacity?: CSSValue;
+    outline?: CSSValue;
+    outlineWidth?: CSSValue;
     outlineStyle?: CSSValue;
+    outlineColor?: CSSValue;
     boxShadow?: CSSValue;
     transform?: CSSValue;
     transition?: CSSValue;
@@ -117,15 +155,23 @@ export interface CSSPseudos {
     [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: `@media ${string}`]: (CSSProperties & CSSPseudos) | undefined;
+    '@media (min-width: 480px)'?: CSSProperties & CSSPseudos & CSSCombinators;
+    '@media (min-width: 768px)'?: CSSProperties & CSSPseudos & CSSCombinators;
+    '@media (min-width: 1024px)'?: CSSProperties & CSSPseudos & CSSCombinators;
+    '@media (min-width: 1440px)'?: CSSProperties & CSSPseudos & CSSCombinators;
+    '@media (prefers-color-scheme: dark)'?: CSSProperties & CSSPseudos & CSSCombinators;
+    '@media (prefers-reduced-motion: reduce)'?: CSSProperties & CSSPseudos & CSSCombinators;
+    [key: `@media ${string}`]: (CSSProperties & CSSPseudos & CSSCombinators) | undefined;
 }
-export type StyleRule = CSSProperties & CSSPseudos & CSSMediaQueries;
+export interface CSSCombinators {
+    '& > *'?: CSSProperties;
+    '& > *:first-child'?: CSSProperties;
+    '& > *:last-child'?: CSSProperties;
+    '& + *'?: CSSProperties;
+    '& ~ *'?: CSSProperties;
+    [key: `& ${string}`]: CSSProperties | undefined;
+}
+export type StyleRule = CSSProperties & CSSPseudos & CSSMediaQueries & CSSCombinators;
 export type StyleDefinition = StyleRule | (() => StyleRule);
 export declare enum StyleBucket {
     RESET = "d",
@@ -167,3 +213,18 @@ export type MakeStylesFunction = () => GeneratedClasses;
 export interface StyleSlots {
     [slotName: string]: StyleDefinition;
 }
+export interface FontFaceDefinition {
+    fontFamily: string;
+    src: string;
+    fontWeight?: CSSValue;
+    fontStyle?: 'normal' | 'italic' | 'oblique' | string;
+    fontDisplay?: 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+    unicodeRange?: string;
+    fontStretch?: CSSValue;
+    fontVariant?: CSSValue;
+    fontFeatureSettings?: string;
+    fontVariationSettings?: string;
+    ascentOverride?: string;
+    descentOverride?: string;
+    lineGapOverride?: string;
+}

package/dist/utils/css.d.ts

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

package/dist/utils/css.js

@@ -7,3 +7,6 @@ export function isPseudoSelector(key) {
 export function isMediaQuery(key) {
     return key.startsWith('@media');
 }
+export function isCombinator(key) {
+    return key.startsWith('& ');
+}

package/dist/utils/index.d.ts

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

package/dist/utils/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-engine-test-pb",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",