Styling with Blocks

When it comes to styling your components with Blocks, the process is made effortless through the style function. This function accepts a blend of atoms and raw CSS values as its parameters.

This function is a drop-in replacement for the style function from @vanilla-extract/css.

Example

Let's dive into an example. Instead of the somewhat intricate code structure using atoms and @vanilla-extract/css:

import { style } from '@vanilla-extract/css';
import { atoms } from '@blockle/blocks';

export const myClass = style([
  atoms({
    padding: ['small', 'large'],
  }),
  {
    color: '#c0c',
  },
]);

With Blocks, you can achieve the same outcome with cleaner code:

import { style, atoms } from '@blockle/blocks';

export const myClass = style({
  padding: ['small', 'large'],
  color: '#c0c',
});

Simply replace the style function from @vanilla-extract/css with Blocks style function. They share the same arguments and produce identical results. The only distinction is that with Blocks, you can use atoms directly, eliminating the need to wrap them in the atoms function. Streamlining your styling process.

Limitations

Atoms can only be used in the root level of the style object. This means that you cannot use atoms in selectors or complexer style objects. For example:

import { style, vars } from '@blockle/blocks';

const styles = style({
  // ✅ Works
  color: 'primary',
  ':hover': {
    // ❌ Does not work
    color: 'secondary',
  },
});

To workaround this, you can use vars from @blockle/blocks instead. For example:

import { style, vars } from '@blockle/blocks';

const styles = style({
  // ✅ Works
  color: 'primary',
  ':hover': {
    // ✅ Works
    color: vars.color.secondary,
  },
});