elemental-design / elemental-design/elemental-react

Standardise around Yoga CSS and styled-system API

Open
#22 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
22
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Support 100% of Yoga CSS API.

Support `styled-system` aliases with proposed system:

```js
const useStyles = (styles) => {
return useMemo(() => {
const parsedStyles = parseStyles(styles);
return StyleSheet.create(parsedStyles);
}, styles);
};

const filterStyles = props => props.filter(prop => ['backgroundColor, 'color, 'fontSize'].includes(prop);
const filterProps = props => props.filter(prop => !['backgroundColor, 'color, 'fontSize'].includes(prop);

const Box = (props) => {
const styles = filterStyles(props);
const style = useStyles(styles);

return ;
};
```

```js
const mapping = {
bg: backgroundColor,
p: padding,
pt: paddingTop,
pb: paddingBottom,
pl: paddingLeft,
pr: paddingRight,
m: margin,
mt: marginTop,
mb: marginBottom
// ...
};

const parseStylesheet = (styles) => {
const parsedStyles = {};

Object.entries(styles).forEach(([att, val]) => {
if (mapping[att]) {
parsedStyles[mapping[att]] = val;
}
});

return parsedStyles;
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.