marker & extended

The marker and extended APIs enable context-aware styling without relying on DOM structure or combinator syntax.
These paired APIs maintain atomicity while allowing child elements to respond to parent states.

Overview

• marker(id, pseudo) - Sets a CSS variable marker on a parent element
• extended(id, pseudo) - Applies styles to children when the marker is active

This pattern replaces combinator-based selectors (like &, >, +) with a logical ID system that works across component boundaries.

Syntax

const marker = (id: string, pseudo: string): CSSProperties
const extended = (id: string, pseudo: string): ContainerStyleQuery

Parameters

• id - A unique identifier linking the marker and extended styles
• pseudo - The pseudo-class state (e.g., ':hover', ':focus', ':active')

Example

import * as css from '@plumeria/core';

const styles = css.create({
  table: {
    ...css.marker('ul', ':hover'),
    width: '100%',
    height: 200,
    listStyleType: 'none',
  },
  list: {
    transition: 'all 0.5s',
    [css.extended('ul', ':hover')]: {
      color: 'orange',
      scale: 1.2,
      ':hover': {
        scale: 1.8,
      },
    },
  },
});

const Component = () => {
  return (
    <div>
      <ul className={css.props(styles.table)}>
        <li className={css.props(styles.list)}>Happy new year!</li>
      </ul>
    </div>
  );
};

.xa3bzzr2:hover {
  --ul-hover: 1;
}

@container style(--ul-hover: 1) {
  .xhsfb1p9:not(#\#) {
    color: orange;
  }
  .xw7nub6k:not(#\#) {
    scale: 1.2;
  }
  .xwntwjm5:not(#\#):hover {
    scale: 1.8;
  }
}

How it works

Internal Implementation

1. marker() generates a CSS variable when the pseudo-class is active:

   .parent:hover {
     --ul-hover: 1;
   }

2. extended() wraps child styles in a container query:

   @container style(--ul-hover: 1) {
     .child { /* styles */ }
   }

3. The CSS variable acts as a signal that propagates to descendants without DOM structure dependency.

Performance

• Zero runtime - Fully inlined at build time and no import references
• Atomic CSS - Styles are deduplicated and reused