GitHub - egoist/vue-emotion: Seamlessly use emotion (CSS-in-JS) with Vue.js (original) (raw)
vue-emotion
emotion is the Next Generation of CSS-in-JS.
Install
yarn add @egoist/vue-emotion
Table of Contents
Usage
Use 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 (
Refer to https://emotion.sh for more docs.
Theming
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 Hello
}
})
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.
Global styles
Server-side rendering
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)
//
Caveats
Component selector doesn't work (yet)
const Container = styled.div ${Button} { color: red; }
Contributing
- 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
Author
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