Skip to content
This repository was archived by the owner on Feb 18, 2022. It is now read-only.

Commit a583329

Browse files
jonathantnealjonathantneal
committed
Improve flow-relative border support
1 parent eb7ee12 commit a583329

File tree

3 files changed

+32
-31
lines changed

3 files changed

+32
-31
lines changed

‎dependent-js/transform-border.js‎

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ const cloneRule = require('./clone-rule');
22

33
const matchLogical = /^\s*logical\s+/i;
44
const matchLogicalBorder = /^border(-width|-style|-color)?$/i;
5-
const matchLogicalBorderSide = /^border-(?:(width|style|color)-)?(block|block-start|block-end|inline|inline-start|inline-end|start|end)/i;
5+
const matchLogicalBorderSide = /^border-(block|block-start|block-end|inline|inline-start|inline-end|start|end)(-(width|style|color))?$/i;
66

77
// border
88
module.exports['border'] = (decl, values) => {
@@ -80,11 +80,11 @@ module.exports['border'] = (decl, values) => {
8080
// border-block
8181
module.exports['border-block'] = (decl, values) => [
8282
decl.clone({
83-
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
83+
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
8484
value: values[0]
8585
}),
8686
decl.clone({
87-
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
87+
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
8888
value: values[0]
8989
})
9090
];
@@ -103,32 +103,32 @@ module.exports['border-block-end'] = (decl) => {
103103
module.exports['border-inline'] = (decl, values) => 1 === values.length || 2 === values.length && values[0] === values[1]
104104
? [
105105
decl.clone({
106-
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
106+
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
107107
value: values[0]
108108
}),
109109
decl.clone({
110-
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
110+
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
111111
value: values[1] || values[0]
112112
})
113113
]
114114
: [
115115
cloneRule(decl, 'ltr').append([
116116
decl.clone({
117-
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
117+
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
118118
value: values[0]
119119
}),
120120
decl.clone({
121-
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
121+
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
122122
value: values[1] || values[0]
123123
})
124124
]),
125125
cloneRule(decl, 'rtl').append([
126126
decl.clone({
127-
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
127+
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
128128
value: values[0]
129129
}),
130130
decl.clone({
131-
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
131+
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
132132
value: values[1] || values[0]
133133
})
134134
])
@@ -138,12 +138,12 @@ module.exports['border-inline'] = (decl, values) => 1 === values.length || 2 ===
138138
module.exports['border-inline-start'] = (decl) => [
139139
cloneRule(decl, 'ltr').append(
140140
decl.clone({
141-
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$1')}`
141+
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`
142142
})
143143
),
144144
cloneRule(decl, 'rtl').append(
145145
decl.clone({
146-
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$1')}`
146+
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`
147147
})
148148
)
149149
];
@@ -152,12 +152,12 @@ module.exports['border-inline-start'] = (decl) => [
152152
module.exports['border-inline-end'] = (decl) => [
153153
cloneRule(decl, 'ltr').append(
154154
decl.clone({
155-
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$1')}`
155+
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`
156156
})
157157
),
158158
cloneRule(decl, 'rtl').append(
159159
decl.clone({
160-
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$1')}`
160+
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`
161161
})
162162
)
163163
];
@@ -166,44 +166,45 @@ module.exports['border-inline-end'] = (decl) => [
166166
module.exports['border-start'] = (decl, values) => [
167167
cloneRule(decl, 'ltr').append([
168168
decl.clone({
169-
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
169+
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
170170
value: values[0]
171171
}),
172172
decl.clone({
173-
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
173+
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
174174
value: values[1] || values[0]
175175
})
176176
]),
177177
cloneRule(decl, 'rtl').append([
178178
decl.clone({
179-
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
179+
prop: `border-top${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
180180
value: values[0]
181181
}),
182182
decl.clone({
183-
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
183+
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
184184
value: values[1] || values[0]
185185
})
186186
])
187187
];
188188

189189
// border-end
190190
module.exports['border-end'] = (decl, values) => [
191-
cloneRule(decl, 'ltr').append([decl.clone({
192-
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
191+
cloneRule(decl, 'ltr').append([
192+
decl.clone({
193+
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
193194
value: values[0]
194195
}),
195196
decl.clone({
196-
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
197+
prop: `border-right${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
197198
value: values[1] || values[0]
198199
})
199200
]),
200201
cloneRule(decl, 'rtl').append([
201202
decl.clone({
202-
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
203+
prop: `border-bottom${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
203204
value: values[0]
204205
}),
205206
decl.clone({
206-
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$1')}`,
207+
prop: `border-left${decl.prop.replace(matchLogicalBorderSide, '$2')}`,
207208
value: values[1] || values[0]
208209
})
209210
])

‎index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const transforms = {
4343
// plugin
4444
module.exports = postcss.plugin('postcss-logical-properties', () => (root) => {
4545
root.walkDecls((decl) => {
46-
const values = postcss.list.split(decl.value, /^border/i.test(decl.prop) ? '/' : ' ');
46+
const values = postcss.list.split(decl.value, /^border(-block|-inline|-start|-end)?(-width|-style|-color)?$/i.test(decl.prop) ? '/' : ' ');
4747
const prop = decl.prop.replace(matchSupportedProperties, '$2$5').toLowerCase();
4848

4949
if (prop in transforms) {

‎test/border.expect.css‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,17 @@ test-flowing-border {
4949
}
5050
border: inherit;
5151
&:dir(ltr) {
52-
border-left-start: 7px solid black;
52+
border-left: 7px solid black;
5353
}
5454
&:dir(rtl) {
55-
border-right-start: 7px solid black;
55+
border-right: 7px solid black;
5656
}
5757
border: inherit;
5858
&:dir(ltr) {
59-
border-right-end: 8px solid black;
59+
border-right: 8px solid black;
6060
}
6161
&:dir(rtl) {
62-
border-left-end: 8px solid black;
62+
border-left: 8px solid black;
6363
}
6464
border: inherit;
6565
&:dir(ltr) {
@@ -125,17 +125,17 @@ test-flowing-border-color {
125125
}
126126
border-color: inherit;
127127
&:dir(ltr) {
128-
border-left-start-color: 7px solid black;
128+
border-left-color: 7px solid black;
129129
}
130130
&:dir(rtl) {
131-
border-right-start-color: 7px solid black;
131+
border-right-color: 7px solid black;
132132
}
133133
border-color: inherit;
134134
&:dir(ltr) {
135-
border-right-end-color: 8px solid black;
135+
border-right-color: 8px solid black;
136136
}
137137
&:dir(rtl) {
138-
border-left-end-color: 8px solid black;
138+
border-left-color: 8px solid black;
139139
}
140140
border-color: inherit;
141141
&:dir(ltr) {

0 commit comments

Comments
 (0)