emotion is the Next Generation of CSS-in-JS.
yarn add @egoist/vue-emotionUse the plugin:
import { VueEmotion } from '@egoist/vue-emotion'
Vue.use(VueEmotion)Create your styled component:
import { styled } from '@egoist/vue-emotion'
const Button = styled('button')`
font-size: 15px;
`
const PinkButton = styled(Button)`
color: hotpink;
`
new Vue({
render() {
return (
<div>
<Button>normal button</Button>
<PinkButton>pink button</PinkButton>
</div>
)
}
})Refer to https://emotion.sh for more docs.
Using provide/inject:
new Vue({
provide() {
return {
theme: this.theme
}
},
data() {
return {
theme: 'dark'
}
},
render() {
const Button = styled('button')`
color: ${props => (props.theme === 'dark' ? 'white' : 'black')};
`
return <Button>Hello</Button>
}
})I do know that provide/inject is NOT recommended in generic application code, but before we find a better solution, use it as a work-around.
<template>
<div id="app">
<GlobalStyle />
<!-- rest of your app -->
</div>
</template>
<script>
import { createGlobalStyle } from '@egoist/vue-emotion'
const GlobalStyle = createGlobalStyle`
body {
background: red;
}
`
export default {
components: {
GlobalStyle
}
}
</script>You can extract critical CSS like this during server-side rendering:
const { renderStyle } = require('@egoist/vue-emotion/server')
// `cache` is the $emotionCache property on your Vue app instance
// `html` is the rendered HTML by vue-server-renderer
const style = renderStyle(cache, html)
// <style>...</style>const Container = styled.div`
${Button} {
color: red;
}
`- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
vue-emotion © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily
