babel-plugin-emotion

WebJar for babel-plugin-emotion

License	License MIT
GroupId	GroupId org.webjars.npm
ArtifactId	ArtifactId babel-plugin-emotion
Last Version	Last Version 10.0.15
Release Date	Release Date Aug 4, 2019
Type	Type jar
Description	Description babel-plugin-emotion WebJar for babel-plugin-emotion
Project URL	Project URL http://webjars.org
Source Code Management	Source Code Management https://github.com/emotion-js/emotion

Download babel-plugin-emotion

Filename	Size
babel-plugin-emotion-10.0.15.pom
babel-plugin-emotion-10.0.15.jar	43 KB
babel-plugin-emotion-10.0.15-sources.jar	22 bytes
babel-plugin-emotion-10.0.15-javadoc.jar	22 bytes
Browse

How to add to project

Apache Maven

<!-- https://jarcasting.com/artifacts/org.webjars.npm/babel-plugin-emotion/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>babel-plugin-emotion</artifactId>
    <version>10.0.15</version>
</dependency>

Gradle Groovy

// https://jarcasting.com/artifacts/org.webjars.npm/babel-plugin-emotion/
implementation 'org.webjars.npm:babel-plugin-emotion:10.0.15'

Gradle Kotlin

// https://jarcasting.com/artifacts/org.webjars.npm/babel-plugin-emotion/
implementation ("org.webjars.npm:babel-plugin-emotion:10.0.15")

Apache Buildr

'org.webjars.npm:babel-plugin-emotion:jar:10.0.15'

Apache Ivy

<dependency org="org.webjars.npm" name="babel-plugin-emotion" rev="10.0.15">
  <artifact name="babel-plugin-emotion" type="jar" />
</dependency>

Groovy Grape

@Grapes(
@Grab(group='org.webjars.npm', module='babel-plugin-emotion', version='10.0.15')
)

Scala SBT

libraryDependencies += "org.webjars.npm" % "babel-plugin-emotion" % "10.0.15"

Leiningen

[org.webjars.npm/babel-plugin-emotion "10.0.15"]

Dependencies

compile (10)

Group / Artifact	Type	Version
org.webjars.npm : find-root	jar	[1.1.0,2)
org.webjars.npm : babel-plugin-macros	jar	[2.0.0,3)
org.webjars.npm : source-map	jar	[0.5.7,0.6)
org.webjars.npm : emotion__serialize	jar	[0.11.9,0.12)
org.webjars.npm : babel-plugin-syntax-jsx	jar	[6.18.0,7)
org.webjars.npm : emotion__hash	jar	[0.7.2]
org.webjars.npm : escape-string-regexp	jar	[1.0.5,2)
org.webjars.npm : babel__helper-module-imports	jar	[7.0.0,8)
org.webjars.npm : emotion__memoize	jar	[0.7.2]
org.webjars.npm : convert-source-map	jar	[1.5.0,2)

Project Modules

There are no modules declared in this project.

emotion

The Next Generation of CSS-in-JS

Emotion 11 has been released 🚀 See the blog post

Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.

👀 Demo Sandbox

📖 Docs

Frequently viewed docs:

Quick Start

Get up and running with a single import.

npm install --save @emotion/react

/** @jsx jsx */
import { jsx } from '@emotion/react'

let SomeComponent = props => {
  return (
    <div
      css={{
        color: 'hotpink'
      }}
      {...props}
    />
  )
}

Do I Need To Use the Babel Plugin?

The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.

Look here 👉 emotion babel plugin feature table and documentation

Demo Sandbox

Demo Code Sandbox

Examples

emotion website [Demo Here]
next-hnpwa-guide-kit [Demo Here]
reactivesearch, a react UI library for Elasticsearch [Website]
circuit-ui, a react component library built at SumUp [Storybook]
open a PR and add yours!

Ecosystem

stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
facepaint
emotion-vue
nuxt-community/emotion-module - Emotion module for Nuxt.js
ember-emotion
CSS to emotion transform
ShevyJS
design-system-utils - Utilities to give better access to your design system.
polished - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.
monad-ui - Utility First CSS-In-JS
css-in-js-media - you can deal with responsive design using css-in-js easily with this css-in-js-media which is similar with include-media
emotion-native-extended - Better styling support for Emotion Native with React Native Extended Stylesheet