## insertCss · function Inserts CSS rules into the document, scoping them with a unique class name. The `style` parameter can be either: - A **concise style string** (for rules applying to the root class). - An **object** where keys are selectors (with `&` representing the root class) and values are concise style strings or nested objects. When the key does not contain `&`, it is treated as a descendant selector. So `{p: "color:red"}` becomes `".AbdStlX p { color: red; }"` with `AbdStlX` being the generated class name. ### Concise Style Strings Concise style strings use two syntaxes (same as inline CSS in | A): - **Short form** `key:value` (no space after colon): The value ends at the next whitespace. Example: `'m:$3 bg:red r:8px'` - **Long form** `key: value;` (space after colon): The value continues until a semicolon. Example: `'box-shadow: 2px 0 6px black; transition: all 0.3s ease;'` Both forms can be mixed: `'m:$3 box-shadow: 0 2px 4px rgba(0,0,0,0.2); bg:$cardBg'` Supports the same CSS shortcuts as | A and CSS variable references with `$` (e.g., `$primary`, `$3`). CSS is inserted into the in an order relative to other insert(Global)Css items that is consistent based on when the containing Aberdeen scope was first defined. This allows changing styles without changing order-based precedence. **Signature:** `(style: string | object) => string` **Parameters:** - `style: string | object` - - A concise style string or a style object. **Returns:** The unique class name prefix used for scoping (e.g., `.AbdStl1`). Use this prefix with | A to apply the styles. **Examples:** Basic Usage with Shortcuts and CSS Variables ```typescript const cardClass = A.insertCss({ '&': 'bg:white p:$4 r:8px transition: background-color 0.3s;', '&:hover': 'bg:#f5f5f5', }); A('section', cardClass, () => { A('p#Card content'); }); ``` Nested Selectors and Media Queries ```typescript const formClass = A.insertCss({ '&': 'bg:#0004 p:$3 r:$2', button: { '&': 'bg:$primary fg:white p:$2 r:4px cursor:pointer', '&:hover': 'bg:$primaryHover', '&:disabled': 'bg:#ccc cursor:not-allowed', '.icon': 'display:inline-block mr:$1', '@media (max-width: 600px)': 'p:$1 font-size:14px' } }); A('form', formClass, () => { A('button', () => { A('span.icon text=🔥'); A('#Click Me'); }); }); ``` Complex CSS Values ```typescript const badge = A.insertCss({ '&::before': 'content: "★"; color:gold mr:$1', '&': 'position:relative box-shadow: 0 2px 8px rgba(0,0,0,0.15);' }); A(badge + ' span#Product Name'); ```