callstack / callstack/linaria

Consider leverage css layers to control rule priorities.

Open
#993 2 comments 3 reactions 0 assignees View on GitHub
enhancement: proposal 💬 needs: triage 🏷
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

## Describe the enhancement

Inspired from https://github.com/unocss/unocss#layers

linaria.config.js
```
module.exports = {
layers: ["utility", "component", "application"],
defaultLayer: "application"
}
```

Add optional options argument which can be used to pass `layer` option to `css` function.
```typescript
function Button(props: { className?: string; children?: ReactNode }) {
return (

{props.children}

);
}

function App() {
return (

);
}

```

Output rules with care of layers order, except that in development environment could just simply rely on browser's native css layers feature.

## Motivation

The `cx` function of`@linaria/atomic` has high runtime overhead.

## Possible implementations

## 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.