@praha/vanilla-essence

Essential utilities for vanilla-extract.

👏 Getting Started

Installation

npm install @praha/vanilla-essence

Usage

helpers

A collection of utility functions to simplify the usage of vanilla-extract.

merge-styles

A utility function for merging multiple style rules. Use for pseudo-elements, etc., where the style cannot be passed as an array.

import { mergeStyles } from '@praha/vanilla-essence';
import { style } from '@vanilla-extract/css';

const baseStyle = { color: 'blue' };
const hoverStyle = { backgroundColor: 'red' };

const mergedStyle = style({
  ':hover': mergeStyles(baseStyle, hoverStyle),
});

typed-query

A utility function to assist in writing media queries in a type-safe manner.

import { typedQuery } from '@praha/vanilla-essence';
import { style } from '@vanilla-extract/css';

const buttonStyle = style({
  color: 'black',
  '@media': {
    [typedQuery('(prefers-color-scheme: dark)')]: {
      color: 'white',
    },
  },
});

styles

A collection of pre-defined styles for common use cases.

animateIn/animateOut

A utility function for creating CSS animations.
Use in combination with fadeIn/fadeOut or slideIn/slideOut.

import {
  animateIn,
  animateOut,
  fadeIn,
  fadeOut,
  slideInFromBottom,
  slideOutToBottom,
} from '@praha/vanilla-essence';
import { style } from '@vanilla-extract/css';

const animateInStyle = style([
  animateIn(),
  fadeIn(),
  slideInFromBottom(),
]);

const animateOutStyle = style([
  animateOut(),
  fadeOut(),
  slideOutToBottom(),
]);

fadeIn/fadeOut

A utility function for creating fade-in and fade-out effects.

import { animateIn, animateOut, fadeIn, fadeOut } from '@praha/vanilla-essence';
import { style } from '@vanilla-extract/css';

const fadeInStyle = style([
  animateIn(),
  fadeIn(),
]);

const fadeOutStyle = style([
  animateOut(),
  fadeOut(),
]);

slideIn/slideOut

A utility function for creating slide-in and slide-out effects.

import {
  animateIn,
  animateOut,
  slideInFromBottom,
  slideOutToBottom,
} from '@praha/vanilla-essence';
import { style } from '@vanilla-extract/css';

const slideInStyle = style([
  animateIn(),
  slideInFromBottom(),
]);
const slideOutStyle = style([
  animateOut(),
  slideOutToBottom(),
]);

hover

A utility function for creating hover effects.

import { hover } from '@praha/vanilla-essence';
import { style } from '@vanilla-extract/css';

const buttonStyle = style([
  {
    backgroundColor: 'blue',
  },
  hover({ backgroundColor: 'red' }),
]);

🤝 Contributing

Contributions, issues and feature requests are welcome.

Feel free to check issues page if you want to contribute.

📝 License

Copyright © PrAha, Inc.

This project is MIT licensed.