@self Mixin

Use @self mixin to apply styles to the element itself with conditions.

Usage:

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

	/* functions */
	@self <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: {
    self: {
      variants: {
        // pseudo
        before: "&::before",
        after: "&::after",

        //
        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",

        /* 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>)",
      },
    },
  },
};

export default shilpConfig;