getting started

core concepts

configuration

life cycle

default styles

properties

Overview
@adjust
@animate
- delay
- direction
- duration
- enter
- exit
- fade
- flow
- loop
- mode
- name
- preset
- slide
- spin
- state
- zoom
@bg
@border
@filter
@flex
- base
- content
- flow
- grow
- items
- justify
- order
- place
- preset
- self
- shrink
- wrap
@form
@grid
- col
- cols
- content
- flow
- items
- justify
- order
- place
- preset
- row
- rows
- self
@layout
- blend
- box
- float
- hide
- is
- isolate
- layer
- object
- opacity
- overflow
- ratio
- shadow
- show
- theme
@list
- align
- marker
@live
@mask
@phase
@position
- is
- inset
- top
- bottom
- left
- right
- x
- y
@size
- h
- is
- max
- min
- w
@space
- gap
- m
- p
@svg
- fill
- stroke
@table
@text
- align
- break
- case
- color
- content
- family
- gap
- h
- line
- lines
- move
- nums
- overflow
- shadow
- size
- space
- style
- thick

mixins

components

values

best practices

changelog

alpha.0

Mask Image

Specifies an image to use as a mask.

Usage:

@mask img-*;

danger

Gradient color mask uses mask-image property.

So, if you are using @mask gradient-*; then conflict will be created. You need to choose a stratagey to work with both.

info

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

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		mask: {
			img: {
				property: "mask-image: <v><i>;",
				values: {
					none: "none",
				},
			},
		},
	},
};

export default shilpConfig;