styletron-vue
styletron-vue copied to clipboard
[feature] tag agnostic API
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.
+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>
`
})