cssinjs / cssinjs/jss

Create css function

Open
#747 0 comments 6 reactions 0 assignees View on GitHub
complexity:high feature request
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

An interface similar to [glamor](https://github.com/threepointone/glamor) that allows to use objects and strings would be a good fit for many people.

Benefits:
- known interface, since supported by many other cssinjs libraries
- [syntax highlighting](https://github.com/cssinjs/jss/issues/591#issuecomment-402826872)
- single style sheet mode (simpler for the user)

```js
// Using objects
const className = css({color: 'red'})
```

```js
// Using templates
const className = css`color: red;`
```

## Todo

- [x] basic css function accepting style objects
- [x] composition of previously returned values from css()
- [ ] add style sheet splitting logic after a certain size
- [ ] create a babel plugin which can generate a unique id and inline it into the style object
- so that we don't generate more rules when user passes a new ref frequently
- we have no need to JSON.stringify the object to check the cache

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.