Selector rules

Nesting

Pseudo-elements(class) and media nesting rules.
Queries(media・container) can only be pseudo nest once, but pseudo cannot nest queries.

TypeScript

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

const styles = css.create({
  list: {
    '@media (max-width: 768px)': {
      ':hover': {
        listStyleType: 'none',
      },
    },
  },
});

error cases

Unacceptable examples:

TypeScript

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

const styles = css.create({
  list: {
    ':hover': {
      '@media (max-width: 768px)': {
        background: 'skyblue',
      },
    },
  },
});

Reason

This design intentionally avoids reverse nesting.

Type system limitations (recursive types)
Avoiding reverse nesting complexity
Ensuring consistent nesting patterns

Selector rules

Nesting

Reason

See more about API create

On this page