📖 Syntax

Basic Syntax

In Plumeria, multiple tags in a list can be defined at once using &.

TypeScript

import { css, cx } from '@plumeria/core';
 
const styles = css.create({
  list: {

    '& li': {
      listStyleType: 'none',
    },
  },
});

<ul className="{styles.list}">
  <li></li>
  <li></li>
  <li></li>
</ul>

Nesting Rules

The following example is acceptable:

TypeScript

import { css, cx } from '@plumeria/core';
 
const styles = css.create({
  list: {

    [css.media.max('width: 800px')]: {
      '& li': {
        listStyleType: 'none',
      },
    },
  },
});

error cases

Unacceptable examples:

TypeScript

import { css, cx } from '@plumeria/core';
 
const styles = css.create({
  list: {
    '& li': {

      [css.media.max('width: 800px')]: {
        listStyleType: 'none',
      },
    },
  },
});

TypeScript

import { css, cx } from '@plumeria/core';
 
const styles = css.create({
  list: {
    ':hover': {

      [css.media.max('width: 800px')]: {
        background: 'skyblue',
      },
    },
  },
});

And of course the following example also not acceptable. They have different safety at the type level, but have the same meaning as a result: hover.

TypeScript

const styles = css.create({
  list: {
    [css.pseudo.hover]: {

      [css.media.max('width: 800px')]: {
        background: 'skyblue',
      },
    },
  },
});

Nesting Restrictions

Media can only be nested once with pseudo and &, but pseudo and & cannot nest media.

📖 Syntax

Basic Syntax

Nesting Rules

More

See more about css.cx

See more about css.pseudo

On this page