marker & extended

export type marker = (id: string, pseudo: string) => Marker;
export type extended = <I extends string, P extends string>(id: I, pseudo: P) => Extended<I, P>;
export const marker: marker;
export const extended: 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.

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

Syntax

type marker = (_id: string, _pseudo: string) => Marker;
type extended = <I extends string, P extends string>(_id: I, _pseudo: P) => Extended<I, P>;

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 styleName={styles.table}>
        <li styleName={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

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

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

extended() wraps child styles in a container query:

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

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