@childs Mixin

Use @childs mixin to style child elements.

Usage:

.any-class {
	/* direct */
	@childs <variant> { ... }

	/* functions */
	@childs <variant>("<arguments>") { ... }
}

info

This page contains only the mixins configuration reference. Complete documentation and usage examples will be added progressively in future updates.

Reference

shilp.config.js
/** @type {import('shilpcss/types').ShilpConfig} */
const shilpConfig = {
  source: "react",

  mixins: {
    childs: {
      variants: {
        first: "& > :first-child",
        last: "& > :last-child",
        // only: "& > :only-child",
        odd: "& > :nth-child(odd)",
        even: "& > :nth-child(even)",
        //
        // "first-of-type": "& > :first-of-type",
        // "last-of-type": "& > :last-of-type",
        // "only-of-type": "& > :only-of-type",
        //
        "not-first": "& > * + *", // not nested, not from other parents
        "not-last": "& > :not(:last-child)",
        //
        any: "& *",
        direct: "& > *",

        /* functions */
        nth: "& > *:nth-child(<1>)",
        // "nth-last": "& > :nth-last-child(<1>)",
        // "nth-of-type": "& > :nth-of-type(<1>)",
        // "nth-last-of-type": "& > :nth-last-of-type(<1>)",
        //
        "match-any": "& <1>",
        "match-direct": "& > <1>",
      },
    },
  },
};

export default shilpConfig;