@winter-love/emotion

Emotion for Vue

Usage no npm install needed!

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

README

Emotion Styled for Vue3 / vue2 composition-api

Winter Love packages document

Styled

import {createStyled} from '@winter-love/emotion'
import createEmotionOriginal from '@emotion/css/create-instance'

const styled = createStyled(createEmotionOriginal({key: 'css'}))
// vue component
const StyledComponent = styled(element, {
  props: {
    color: {type: String},
  },
})(
  {
    backgroundColor: 'red',
  },
  (props) => {
    return {
      color: props.color,
    }
  },
)

All of Emotion

import {createEmotion} from '@winter-love/emotion'

const {
  styled,
  css,
  cx,
  flush,
  hydrate,
  injectGlobal,
  keyframes,
  sheet,
  cache,
  marge,
  getRegisteredStyles,
} = createEmotion({key: 'css'})