vanilla-extract-css/vanilla-extract @vanilla-extract/dynamic@2.1.0

on GitHub

Minor Changes

• #1175 ca854f5 Thanks @youngkyo0504! - assignInlineVars now accepts null and undefined values

  Variables with a value of null or undefined will be omitted from the resulting inline style.

  NOTE: This only applies to the case where a theme contract is not provided.

  import { assignInlineVars } from '@vanilla-extract/dynamic';
  import { container, brandColor, textColor } from './styles.css.ts';
  
  // If `tone` is `undefined`, the following inline style becomes:
  // { '--brandColor__8uideo0': 'pink' }
  
  const MyComponent = ({ tone }: { tone?: critical }) => (
    <section
      className={container}
      style={assignInlineVars({
        [brandColor]: 'pink',
        [textColor]: tone === 'critical' ? 'red' : null,
      })}
    >
      ...
    </section>
  );

• #1175 ca854f5 Thanks @youngkyo0504! - setElementVars now accepts null and undefined values

  Variables with a value of null or undefined will not be assigned a value.

  NOTE: This only applies to the case where a theme contract is not provided.

  import { setElementVars } from '@vanilla-extract/dynamic';
  import { brandColor, textColor } from './styles.css.ts';
  
  const el = document.getElementById('myElement');
  
  setElementVars(el, {
    [brandColor]: 'pink',
    [textColor]: null,
  });