facebook / facebook/stylex

[feature] `stylex.env` to provide constants and utility functions to StyleX

Open
#1,358 0 comments 5 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
10.3k
Forks
481
Avg merge
3d 8h
Merged PRs (30d)
13

Description

## Inspiration

`process.env` is used for environment variables which are essentially constants.

`stylex.env` should work similarly. It should be possible to provide constants to the babel as configuration which will be inlined during compilation, before other stylex transforms.

This would lead to a zero cost way to have shareable constants and even utility functions.

---

We are also considering another API to allow configuring entire packages as "constant providers" in #1355. We could start off by offering our own package of utilities:

```tsx
import * as stylex from '@stylexjs/stylex';
import {opacity, colorMix} from '@stylex/utils';
import {vars} from './myTheme.stylex';

const styles = stylex.create({
button: {
backgroundColor: colorMix(vars.accent, 'black', 0.2), // === `color-mix(${vars.accent} 20%, black)`
boxShadow: `0 4px 4px 2px ${opacity(vars.accent, 0.35)}` // === `0 4px 4px 2px color-mix(${vars.accent} 35%, transparent)`,

}
});
```

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.