can we get a more ergonomic api for devx coming from styled components / emotion #1210
Description
Describe the feature request
hey guys im coming from emotion and i HATE tailwind because it clutters my jsx !!! i love having a readable jsx and im a big fan of css in js.
stylex is almost perfect for everything i want. plus if it's good enough for figma it's good enough for me xD
can you guys please consider a slightly more ergonomic api like the styled api ?
otherwise do you recommend writing a wrapper like this ?
// sx-elements.tsx
import * as React from 'react';
import * as stylex from '@stylexjs/stylex';
// allow sx as a single rule or an array
const toArr = (x: any) => (Array.isArray(x) ? x : x ? [x] : []);
function make<T extends keyof JSX.IntrinsicElements>(tag: T) {
type Props = JSX.IntrinsicElements[T] & { sx?: any | any[] };
return React.forwardRef<any, Props>(({ sx, className, style, ...rest }, ref) => {
const out = sx ? stylex.props(...toArr(sx)) : undefined;
const mergedClass =
[out?.className, className].filter(Boolean).join(' ') || undefined;
const mergedStyle = out?.style ? { ...out.style, ...style } : style;
return React.createElement(tag, {
ref,
className: mergedClass,
style: mergedStyle,
...rest,
});
});
}
// Export the tags
export const Div = make('div');
export const Span = make('span');
export const Button = make('button');
// ...add others as neededimport { Div, Button } from './sx-elements';
import * as stylex from '@stylexjs/stylex';
const styles = stylex.create({
base: { padding: 12, borderRadius: 8 },
blue: { backgroundColor: 'dodgerblue', color: 'white' },
gray: { backgroundColor: '#eee', color: '#111' },
btn: { fontWeight: 600, paddingInline: 14, paddingBlock: 8 },
primary: { backgroundColor: 'black', color: 'white' },
});
export function Card() {
const isBlue = true;
return (
<Div sx={[styles.base, isBlue && styles.blue]}>
Hello
<Button sx={[styles.btn, styles.primary]}>Go</Button>
</Div>
);
}just would like to get some guidance here i dont really want to litter my jsx with ...stylex.props everywhere
is there a 3rd part library you recommend to do this for me ?
found this on that seems related: #332