Skip to content

Commit

Permalink
Tailwind-like props for margin and padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@vadimdemedes
vadimdemedes committed May 2, 2023
1 parent 8a04760 commit ad7a9a5
Show file tree
Hide file tree
Showing 3 changed files with 264 additions and 29 deletions.
141 changes: 112 additions & 29 deletions src/styles.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* eslint-disable @typescript-eslint/prefer-nullish-coalescing */
import {type Boxes, type BoxStyle} from 'cli-boxes';
import {type LiteralUnion} from 'type-fest';
import {type ForegroundColorName} from 'chalk';
Expand Down Expand Up @@ -37,71 +36,155 @@ export type Styles = {
*/
readonly margin?: number;

/**
* Margin on all sides.
* Shorthand for `margin`.
*/
readonly m?: number;

/**
* Horizontal margin. Equivalent to setting `marginLeft` and `marginRight`.
*/
readonly marginX?: number;

/**
* Horizontal margin.
* Shorthand for `marginX`.
*/
readonly mx?: number;

/**
* Vertical margin. Equivalent to setting `marginTop` and `marginBottom`.
*/
readonly marginY?: number;

/**
* Vertical margin.
* Shorthand for `marginY`.
*/
readonly my?: number;

/**
* Top margin.
*/
readonly marginTop?: number;

/**
* Top margin.
* Shorthand for `marginTop`.
*/
readonly mt?: number;

/**
* Bottom margin.
*/
readonly marginBottom?: number;

/**
* Bottom margin.
* Shorthand for `marginBottom`.
*/
readonly mb?: number;

/**
* Left margin.
*/
readonly marginLeft?: number;

/**
* Left margin.
* Shorthand for `marginLeft`.
*/
readonly ml?: number;

/**
* Right margin.
*/
readonly marginRight?: number;

/**
* Right margin.
* Shorthand for `marginRight`.
*/
readonly mr?: number;

/**
* Padding on all sides. Equivalent to setting `paddingTop`, `paddingBottom`, `paddingLeft` and `paddingRight`.
*/
readonly padding?: number;

/**
* Padding on all sides.
* Shorthand for `padding`.
*/
readonly p?: number;

/**
* Horizontal padding. Equivalent to setting `paddingLeft` and `paddingRight`.
*/
readonly paddingX?: number;

/**
* Horizontal padding.
* Shorthand for `paddingX`.
*/
readonly px?: number;

/**
* Vertical padding. Equivalent to setting `paddingTop` and `paddingBottom`.
*/
readonly paddingY?: number;

/**
* Vertical padding.
* Shorthand for `paddingY`.
*/
readonly py?: number;

/**
* Top padding.
*/
readonly paddingTop?: number;

/**
* Top padding.
* Shorthand for `paddingTop`.
*/
readonly pt?: number;

/**
* Bottom padding.
*/
readonly paddingBottom?: number;

/**
* Bottom padding.
* Shorthand for `paddingBottom`.
*/
readonly pb?: number;

/**
* Left padding.
*/
readonly paddingLeft?: number;

/**
* Left padding.
* Shorthand for `paddingLeft`.
*/
readonly pl?: number;

/**
* Right padding.
*/
readonly paddingRight?: number;

/**
* Right padding.
* Shorthand for `paddingRight`.
*/
readonly pr?: number;

/**
* This property defines the ability for a flex item to grow if necessary.
* See [flex-grow](https://css-tricks.com/almanac/properties/f/flex-grow/).
Expand Down Expand Up @@ -315,62 +398,62 @@ const applyPositionStyles = (node: YogaNode, style: Styles): void => {
};

const applyMarginStyles = (node: YogaNode, style: Styles): void => {
if ('margin' in style) {
node.setMargin(Yoga.EDGE_ALL, style.margin ?? 0);
if ('margin' in style || 'm' in style) {
node.setMargin(Yoga.EDGE_ALL, style.margin ?? style.m ?? 0);
}

if ('marginX' in style) {
node.setMargin(Yoga.EDGE_HORIZONTAL, style.marginX ?? 0);
if ('marginX' in style || 'mx' in style) {
node.setMargin(Yoga.EDGE_HORIZONTAL, style.marginX ?? style.mx ?? 0);
}

if ('marginY' in style) {
node.setMargin(Yoga.EDGE_VERTICAL, style.marginY ?? 0);
if ('marginY' in style || 'my' in style) {
node.setMargin(Yoga.EDGE_VERTICAL, style.marginY ?? style.my ?? 0);
}

if ('marginLeft' in style) {
node.setMargin(Yoga.EDGE_START, style.marginLeft || 0);
if ('marginLeft' in style || 'ml' in style) {
node.setMargin(Yoga.EDGE_START, style.marginLeft ?? style.ml ?? 0);
}

if ('marginRight' in style) {
node.setMargin(Yoga.EDGE_END, style.marginRight || 0);
if ('marginRight' in style || 'mr' in style) {
node.setMargin(Yoga.EDGE_END, style.marginRight ?? style.mr ?? 0);
}

if ('marginTop' in style) {
node.setMargin(Yoga.EDGE_TOP, style.marginTop || 0);
if ('marginTop' in style || 'mt' in style) {
node.setMargin(Yoga.EDGE_TOP, style.marginTop ?? style.mt ?? 0);
}

if ('marginBottom' in style) {
node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom || 0);
if ('marginBottom' in style || 'mb' in style) {
node.setMargin(Yoga.EDGE_BOTTOM, style.marginBottom ?? style.mb ?? 0);
}
};

const applyPaddingStyles = (node: YogaNode, style: Styles): void => {
if ('padding' in style) {
node.setPadding(Yoga.EDGE_ALL, style.padding ?? 0);
if ('padding' in style || 'p' in style) {
node.setPadding(Yoga.EDGE_ALL, style.padding ?? style.p ?? 0);
}

if ('paddingX' in style) {
node.setPadding(Yoga.EDGE_HORIZONTAL, style.paddingX ?? 0);
if ('paddingX' in style || 'px' in style) {
node.setPadding(Yoga.EDGE_HORIZONTAL, style.paddingX ?? style.px ?? 0);
}

if ('paddingY' in style) {
node.setPadding(Yoga.EDGE_VERTICAL, style.paddingY ?? 0);
if ('paddingY' in style || 'py' in style) {
node.setPadding(Yoga.EDGE_VERTICAL, style.paddingY ?? style.py ?? 0);
}

if ('paddingLeft' in style) {
node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft || 0);
if ('paddingLeft' in style || 'pl' in style) {
node.setPadding(Yoga.EDGE_LEFT, style.paddingLeft ?? style.pl ?? 0);
}

if ('paddingRight' in style) {
node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight || 0);
if ('paddingRight' in style || 'pr' in style) {
node.setPadding(Yoga.EDGE_RIGHT, style.paddingRight ?? style.pr ?? 0);
}

if ('paddingTop' in style) {
node.setPadding(Yoga.EDGE_TOP, style.paddingTop || 0);
if ('paddingTop' in style || 'pt' in style) {
node.setPadding(Yoga.EDGE_TOP, style.paddingTop ?? style.pt ?? 0);
}

if ('paddingBottom' in style) {
node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom || 0);
if ('paddingBottom' in style || 'pb' in style) {
node.setPadding(Yoga.EDGE_BOTTOM, style.paddingBottom ?? style.pb ?? 0);
}
};

Expand Down
76 changes: 76 additions & 0 deletions test/margin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,16 @@ test('margin', t => {
t.is(output, '\n\n X\n\n');
});

test('margin shorthand', t => {
const output = renderToString(
<Box m={2}>
<Text>X</Text>
</Box>
);

t.is(output, '\n\n X\n\n');
});

test('margin X', t => {
const output = renderToString(
<Box>
Expand All @@ -26,6 +36,19 @@ test('margin X', t => {
t.is(output, ' X Y');
});

test('margin X shorthand', t => {
const output = renderToString(
<Box>
<Box mx={2}>
<Text>X</Text>
</Box>
<Text>Y</Text>
</Box>
);

t.is(output, ' X Y');
});

test('margin Y', t => {
const output = renderToString(
<Box marginY={2}>
Expand All @@ -36,6 +59,16 @@ test('margin Y', t => {
t.is(output, '\n\nX\n\n');
});

test('margin Y shorthand', t => {
const output = renderToString(
<Box my={2}>
<Text>X</Text>
</Box>
);

t.is(output, '\n\nX\n\n');
});

test('margin top', t => {
const output = renderToString(
<Box marginTop={2}>
Expand All @@ -46,6 +79,16 @@ test('margin top', t => {
t.is(output, '\n\nX');
});

test('margin top shorthand', t => {
const output = renderToString(
<Box mt={2}>
<Text>X</Text>
</Box>
);

t.is(output, '\n\nX');
});

test('margin bottom', t => {
const output = renderToString(
<Box marginBottom={2}>
Expand All @@ -56,6 +99,16 @@ test('margin bottom', t => {
t.is(output, 'X\n\n');
});

test('margin bottom shorthand', t => {
const output = renderToString(
<Box mb={2}>
<Text>X</Text>
</Box>
);

t.is(output, 'X\n\n');
});

test('margin left', t => {
const output = renderToString(
<Box marginLeft={2}>
Expand All @@ -66,6 +119,16 @@ test('margin left', t => {
t.is(output, ' X');
});

test('margin left shorthand', t => {
const output = renderToString(
<Box ml={2}>
<Text>X</Text>
</Box>
);

t.is(output, ' X');
});

test('margin right', t => {
const output = renderToString(
<Box>
Expand All @@ -79,6 +142,19 @@ test('margin right', t => {
t.is(output, 'X Y');
});

test('margin right shorthand', t => {
const output = renderToString(
<Box>
<Box mr={2}>
<Text>X</Text>
</Box>
<Text>Y</Text>
</Box>
);

t.is(output, 'X Y');
});

test('nested margin', t => {
const output = renderToString(
<Box margin={2}>
Expand Down

0 comments on commit ad7a9a5

Please sign in to comment.