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