properties
changelog

@env Mixin

Use @env mixin for styling based on environment.

Usage:

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

Reference

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

  mixins: {
    env: {
      variants: {
        // orientation
        tall: "@media (orientation: portrait)",
        wide: "@media (orientation: landscape)",

        // media type
        print: "@media print",
        screen: "@media screen",
      },
    },
  },
};

export default shilpConfig;

Published at:

Last updated at:

Data MixinForm Mixin