Fillings API

Generate a static set of dynamically assignable properties. This API allows you to create component interface similar to the one known from styled-system, without the usual style generation overhead of CSS-in-JS. You can think about this API as a dynamic equivalent of Sprinkles, where user is free to specify any value to the properties.

Installation

Follow instructions on setting up vanilla-extract. After that make sure you have all necessary dependencies installed:

npm install @vanilla-extract/css @vanilla-extract/dynamic @angelblock/fillings

Usage

createFillings

Create static definition of you CSS classes. This function generates respective class names with associated CSS variables.

// styles.css.ts
import { createFillings } from '@angelblock/fillings';

export const sizeFillings = createFillings({
  properties: ['width', 'height'],
});

Conditional styles

This API really shines when used in combination with @media/@supports/selector conditions, creating dynamic API that remove the need to create custom styles every time you would want to assign different values to CSS properties on different screen sizes, color modes or other conditions.

// styles.css.ts
import { createFillings } from '@angelblock/fillings';

const responsive = {
  sm: { '@media': '' }, // treated as special case - style not wrapped with selector
  lg: { '@media': 'screen and (min-width: 986px)' },
} as const;

export const sizeFillings = createFillings({
  conditions: responsive,
  defaultCondition: 'sm',
  properties: ['width', 'height'],
});

// app.tsx
import type { FillingsProps } from '@angelblock/fillings';
import type { FC } from 'react';
import { sizeFillings } from './styles.css.ts';

type Props = FillingsProps<typeof sizeFillings>;

const Box: FC<Props> = ({ ...props, children }) => {
  const { className, style } = sizeFillings(props);

  return (
    <div style={style} className={className}>
      {children}
    </div>
  );
};

const App = () => (
  <Box width={{ sm: '200px', lg: '400px' }} height={{ sm: '200px', lg: '400px' }}>
    ... App content
  </Box>
);

@layer support

Optionally when creating fillings you can scope them to specific CSS layer.

// styles.css.ts
import { createFillings } from '@angelblock/fillings';
import { layer } from '@vanilla-extract/css';

const components = layer('components');

const responsive = {
  sm: { '@media': '' }, // treated as special case - style not wrapped with selector
  lg: { '@media': 'screen and (min-width: 986px)' },
} as const;

export const sizeFillings = createFillings({
  '@layer': components,
  conditions: responsive,
  defaultCondition: 'sm',
  properties: ['width', 'height'],
});