@winter-love/stitches

Stitches for Vue

Usage no npm install needed!

<script type="module">
  import winterLoveStitches from 'https://cdn.skypack.dev/@winter-love/stitches';
</script>

README

Stitches for Vue3 / vue2 composition-api

Winter Love packages document

Directive

import {createDirective} from '@winter-love/stitches'
import {createStitches} from '@stitches/core'
import {defineComponent, h, withDirectives} from 'vue'

const stitches = createStitches({
  media: {
    bp1: '(min-width: 640px)',
    bp2: '(min-width: 768px)',
    bp3: '(min-width: 1024px)',
  },
  theme: {
    colors: {
      red1: 'rgb(253,37,37)',
    },
  },
})

const directive = createDirective(stitches)

const Box = defineComponent({
  name: 'Box',
  setup() {
    return () => (
      withDirectives(h('div'), [[directive, {color: '$red1'}]])
    )
  }
})

Styled

import {createStyled} from '@winter-love/stitches'
import {createStitches} from '@stitches/core'

const stitches = createStitches({
  media: {
    bp1: '(min-width: 640px)',
    bp2: '(min-width: 768px)',
    bp3: '(min-width: 1024px)',
  },
  theme: {
    colors: {
      red1: 'rgb(253,37,37)',
    },
  },
})

const styled = createStyled(stitches)

const Box = styeld('div', {name: 'BoX'}, {
  color: '$red1'
})