Skip to content

Commit 94451d6

Browse files
romainmenkeromainmenke
authored
logical : border radius (#776)
* logical : border radius * fix * typescript...
1 parent a115d7b commit 94451d6

12 files changed

+87
-29
lines changed

‎plugins/postcss-logical/dist/index.cjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugins/postcss-logical/dist/index.mjs

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

‎plugins/postcss-logical/dist/lib/transform-borders.d.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { Declaration } from 'postcss';
2+
import { DirectionConfig } from './types';
23
export declare function transformBorder(borderSetting: string, side: string): (declaration: Declaration) => boolean;
34
export declare function transformBorderProperty(borderSetting: string, side: [string, string]): (declaration: Declaration) => boolean;
45
export declare function transformBorderShorthand(side: [string] | [string, string]): (declaration: Declaration) => boolean;
5-
export declare function transformBorderRadius(start: string, end: string): (declaration: Declaration) => boolean;
6+
export declare function transformBorderRadius(config: DirectionConfig): (declaration: Declaration) => boolean;

‎plugins/postcss-logical/src/index.ts

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -93,11 +93,6 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
9393
};
9494
};
9595

96-
// Only used for border-radius
97-
const textDirection: [Axes, Axes] = directionConfig.inlineIsHorizontal
98-
? [inlineStart, inlineEnd]
99-
: [Axes.Left, Axes.Right];
100-
10196
return {
10297
postcssPlugin: 'postcss-logical',
10398
Declaration: {
@@ -142,13 +137,13 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
142137
transformSideShorthand('margin', directionConfig.block),
143138
),
144139
'margin-inline': makeTransform(
145-
transformSideShorthand('margin', [inlineStart, inlineEnd]),
140+
transformSideShorthand('margin', directionConfig.inline),
146141
),
147142
// 4.3 Offsets
148143
'inset-block': makeTransform(transformOffsetShorthand(directionConfig.block)),
149144
'inset-block-start': makeTransform(transformOffset(blockStart)),
150145
'inset-block-end': makeTransform(transformOffset(blockEnd)),
151-
'inset-inline': makeTransform(transformOffsetShorthand([inlineStart, inlineEnd])),
146+
'inset-inline': makeTransform(transformOffsetShorthand(directionConfig.inline)),
152147
'inset-inline-start': makeTransform(transformOffset(inlineStart)),
153148
'inset-inline-end': makeTransform(transformOffset(inlineEnd)),
154149
'inset': makeTransform(transformInset()),
@@ -169,7 +164,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
169164
transformSideShorthand('padding', directionConfig.block),
170165
),
171166
'padding-inline': makeTransform(
172-
transformSideShorthand('padding', [inlineStart, inlineEnd]),
167+
transformSideShorthand('padding', directionConfig.inline),
173168
),
174169
// 4.5 Borders
175170
// 4.5.1 Border Width
@@ -250,16 +245,16 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
250245
),
251246
// 4.6 Border Radius
252247
'border-start-start-radius': makeTransform(
253-
transformBorderRadius(...textDirection),
248+
transformBorderRadius(directionConfig),
254249
),
255250
'border-start-end-radius': makeTransform(
256-
transformBorderRadius(...textDirection),
251+
transformBorderRadius(directionConfig),
257252
),
258253
'border-end-start-radius': makeTransform(
259-
transformBorderRadius(...textDirection),
254+
transformBorderRadius(directionConfig),
260255
),
261256
'border-end-end-radius': makeTransform(
262-
transformBorderRadius(...textDirection),
257+
transformBorderRadius(directionConfig),
263258
),
264259
},
265260
};

‎plugins/postcss-logical/src/lib/transform-borders.ts

Lines changed: 30 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Declaration } from 'postcss';
22
import { cloneDeclaration } from './clone-declaration';
33
import { parseValueCouple } from '../utils/parse-value-couple';
4+
import { DirectionConfig } from './types';
45

56
export function transformBorder(
67
borderSetting: string,
@@ -56,25 +57,44 @@ export function transformBorderShorthand(
5657
}
5758

5859
export function transformBorderRadius(
59-
start: string,
60-
end: string,
60+
config: DirectionConfig,
6161
): (declaration: Declaration) => boolean {
6262
return (declaration: Declaration) => {
6363
let prop;
6464

6565
switch (declaration.prop.toLowerCase()) {
66-
case 'border-start-start-radius':
67-
prop = `border-top-${start}-radius`;
66+
case 'border-start-start-radius': {
67+
const replacement = config.inlineIsHorizontal ?
68+
`${config.block[0]}-${config.inline[0]}` :
69+
`${config.inline[0]}-${config.block[0]}`;
70+
71+
prop = `border-${replacement}-radius`;
6872
break;
69-
case 'border-start-end-radius':
70-
prop = `border-top-${end}-radius`;
73+
}
74+
case 'border-start-end-radius': {
75+
const replacement = config.inlineIsHorizontal ?
76+
`${config.block[0]}-${config.inline[1]}` :
77+
`${config.inline[1]}-${config.block[0]}`;
78+
79+
prop = `border-${replacement}-radius`;
7180
break;
72-
case 'border-end-start-radius':
73-
prop = `border-bottom-${start}-radius`;
81+
}
82+
case 'border-end-start-radius': {
83+
const replacement = config.inlineIsHorizontal ?
84+
`${config.block[1]}-${config.inline[0]}` :
85+
`${config.inline[0]}-${config.block[1]}`;
86+
87+
prop = `border-${replacement}-radius`;
7488
break;
75-
case 'border-end-end-radius':
76-
prop = `border-bottom-${end}-radius`;
89+
}
90+
case 'border-end-end-radius': {
91+
const replacement = config.inlineIsHorizontal ?
92+
`${config.block[1]}-${config.inline[1]}` :
93+
`${config.inline[1]}-${config.block[1]}`;
94+
95+
prop = `border-${replacement}-radius`;
7796
break;
97+
}
7898
}
7999

80100
cloneDeclaration(

‎plugins/postcss-logical/test/abstract.bt.expect.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,10 @@
99
float: left;
1010
clear: right;
1111
}
12+
13+
.abstract {
14+
border-bottom-left-radius: block-start inline-start;
15+
border-bottom-right-radius: block-start inline-end;
16+
border-top-left-radius: block-end inline-start;
17+
border-top-right-radius: block-end inline-end;
18+
}

‎plugins/postcss-logical/test/abstract.chinese.expect.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,10 @@
99
float: inline-start;
1010
clear: inline-end;
1111
}
12+
13+
.abstract {
14+
border-top-right-radius: block-start inline-start;
15+
border-bottom-right-radius: block-start inline-end;
16+
border-top-left-radius: block-end inline-start;
17+
border-bottom-left-radius: block-end inline-end;
18+
}

‎plugins/postcss-logical/test/abstract.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,10 @@
99
float: inline-start;
1010
clear: inline-end;
1111
}
12+
13+
.abstract {
14+
border-start-start-radius: block-start inline-start;
15+
border-start-end-radius: block-start inline-end;
16+
border-end-start-radius: block-end inline-start;
17+
border-end-end-radius: block-end inline-end;
18+
}

‎plugins/postcss-logical/test/abstract.expect.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,10 @@
99
float: left;
1010
clear: right;
1111
}
12+
13+
.abstract {
14+
border-top-left-radius: block-start inline-start;
15+
border-top-right-radius: block-start inline-end;
16+
border-bottom-left-radius: block-end inline-start;
17+
border-bottom-right-radius: block-end inline-end;
18+
}

‎plugins/postcss-logical/test/abstract.rtl-and-bt.expect.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,10 @@
99
float: right;
1010
clear: left;
1111
}
12+
13+
.abstract {
14+
border-bottom-right-radius: block-start inline-start;
15+
border-bottom-left-radius: block-start inline-end;
16+
border-top-right-radius: block-end inline-start;
17+
border-top-left-radius: block-end inline-end;
18+
}

‎plugins/postcss-logical/test/abstract.rtl.expect.css

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,10 @@
99
float: right;
1010
clear: left;
1111
}
12+
13+
.abstract {
14+
border-top-right-radius: block-start inline-start;
15+
border-top-left-radius: block-start inline-end;
16+
border-bottom-right-radius: block-end inline-start;
17+
border-bottom-left-radius: block-end inline-end;
18+
}

‎plugins/postcss-logical/test/border.chinese.expect.css

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -126,8 +126,8 @@
126126
}
127127

128128
.border-radius {
129-
border-top-left-radius: 1px;
130-
border-top-right-radius: 2px;
131-
border-bottom-left-radius: 3px;
132-
border-bottom-right-radius: 4px;
129+
border-top-right-radius: 1px;
130+
border-bottom-right-radius: 2px;
131+
border-top-left-radius: 3px;
132+
border-bottom-left-radius: 4px;
133133
}

0 commit comments

Comments
 (0)