vanilla-extract-css/vanilla-extract @vanilla-extract/sprinkles@1.1.0

on GitHub

Minor Changes

• #303 e67e673 Thanks @rtkaaho! - Support passing style objects as property values.

  For more complicated styles, values can now be entire style objects. This works especially well when combined with CSS Variables.

  import { createVar } from '@vanilla-extract/css';
  import { createAtomicStyles } from '@vanilla-extract/sprinkles';
  
  const alpha = createVar();
  
  const responsiveStyles = createAtomicStyles({
    properties: {
      background: {
        red: {
          vars: { [alpha]: '1' },
          background: `rgba(255, 0, 0, ${alpha})`,
        },
      },
      backgroundOpacity: {
        1: { vars: { [alpha]: '1' } },
        0.1: { vars: { [alpha]: '0.1' } },
      },
      // etc.
    },
  });