egoist / styletron-vue

Vue bindings for Styletron.
https://egoist.moe/styletron-vue
MIT License
48 stars 7 forks source link

[feature] tag agnostic API #6

Open AlexandreBonaventure opened 6 years ago

AlexandreBonaventure commented 6 years ago

Just to kickstart a reflexion I had. Would be glad to implement this feature if there is a common agreement.

Proposed API

import { styled, tag } from 'styletron-vue'

const RedStyle = styled({
  color: red
})
const RedButton = tag('button', RedStyle)

new Vue({
  components: {
    RedStyle,
    RedButton,
  },
  template: `
     <red-style tag="h1">i'm red title</red-style>
     <red-style tag="h6">i'm small red title</red-style>
     <red-button type="button">i'm red button</red-button>
  `
})

Purpose It will allow to play with styles and compose with more flexibility. It can simplify style reuse for quick usage.

wagerfield commented 6 years ago

+1 for this, I think it's a nice idea...though this could this not be achieved by doing:

const StyledComponent = styled('component', {
  color: 'red'
})

new Vue({
  components: {
    StyledComponent
  },
  template: `
    <styled-component is="h1">I'm a red title</styled-component>
    <styled-component is="h6">I'm a small red title</styled-component>
  `
})