Skip to content

logical : border radius #776

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

Merged
merged 3 commits into from
Jan 10, 2023
Merged

logical : border radius #776

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
53759c7
logical : border radius
romainmenke Jan 10, 2023
df48f17
fix
romainmenke Jan 10, 2023
2e07ab0
typescript...
romainmenke Jan 10, 2023
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
2 changes: 1 addition & 1 deletion plugins/postcss-logical/dist/index.cjs
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion plugins/postcss-logical/dist/index.mjs
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion plugins/postcss-logical/dist/lib/transform-borders.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import type { Declaration } from 'postcss';
import { DirectionConfig } from './types';
export declare function transformBorder(borderSetting: string, side: string): (declaration: Declaration) => boolean;
export declare function transformBorderProperty(borderSetting: string, side: [string, string]): (declaration: Declaration) => boolean;
export declare function transformBorderShorthand(side: [string] | [string, string]): (declaration: Declaration) => boolean;
export declare function transformBorderRadius(start: string, end: string): (declaration: Declaration) => boolean;
export declare function transformBorderRadius(config: DirectionConfig): (declaration: Declaration) => boolean;
19 changes: 7 additions & 12 deletions plugins/postcss-logical/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,6 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
};
};

// Only used for border-radius
const textDirection: [Axes, Axes] = directionConfig.inlineIsHorizontal
? [inlineStart, inlineEnd]
: [Axes.Left, Axes.Right];

return {
postcssPlugin: 'postcss-logical',
Declaration: {
Expand Down Expand Up @@ -142,13 +137,13 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
transformSideShorthand('margin', directionConfig.block),
),
'margin-inline': makeTransform(
transformSideShorthand('margin', [inlineStart, inlineEnd]),
transformSideShorthand('margin', directionConfig.inline),
),
// 4.3 Offsets
'inset-block': makeTransform(transformOffsetShorthand(directionConfig.block)),
'inset-block-start': makeTransform(transformOffset(blockStart)),
'inset-block-end': makeTransform(transformOffset(blockEnd)),
'inset-inline': makeTransform(transformOffsetShorthand([inlineStart, inlineEnd])),
'inset-inline': makeTransform(transformOffsetShorthand(directionConfig.inline)),
'inset-inline-start': makeTransform(transformOffset(inlineStart)),
'inset-inline-end': makeTransform(transformOffset(inlineEnd)),
'inset': makeTransform(transformInset()),
Expand All @@ -169,7 +164,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
transformSideShorthand('padding', directionConfig.block),
),
'padding-inline': makeTransform(
transformSideShorthand('padding', [inlineStart, inlineEnd]),
transformSideShorthand('padding', directionConfig.inline),
),
// 4.5 Borders
// 4.5.1 Border Width
Expand Down Expand Up @@ -250,16 +245,16 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
),
// 4.6 Border Radius
'border-start-start-radius': makeTransform(
transformBorderRadius(...textDirection),
transformBorderRadius(directionConfig),
),
'border-start-end-radius': makeTransform(
transformBorderRadius(...textDirection),
transformBorderRadius(directionConfig),
),
'border-end-start-radius': makeTransform(
transformBorderRadius(...textDirection),
transformBorderRadius(directionConfig),
),
'border-end-end-radius': makeTransform(
transformBorderRadius(...textDirection),
transformBorderRadius(directionConfig),
),
},
};
Expand Down
40 changes: 30 additions & 10 deletions plugins/postcss-logical/src/lib/transform-borders.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import type { Declaration } from 'postcss';
import { cloneDeclaration } from './clone-declaration';
import { parseValueCouple } from '../utils/parse-value-couple';
import { DirectionConfig } from './types';

export function transformBorder(
borderSetting: string,
Expand Down Expand Up @@ -56,25 +57,44 @@ export function transformBorderShorthand(
}

export function transformBorderRadius(
start: string,
end: string,
config: DirectionConfig,
): (declaration: Declaration) => boolean {
return (declaration: Declaration) => {
let prop;

switch (declaration.prop.toLowerCase()) {
case 'border-start-start-radius':
prop = `border-top-${start}-radius`;
case 'border-start-start-radius': {
const replacement = config.inlineIsHorizontal ?
`${config.block[0]}-${config.inline[0]}` :
`${config.inline[0]}-${config.block[0]}`;
Comment on lines +68 to +69
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • First start is always block.
  • So we have to take the value at index 0 from config.block.
  • Second start is always inline.
  • So we have to take the value at index 0 from config.inline.

The result might be : left-bottom.
So we check if the orientation is different and inverse the parts if needed.


prop = `border-${replacement}-radius`;
break;
case 'border-start-end-radius':
prop = `border-top-${end}-radius`;
}
case 'border-start-end-radius': {
const replacement = config.inlineIsHorizontal ?
`${config.block[0]}-${config.inline[1]}` :
`${config.inline[1]}-${config.block[0]}`;
Comment on lines +76 to +77
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • First start is always block.
  • So we have to take the value at index 0 from config.block.
  • Second start is always inline.
  • So we have to take the value at index 1 from config.inline.

The result might be : left-bottom.
So we check if the orientation is different and inverse the parts if needed.


prop = `border-${replacement}-radius`;
break;
case 'border-end-start-radius':
prop = `border-bottom-${start}-radius`;
}
case 'border-end-start-radius': {
const replacement = config.inlineIsHorizontal ?
`${config.block[1]}-${config.inline[0]}` :
`${config.inline[0]}-${config.block[1]}`;

prop = `border-${replacement}-radius`;
break;
case 'border-end-end-radius':
prop = `border-bottom-${end}-radius`;
}
case 'border-end-end-radius': {
const replacement = config.inlineIsHorizontal ?
`${config.block[1]}-${config.inline[1]}` :
`${config.inline[1]}-${config.block[1]}`;

prop = `border-${replacement}-radius`;
break;
}
}

cloneDeclaration(
Expand Down
7 changes: 7 additions & 0 deletions plugins/postcss-logical/test/abstract.bt.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@
float: left;
clear: right;
}

.abstract {
border-bottom-left-radius: block-start inline-start;
border-bottom-right-radius: block-start inline-end;
border-top-left-radius: block-end inline-start;
border-top-right-radius: block-end inline-end;
}
7 changes: 7 additions & 0 deletions plugins/postcss-logical/test/abstract.chinese.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@
float: inline-start;
clear: inline-end;
}

.abstract {
border-top-right-radius: block-start inline-start;
border-bottom-right-radius: block-start inline-end;
border-top-left-radius: block-end inline-start;
border-bottom-left-radius: block-end inline-end;
}
7 changes: 7 additions & 0 deletions plugins/postcss-logical/test/abstract.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@
float: inline-start;
clear: inline-end;
}

.abstract {
border-start-start-radius: block-start inline-start;
border-start-end-radius: block-start inline-end;
border-end-start-radius: block-end inline-start;
border-end-end-radius: block-end inline-end;
}
7 changes: 7 additions & 0 deletions plugins/postcss-logical/test/abstract.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@
float: left;
clear: right;
}

.abstract {
border-top-left-radius: block-start inline-start;
border-top-right-radius: block-start inline-end;
border-bottom-left-radius: block-end inline-start;
border-bottom-right-radius: block-end inline-end;
}
7 changes: 7 additions & 0 deletions plugins/postcss-logical/test/abstract.rtl-and-bt.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@
float: right;
clear: left;
}

.abstract {
border-bottom-right-radius: block-start inline-start;
border-bottom-left-radius: block-start inline-end;
border-top-right-radius: block-end inline-start;
border-top-left-radius: block-end inline-end;
}
7 changes: 7 additions & 0 deletions plugins/postcss-logical/test/abstract.rtl.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,3 +9,10 @@
float: right;
clear: left;
}

.abstract {
border-top-right-radius: block-start inline-start;
border-top-left-radius: block-start inline-end;
border-bottom-right-radius: block-end inline-start;
border-bottom-left-radius: block-end inline-end;
}
8 changes: 4 additions & 4 deletions plugins/postcss-logical/test/border.chinese.expect.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,8 +126,8 @@
}

.border-radius {
border-top-left-radius: 1px;
border-top-right-radius: 2px;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 4px;
border-top-right-radius: 1px;
border-bottom-right-radius: 2px;
border-top-left-radius: 3px;
border-bottom-left-radius: 4px;
}