egoist / Vue Emotion
Licence: mit
Seamlessly use emotion (CSS-in-JS) with Vue.js
Stars: â 173
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vue Emotion
Facepaint
Responsive style values for css-in-js.
Stars: â 523 (+202.31%)
Mutual labels: css-in-js, emotion
Emotion Module
đ Emotion module for Nuxt.js
Stars: â 47 (-72.83%)
Mutual labels: css-in-js, emotion
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: â 761 (+339.88%)
Mutual labels: css-in-js, emotion
Twin.macro
đŠčââïž Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: â 5,137 (+2869.36%)
Mutual labels: css-in-js, emotion
Css In React
đ CSS in React - Learn the best CSS in JS frameworks by example
Stars: â 101 (-41.62%)
Mutual labels: css-in-js, emotion
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. đ
Stars: â 428 (+147.4%)
Mutual labels: css-in-js, emotion
React Next Boilerplate
đ A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: â 129 (-25.43%)
Mutual labels: css-in-js, emotion
react-awesome-reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: â 564 (+226.01%)
Mutual labels: emotion, css-in-js
Onno
Responsive style props for building themed design systems
Stars: â 95 (-45.09%)
Mutual labels: css-in-js, emotion
Horror
đ± React HTML elements with CSS-in-JS
Stars: â 78 (-54.91%)
Mutual labels: css-in-js, emotion
Next Dark Mode
đ Enable dark mode for Next.js apps
Stars: â 133 (-23.12%)
Mutual labels: css-in-js, emotion
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: â 167 (-3.47%)
Mutual labels: css-in-js, emotion
React Awesome Reveal
React components to add reveal animations using the Intersection Observer API and CSS Animations.
Stars: â 346 (+100%)
Mutual labels: css-in-js, emotion
Design System Utils
đ©âđš Access your design tokens with ease
Stars: â 465 (+168.79%)
Mutual labels: css-in-js, emotion
satchel
The little bag of CSS-in-JS superpowers
Stars: â 14 (-91.91%)
Mutual labels: emotion, css-in-js
Styled System
⏹ Style props for rapid UI development
Stars: â 7,126 (+4019.08%)
Mutual labels: css-in-js, emotion
benefit
âš Utility CSS-in-JS library that provides a set of low-level, configurable, ready-to-use styles
Stars: â 51 (-70.52%)
Mutual labels: emotion, css-in-js
Flame
Component library for building Lightspeed products
Stars: â 65 (-62.43%)
Mutual labels: css-in-js, emotion
Xstyled
A utility-first CSS-in-JS framework built for React. đ
đ©âđ€âĄïž
Stars: â 1,835 (+960.69%)
Mutual labels: css-in-js, emotion
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 (
<div>
<Button>normal button</Button>
<PinkButton>pink button</PinkButton>
</div>
)
}
})
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 <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.
Global styles
<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>
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)
// <style>...</style>
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].