https://github.com/xcfox/emotion-sugar

🍭 A set of pleasant utilities for emotion
https://github.com/xcfox/emotion-sugar

atomic-css css css-in-js emotion react utility-first

Last synced: 9 months ago
JSON representation

🍭 A set of pleasant utilities for emotion

• Host: GitHub
• URL: https://github.com/xcfox/emotion-sugar
• Owner: xcfox
• License: mit
• Created: 2022-04-26T17:30:37.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-04-14T09:45:07.000Z (almost 3 years ago)
• Last Synced: 2025-06-21T06:36:32.344Z (10 months ago)
• Topics: atomic-css, css, css-in-js, emotion, react, utility-first
• Language: TypeScript
• Homepage:
• Size: 590 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Emotion Sugar

🍭 A set of pleasant utilities for emotion

[![License](https://img.shields.io/npm/l/emotion-sugar.svg)](https://github.com/xcfox/emotion-sugar/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/v/emotion-sugar.svg)](https://www.npmjs.com/package/emotion-sugar)

[![NPM Downloads](https://img.shields.io/npm/dm/emotion-sugar.svg?style=flat)](https://www.npmjs.com/package/emotion-sugar)

[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)

[Emotion](https://github.com/emotion-js/emotion) is a performant and flexible CSS-in-JS library.  

This Library provides a set of utilities for emotion, or rather, it makes emotion utility-first.

## 🧋 Let's make emotion more delight

Write style with emotion:

```tsx

import { css, jsx } from '@emotion/react'

const color = 'white'

render(

  


    Hover to change color.

  

)

```


Write style with emotion and add some sugar:

```tsx

import { jsx } from '@emotion/react'

import { p, color } from 'emotion-sugar'

const textColor = 'white'

render(

  


    Hover to change color.

  

)

```


## 🌠 Features

**🧩 Seamless integration with emotion：** Use it in existing emotion projects as you like.  

**🛡️ Typed:** Full support for TypeScript  

**🍸 Less code:** It is far less code than native css  

**🍩 Flex tooltips:** Let's make a flex container by intuition

## 🔧 Install

use yarn:

```sh

yarn add @emotion/react emotion-sugar

```

or use npm:

```sh

npm i @emotion/react emotion-sugar

```