Vue-loader: Support for styled-components?

[kevmo314]

What problem does this feature solve?

Is there a way to add css loaders that are dependent on the generated Vue.component() in *.vue files? For example, styled-components is one of such frameworks. At the moment, it seems not feasible due to the underlying component not being exposed. The integration could be pretty slick too, I think, if the pass to vue-styled-components is handled by the loader.

What does the proposed API look like?

<style lang="styled-components">
  font-size: ${props.fontSize}em;
  ...

  &:hover {
    box-shadow: ...;
  }
  & .child {
    ...
  }
</style>

[liqueflies]

Hi @kevmo314,
there's something I can't understand.

can you show a full example?
If you have new ideas to share you can join also https://github.com/styled-components/vue-styled-components :)

[kevmo314]

The proposed API is essentially the full example. Basically, I'd like to be able to use vue-styled-components with *.vue single-file components. Unless I misunderstood the documentation for vue-styled-components, that's not currently possible.

[yyx990803]

This is not really the same idea as styled-components, it's more like allowing JS interpolation inside the <style> section.

Note this fundamentally changes how <style> is handled in vue-loader though, because props are runtime, and all the styles are handled at compile time in vue-loader. Technically, this would require a completely different compilation strategy and use a CSS-in-JS runtime library underneath.

Not something we have bandwidth for at the moment, but could be interesting to experiment on in the future.

[Aaron-Pool]

I'm a big fan of styled-components. I'd love to see something similar implemented in vue. Being able to quickly spin up a native element with styles attached as simply as

style.div`
   padding: 5px;
   background-color: red;
   border-radius: 5px;
`

Is SO much simpler. And being able to do the same for styling actual vue components completely removes the need for worrying about css scopes, or having to declare less/sass variable somewhere other than your regular js constants. Meaning your tool chain becomes dramatically reduced.

I've used vue-styled-components, and the majority of the functionality is there, but the support is not very active, and there's some functionality that still needs to be backported. I'd love to see the Vue team take the project on (assuming the creator was ok with it, of course) or come up with an official alternative implementation that achieves similar functionality.

[uptownhr]

Don't care too much for styled components but do like it's approach.

With that said being abled to have functional styles that render together with the component instance would be mind blowing and change the game of Vue components and provide an awesome customization interface for component makers.

<style functional>