Vanilla Extract React Snippets

Use the extension ID to find in VSC marketplace: Jabun.vanilla-extract-react-snippets https://marketplace.visualstudio.com/items?itemName=Jabun.vanilla-extract-react-snippets

Usage

After installation of this snippets, add this inside your settings

"editor.snippetSuggestions": "top",

Snippets List

ivs [Import {style}]

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

ivsv [Import {styleVariants}]

import { styleVariants } from '@vanilla-extract/css';

ivk [Import {keyframes}]

import { keyframes } from '@vanilla-extract/css';

iva [Import * as styles from './[file].css]

import * as styles from './${1:$TM_FILENAME_BASE}.css';

vsr [Create {style} rule]

const $1 = style({
    $2: $3
});

vesr [Create & export {style} rule]

export const $1 = style({
    $2: $3
});

vsv [Create {styleVariants}]

const $1 = styleVariants({
  $2: {
    $3: $4,
  },
});

vesv [Create & export {styleVariants}]

export const $1 = styleVariants({
  $2: {
    $3: $4,
  },
});

vke [Create {keyframes}]

const $1 = keyframes({
    '$2': {
      $3: $4,
    },
});

veke [Create & export {keyframes}]

export const $1 = keyframes({
    '$2': {
      $3: $4,
    },
});

vmq [Create media query]

'@media': {
  'screen and (min-width: $1px)': {
    $2: $3,
  },
},

vse [Create Selectors]

selectors: {
  '$1': {
    $2: $3,
  },
},

vsc [Create Style Composition]

const $1 = style([$2, { $3: $4 }]);

vesc [Create & export Style Composition]

export const $1 = style([$2, { $3: $4 }]);

vus [Use imported styles in className]

className={styles.$1}

vsp [Use sprinkles]

className={sprinkles({
  $1: $2 
})}