Skip to content

Correct README examples to match current output #213

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
quantizor wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Correct README examples to match current output #213

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0177684
docs: correct README examples to match current output
quantizor Oct 29, 2026
d6e3b78
docs: list font and flex-flow keys in return order
quantizor Oct 29, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 9 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ transform: translate(10px, 5px) scale(5);
{
textShadowOffset: { width: 10, height: 5 },
fontVariant: ['small-caps'],
// Fixes backwards transform order
// The list is reversed from the CSS source order: each function is prepended.
transform: [
{ scale: 5 },
{ translateY: 5 },
{ translateX: 10 },
{ scale: 5 },
]
}
```
Expand All @@ -50,11 +50,11 @@ margin: 5px 7px 2px;

```js
{
fontFamily: 'Helvetica',
fontSize: 14,
fontWeight: 'bold',
fontStyle: 'normal',
fontWeight: 'bold',
fontVariant: [],
fontSize: 14,
fontFamily: 'Helvetica',
lineHeight: 16,
marginTop: 5,
marginRight: 7,
Expand Down Expand Up @@ -100,8 +100,8 @@ following shorthand and special-case transforms:
| `border-radius` | `borderTopLeftRadius`, `borderTopRightRadius`, `borderBottomRightRadius`, `borderBottomLeftRadius` |
| `border-width` | `borderTopWidth`, `borderRightWidth`, `borderBottomWidth`, `borderLeftWidth` |
| `flex` | `flexGrow`, `flexShrink`, `flexBasis` |
| `flex-flow` | `flexDirection`, `flexWrap` |
| `font` | `fontStyle`, `fontWeight`, `fontVariant`, `fontSize`, `lineHeight`, `fontFamily` |
| `flex-flow` | `flexWrap`, `flexDirection` |
| `font` | `fontStyle`, `fontWeight`, `fontVariant`, `fontSize`, `fontFamily`, `lineHeight` |
| `font-family` | `fontFamily` |
| `font-variant` | `fontVariant` |
| `font-weight` | `fontWeight` |
Expand Down Expand Up @@ -158,7 +158,8 @@ Should you wish to opt-out of transforming certain shorthands, an array of prope

```js
transform([['border-radius', '50px']], ['borderRadius']);
// { borderRadius: 50 } rather than { borderTopLeft: ... }
// { borderRadius: 50 } rather than
// { borderTopLeftRadius: 50, borderTopRightRadius: 50, borderBottomRightRadius: 50, borderBottomLeftRadius: 50 }
```

This can also be done by passing a third argument, `false` to `getStylesForProperty`.
Expand Down
Loading