[experiment] Inline styles
- Dominant language
- JavaScript
- Stars
- 10.3k
- Forks
- 481
- Avg merge
- 3d 8h
- Merged PRs (30d)
- 13
Description
As being discussed in #1355, the current idea is to create a new `@stylexjs/inline-css` package (naming TBD) which will export css properties to be used directly. You can think of them as a collection of utility namespaces with a single style declaration.
Conceptually, this will not add any new API or syntax and will instead work similarly to importing styles from a different file and using them. However, it would be optimized by the compiler to be as efficient as styles defined locally. These utility namespaces can be used inline like so:
```tsx
import stylex, {s} from '@stylexjs/stylex';
```
The inline-styles package would export every valid CSS property, but unlike tools like Tailwind, this would not be a "design system". Instead, you'd use actual CSS property names and valid CSS properties with autocomplete support. Additionally:
A leading underscore will be ignored so it is convenient to use values that start with numbers. i.e. _16px === "16px"
The normal JS syntax with ["..."] can be used for more complex values that can contain spaces etc.
Dynamic styles will require calling the property name like a function: _.color(someColorValue).
- A separate, explicit syntax for dynamic styles ensures that you won't accidentally make static styles dynamic.
---
Contextual styles are an open question, but we could do something like this:
```tsx
import * as stylex from '@stylexjs/stylex';
import s from '@stylex/atoms';
---
const MOBILE = '@media (max-width: 768px)';
```
---
Overall, the goal of this experiment is not to change the core experience of using StyleX. The idea is to open the door for users to write their own transforms on top of stylex syntax. `stylex.create` is still our recommended API in most cases since it leads to more readable and maintainable styles. However, inline styles can fill the gap for smaller cases where `stylex.create` may feel too heavy and burdensome.
Contributor guide
Assessment
This issue has not been assessed yet.