Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(deps): update dependency @vanilla-extract/css to v1.17.0 #195

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Dec 23, 2024

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@vanilla-extract/css (source) 1.16.1 -> 1.17.0 age adoption passing confidence
@vanilla-extract/css (source) ^1.16.1 -> ^1.17.0 age adoption passing confidence

Release Notes

vanilla-extract-css/vanilla-extract (@​vanilla-extract/css)

v1.17.0

Compare Source

Minor Changes
  • #​1092 fd673f6 Thanks @​z4o4z! - keyframes: Add support for a vars property to steps within keyframes declarations

    Example usage:

    import {
      createVar,
      keyframes
    } from '@​vanilla-extract/css';
    
    const angle = createVar({
      syntax: '<angle>',
      inherits: false,
      initialValue: '0deg'
    });
    
    export const angleKeyframes = keyframes({
      '0%': {
        vars: {
          [angle]: '0deg'
        }
      },
      '100%': {
        vars: {
          [angle]: '360deg'
        }
      }
    });
  • #​1512 4abfc0b Thanks @​askoufis! - createTheme, createGlobalTheme: Add support for assigning themes to a layer

    Themes can now be assigned to a layer by name using the @layer key at the top-level of the theme definition.

    EXAMPLE USAGE:

    // themes.css.ts
    import {
      createTheme,
      createGlobalTheme,
      layer
    } from '@&#8203;vanilla-extract/css';
    
    export const themeLayer = layer();
    
    export const [themeA, vars] = createTheme({
      '@&#8203;layer': themeLayer,
      color: {
        brand: 'blue'
      },
      font: {
        body: 'arial'
      }
    });
    
    export const vars2 = createGlobalTheme(':root', {
      '@&#8203;layer': themeLayer,
      space: {
        small: '10px',
        large: '20px'
      }
    });

    This will generate the following CSS:

    @&#8203;layer themes_themeLayer__1k6oxph0;
    @&#8203;layer themes_themeLayer__1k6oxph0 {
      .themes_themeA__1k6oxph1 {
        --color-brand__1k6oxph2: blue;
        --font-body__1k6oxph3: arial;
      }
    
      :root {
        --space-small__z05zdf1: 10px;
        --space-large__z05zdf2: 20px;
      }
    }
  • #​1092 fd673f6 Thanks @​z4o4z! - createVar: Add support for defining [@property][@​property] rules

    Example usage:

    import { createVar } from '@&#8203;vanilla-extract/css';
    
    export const myVar = createVar({
      syntax: '<number>',
      inherits: false,
      initialValue: '0.5'
    });

    This will generate the following CSS:

    @&#8203;property --myVar__jteyb14 {
      syntax: '<number>';
      inherits: false;
      initial-value: 0.5;
    }

Configuration

📅 Schedule: Branch creation - "* 0-3 * * 1" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about these updates again.


  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

0 participants