callstack / callstack/linaria

Linaria - More aggressive output.

Open
#532 25 comments 5 reactions 1 assignee Claimed by @Anber View on GitHub
babel-plugin feature: proposal 💬
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

## Describe the feature
Let me just start by saying, love linaria; Huge fan. A journey of my own for incredibly aggressive tree shaking has lead me to this feature request.

It simple.
Take all of these...
```
const Btn = styled.button`
color: red;
`;

const Button = () => {
return (
I am a button
)
}
```
And instead of outputting
```
const Btn = styled.button({
class: "asdsadas",
name: "Btn
})require("whatever.css");
const Button = () => {
return (
I am a button
)
}
```
Change the output to.....
```
require("whatever.css");
const Button = () => {
return (
I am a button
)
}
```
## Motivation
- No extra call to linarias styled.button
- No need for that 1.8KB runtime? i think i haven't really checked just skim read source.
- No evergrowing bundle size relative to the amount of components you have.
- If speed is an issue just swap between depending on dev/production
- If Button already has a className implemented just merge the two in the build step with cx
- Can do same with `css`

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.