Open egoist opened 5 years ago
Maybe you can just do something like that?
data: { activeClass: css
color: green;, errorClass: css
color: red;`
}
` I don't know if that works but should be. https://vuejs.org/v2/guide/class-and-style.html#ad
@eatsjobs sure we can do that, but I mean the styled
component support.
Yeah I understood. but I don't think it's in the 1.0 roadmap so I don't think you can have it soon
why though 😂 it isn't hard right? just allow the babel plugin to transform styled
that's imported from other libs.
@egoist We are happy to accept a PR with Vue support, we are fine with both integrating Vue inside linaria itself (linaria/vue
) or changing the mentioned code. The third option is to add linaria/vue
file which will require and export vue-linaria
.
@egoist are you working on this?
@vinicius73 No but I made https://github.com/egoist/styled-vue which is pretty much linaria for Vue a while ago
In case it's interesting for you, I had a Nuxt module lying around for some time integrating Linaria. I open-sourced it in case it's interesting for someone. It works for JSX, and you can pass the generated class to a Vue template, but it's not possible to directly call the css
literal in the template.
Install it via npm install nuxt-linaria
.
Then add it to your Nuxt config:
// nuxt.config.js
export default {
modules: [
'nuxt-linaria',
],
}
Usage with JSX:
<script>
import { css } from 'linaria'
export default {
render: h => <div class={css`background: red`}>Hello world</div>,
}
</script>
Usage within a template:
<template>
<div :class="style">Hello world</div>
</template>
<script>
import { css } from 'linaria'
export default {
computed: {
style: () => css\`background: red\`,
},
}
</script>
Let me know if this is helpful.
Do you want to request a feature or report a bug? feature
What is the current behavior? There's only
styled
for React, I'm trying to work on a Vue.js integration but https://github.com/callstack/linaria/blob/a1d1b5a2f621ba50d986d97b96ff32f33e9a1106/src/babel/extract.js#L99-L109 makes it impossibleSolutions
styled
from other modules likevue-linaria
linaria/vue
😅