css-engine-test-pb 0.1.5 → 0.1.7

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,6 +1,28 @@
-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';

package/dist/index.js

@@ -1,6 +1,28 @@
-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';

package/dist/makeStaticStyles.js

@@ -10,15 +10,20 @@ 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(' ');
                 let cssRule;
-                // Handle @font-face specially - it's an at-rule, not a selector
-                if (selector === '@font-face') {
+                if (isFontFace) {
                     cssRule = `@font-face { ${cssProperties} }`;
                 }
                 else {
@@ -30,3 +35,24 @@ export function makeStaticStyles(styles) {
         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/makeStyles.d.ts

@@ -1,2 +1,4 @@
 import { StyleSlots } from './types';
-export declare function makeStyles(slots: StyleSlots): () => Record<string, string>;
+export declare function makeStyles<T extends StyleSlots>(slots: T): () => {
+    [K in keyof T]: string;
+};

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: 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: overflowX,
+        overflowY: 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

@@ -1,7 +1,40 @@
 export type CSSValue = string | number;
+type CSSGlobals = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+type CSSDisplay = 'block' | 'inline' | 'inline-block' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'flow-root' | 'none' | 'contents' | 'table' | 'table-row' | 'list-item' | CSSGlobals | (string & {});
+type CSSPosition = 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky' | CSSGlobals | (string & {});
+type CSSBoxSizing = 'content-box' | 'border-box' | CSSGlobals | (string & {});
+type CSSFlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse' | CSSGlobals | (string & {});
+type CSSFlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse' | CSSGlobals | (string & {});
+type CSSJustifyContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'start' | 'end' | 'stretch' | CSSGlobals | (string & {});
+type CSSAlignItems = 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | 'start' | 'end' | 'self-start' | 'self-end' | CSSGlobals | (string & {});
+type CSSAlignContent = 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'start' | 'end' | 'baseline' | CSSGlobals | (string & {});
+type CSSAlignSelf = 'auto' | 'flex-start' | 'flex-end' | 'center' | 'baseline' | 'stretch' | 'start' | 'end' | 'self-start' | 'self-end' | CSSGlobals | (string & {});
+type CSSVerticalAlign = 'baseline' | 'sub' | 'super' | 'text-top' | 'text-bottom' | 'middle' | 'top' | 'bottom' | 'center' | CSSGlobals | (string & {});
+type CSSOverflow = 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | CSSGlobals | (string & {});
+type CSSTextAlign = 'left' | 'right' | 'center' | 'justify' | 'start' | 'end' | CSSGlobals | (string & {});
+type CSSTextTransform = 'none' | 'capitalize' | 'uppercase' | 'lowercase' | 'full-width' | 'full-size-kana' | CSSGlobals | (string & {});
+type CSSTextDecorationLine = 'none' | 'underline' | 'overline' | 'line-through' | 'blink' | CSSGlobals | (string & {});
+type CSSTextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed' | 'wavy' | CSSGlobals | (string & {});
+type CSSWhiteSpace = 'normal' | 'nowrap' | 'pre' | 'pre-wrap' | 'pre-line' | 'break-spaces' | CSSGlobals | (string & {});
+type CSSWordBreak = 'normal' | 'break-all' | 'keep-all' | 'break-word' | CSSGlobals | (string & {});
+type CSSTextOverflow = 'clip' | 'ellipsis' | CSSGlobals | (string & {});
+type CSSBorderStyle = 'none' | 'hidden' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | CSSGlobals | (string & {});
+type CSSOutlineStyle = 'auto' | 'none' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset' | CSSGlobals | (string & {});
+type CSSCursor = 'auto' | 'default' | 'none' | 'context-menu' | 'help' | 'pointer' | 'progress' | 'wait' | 'cell' | 'crosshair' | 'text' | 'vertical-text' | 'alias' | 'copy' | 'move' | 'no-drop' | 'not-allowed' | 'grab' | 'grabbing' | 'all-scroll' | 'col-resize' | 'row-resize' | 'n-resize' | 'e-resize' | 's-resize' | 'w-resize' | 'ne-resize' | 'nw-resize' | 'se-resize' | 'sw-resize' | 'ew-resize' | 'ns-resize' | 'nesw-resize' | 'nwse-resize' | 'zoom-in' | 'zoom-out' | CSSGlobals | (string & {});
+type CSSPointerEvents = 'auto' | 'none' | 'visiblePainted' | 'visibleFill' | 'visibleStroke' | 'visible' | 'painted' | 'fill' | 'stroke' | 'all' | CSSGlobals | (string & {});
+type CSSVisibility = 'visible' | 'hidden' | 'collapse' | CSSGlobals | (string & {});
+type CSSBackgroundSize = 'auto' | 'cover' | 'contain' | CSSGlobals | (string & {});
+type CSSBackgroundPosition = 'top' | 'right' | 'bottom' | 'left' | 'center' | CSSGlobals | (string & {});
+type CSSBackgroundRepeat = 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | CSSGlobals | (string & {});
+type CSSAnimationDirection = 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' | CSSGlobals | (string & {});
+type CSSAnimationFillMode = 'none' | 'forwards' | 'backwards' | 'both' | CSSGlobals | (string & {});
+type CSSAnimationPlayState = 'running' | 'paused' | CSSGlobals | (string & {});
+type CSSAnimationTimingFunction = 'linear' | 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'step-start' | 'step-end' | CSSGlobals | (string & {});
+type CSSFontWeight = 100 | 200 | 300 | 400 | 450 | 500 | 530 | 600 | 700 | 800 | 900 | 'normal' | 'bold' | 'bolder' | 'lighter' | CSSGlobals | (string & {}) | (number & {});
+type CSSFontStyle = 'normal' | 'italic' | 'oblique' | CSSGlobals | (string & {});
 export interface CSSProperties {
-    display?: CSSValue;
-    position?: CSSValue;
+    display?: CSSDisplay;
+    position?: CSSPosition;
     top?: CSSValue;
     right?: CSSValue;
     bottom?: CSSValue;
@@ -12,88 +45,130 @@ export interface CSSProperties {
     minHeight?: CSSValue;
     maxWidth?: CSSValue;
     maxHeight?: CSSValue;
-    boxSizing?: CSSValue;
+    boxSizing?: CSSBoxSizing;
     flex?: CSSValue;
-    flexDirection?: CSSValue;
-    flexWrap?: CSSValue;
+    flexDirection?: CSSFlexDirection;
+    flexWrap?: CSSFlexWrap;
     flexGrow?: CSSValue;
     flexShrink?: CSSValue;
     flexBasis?: CSSValue;
-    justifyContent?: CSSValue;
-    alignItems?: CSSValue;
-    alignContent?: CSSValue;
-    alignSelf?: CSSValue;
-    verticalAlign?: CSSValue;
+    justifyContent?: CSSJustifyContent;
+    alignItems?: CSSAlignItems;
+    alignContent?: CSSAlignContent;
+    alignSelf?: CSSAlignSelf;
+    verticalAlign?: CSSVerticalAlign;
     order?: CSSValue;
     gap?: CSSValue;
     gridTemplateColumns?: CSSValue;
     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;
+    fontWeight?: CSSFontWeight;
+    fontStyle?: CSSFontStyle;
     fontFamily?: CSSValue;
     lineHeight?: CSSValue;
-    textAlign?: CSSValue;
+    textAlign?: CSSTextAlign;
     textDecoration?: CSSValue;
-    textDecorationLine?: CSSValue;
-    textTransform?: CSSValue;
+    textDecorationLine?: CSSTextDecorationLine;
+    textDecorationStyle?: CSSTextDecorationStyle;
+    textDecorationColor?: CSSValue;
+    textDecorationThickness?: CSSValue;
+    textTransform?: CSSTextTransform;
+    textOverflow?: CSSTextOverflow;
+    whiteSpace?: CSSWhiteSpace;
+    wordBreak?: CSSWordBreak;
     letterSpacing?: CSSValue;
     background?: CSSValue;
     backgroundColor?: CSSValue;
     backgroundImage?: CSSValue;
-    backgroundSize?: CSSValue;
-    backgroundPosition?: CSSValue;
-    backgroundRepeat?: CSSValue;
+    backgroundSize?: CSSBackgroundSize;
+    backgroundPosition?: CSSBackgroundPosition;
+    backgroundRepeat?: CSSBackgroundRepeat;
     border?: CSSValue;
     borderTop?: CSSValue;
     borderRight?: CSSValue;
     borderBottom?: CSSValue;
     borderLeft?: CSSValue;
     borderWidth?: CSSValue;
-    borderStyle?: CSSValue;
+    borderStyle?: CSSBorderStyle;
     borderColor?: CSSValue;
     borderRadius?: CSSValue;
     borderTopColor?: CSSValue;
     borderRightColor?: CSSValue;
     borderBottomColor?: CSSValue;
     borderLeftColor?: CSSValue;
+    borderTopWidth?: CSSValue;
+    borderRightWidth?: CSSValue;
+    borderBottomWidth?: CSSValue;
+    borderLeftWidth?: CSSValue;
+    borderTopStyle?: CSSBorderStyle;
+    borderRightStyle?: CSSBorderStyle;
+    borderBottomStyle?: CSSBorderStyle;
+    borderLeftStyle?: CSSBorderStyle;
+    borderTopLeftRadius?: CSSValue;
+    borderTopRightRadius?: CSSValue;
+    borderBottomRightRadius?: CSSValue;
+    borderBottomLeftRadius?: CSSValue;
     opacity?: CSSValue;
-    outlineStyle?: CSSValue;
+    outline?: CSSValue;
+    outlineWidth?: CSSValue;
+    outlineStyle?: CSSOutlineStyle;
+    outlineColor?: CSSValue;
     boxShadow?: CSSValue;
     transform?: CSSValue;
     transition?: CSSValue;
     transitionDuration?: CSSValue;
     transitionProperty?: CSSValue;
-    transitionTimingFunction?: CSSValue;
+    transitionTimingFunction?: CSSAnimationTimingFunction;
     transitionDelay?: CSSValue;
     animation?: CSSValue;
     animationDuration?: CSSValue;
-    animationTimingFunction?: CSSValue;
+    animationTimingFunction?: CSSAnimationTimingFunction;
     animationDelay?: CSSValue;
     animationIterationCount?: CSSValue;
-    animationDirection?: CSSValue;
-    animationFillMode?: CSSValue;
-    animationPlayState?: CSSValue;
+    animationDirection?: CSSAnimationDirection;
+    animationFillMode?: CSSAnimationFillMode;
+    animationPlayState?: CSSAnimationPlayState;
     animationName?: CSSValue;
-    overflow?: CSSValue;
-    overflowX?: CSSValue;
-    overflowY?: CSSValue;
-    cursor?: CSSValue;
-    pointerEvents?: CSSValue;
+    overflow?: CSSOverflow;
+    overflowX?: CSSOverflow;
+    overflowY?: CSSOverflow;
+    cursor?: CSSCursor;
+    pointerEvents?: CSSPointerEvents;
     zIndex?: CSSValue;
-    visibility?: CSSValue;
+    visibility?: CSSVisibility;
     content?: CSSValue;
 }
 export interface CSSPseudos {
@@ -117,15 +192,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 interface CSSCombinators {
+    '& > *'?: CSSProperties;
+    '& > *:first-child'?: CSSProperties;
+    '& > *:last-child'?: CSSProperties;
+    '& + *'?: CSSProperties;
+    '& ~ *'?: CSSProperties;
+    [key: `& ${string}`]: CSSProperties | undefined;
 }
-export type StyleRule = CSSProperties & CSSPseudos & CSSMediaQueries;
+export type StyleRule = CSSProperties & CSSPseudos & CSSMediaQueries & CSSCombinators;
 export type StyleDefinition = StyleRule | (() => StyleRule);
 export declare enum StyleBucket {
     RESET = "d",
@@ -182,3 +265,4 @@ export interface FontFaceDefinition {
     descentOverride?: string;
     lineGapOverride?: string;
 }
+export {};

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.5",
+  "version": "0.1.7",
   "description": "",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",