dparker2 / vue-emotion

Use emotion with Vue.js

vue-emotion

Use dynamic styling powered by emotion with Vue.js components.

Demo Link

https://codesandbox.io/s/github/ParkerD559/vue-emotion-plugin/tree/master

Styled

Installation

npm install -D @vue-emotion/styled

Style Components

const StyledButton = styled(MyButton)`
  border: 1px solid ${color('red')};
  padding: 10px;
  height: ${props => props.height}px;
  width: ${props => props.width}px;
  color: ${props => props.color};
  background-color: ${props => props.backgroundColor};
`

Style HTML elements

const StyledAnchor = styled.a`
  text-decoration: none;
`

Target styled components

import StyledButton from './somewhere'

const StyledWrapper = styled.section`
  div > ${StyledButton} {
    color: #123123;
  }
`

Note: Doesn't work with object styles

Object styles

const StyledButton = styled(MyButton)({
    color: '#0000ff',
    flex: 1
})

Reuse styles using withComponent

const StyledButton = styled(MyButton)`
    height: 100px;
    width: 200px;
`
const StyledAnchor = StyledButton.withComponent('a');
// => StyledButton and StyledAnchor have same styles

Bugs/Features

Please feel free to post any issues or feature requests: https://github.com/ParkerD559/vue-emotion/issues

vue-emotion's Issues

withComponent

https://emotion.sh/docs/styled#change-the-rendered-tag-using-withcomponent

shouldForwardProp

https://emotion.sh/docs/styled#customizing-prop-forwarding

Scoped styles

I've been using the (now archived) version of vue-emotion by egoist for a while now. The three things that would really make me switch to this library would be:

1. an invisible implementation of targeting a child emotion component (but you already created an issue for that, so that's good 👍 )
2. Some sort of implementation that mimics scoped styles of vue style blocks. Because, at the point I am able to target emotion children components, I have to worry about styles leaking down through my component tree.
3. Switching to the styled wrapper component to be a functional component. I use these everywhere, so, the lighter the better.

as prop

https://emotion.sh/docs/styled#as-prop

Overwriting classes instead of merging.

Hey!

Finally got around to playing around with this library, but some issues came up when I tried it as a drop in replacement for legacy vue-emotion, the biggest of which is that you're not taking into account existing classes that might exist on a VNode.

Checkout this line from wrapper.js:

    // Add the target class if need be
    const classes = this.$_targetClass
        ? [emotionClass, this.$_targetClass]
        : [emotionClass]

    return createElement(
        this.$_styledFrom,  // Base component even if styled multiple times
        { ...context.data, class: classes },
        context.children
    );

See? You're taking into account a targetClass for selector targeting, but when the root node of the component being styled already has a class attribute, it's getting wiped out.

basic elements

e.g. styled.span

targeting another component

https://emotion.sh/docs/styled#targeting-another-emotion-component

tests setup