properties
changelog

@text Mixin

Use @text mixin for text-related conditions and pseudo-selectors.

Usage:

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

Reference

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

  mixins: {
    text: {
      variants: {
        // "first-letter": "&::first-letter",
        // "first-line": "&::first-line",

        // NOTE: Safari support is limited to color and font-size.
        // use `list-style-type` for custom marker
        // can also use intent `@list marker-*;`
        marker: "&::marker",

        // NOTE: Safari iOS doesn't support this.
        // selection: "&::selection",

        // writing style
        rtl: `[dir="rtl"] &`,
        ltr: `[dir="ltr"] &`,
      },
    },
  },
};

export default shilpConfig;

Published at:

Last updated at:

State MixinTheme Mixin