Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[feature] tag agnostic API #6

Open
AlexandreBonaventure opened this issue Nov 13, 2017 · 1 comment
Open

[feature] tag agnostic API #6

AlexandreBonaventure opened this issue Nov 13, 2017 · 1 comment

Comments

@AlexandreBonaventure
Copy link
Contributor

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
Copy link

+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>
  `
})

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants