callstack / callstack/linaria

Add support for JS notation styles to styled API

Open
#1,220 1 comment 0 reactions 0 assignees View on GitHub
feature: proposal 💬 good first issue 😊 needs: triage 🏷
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

## Describe the feature

Currently the `styled` API accepts literal tagged template literals which accepts CSS naming scheme for styles.

I think we could also extend the API to accept valid CSS styles in JavaScript notation too!

## Motivation
1. React Native devs would appreciate it.
2. Some people like styling in JS way.
3. More options for people to choose.

## Possible implementations

Something similar to how emotion does,

```
const StyledHeading = styled('h1')(() => ({
fontSize: '24px'
});
```

`props` or `theme` from a `ThemeProvider` can be passed to the callback function for easy access.

```
const StyledHeading = styled('h1')(({ theme, color }) => ({
fontSize: '24px',
...( color && { color })
});
```

## Related Issues

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.