insertCss

insertCss(style): string

Defined in: aberdeen.ts:2749

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.

Parameters

style

string | object

A concise style string or a style object.

Returns

string

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

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

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

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');