Skip to content

Commit 8667085

Browse files
hudochenkovhudochenkov
committed
Add more shorthand data
1 parent a1c9a4f commit 8667085

File tree

4 files changed

+203
-56
lines changed

4 files changed

+203
-56
lines changed

‎lib/properties-order/__tests__/isShorthand.test.js‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
const { isShorthand } = require('../isShorthand');
2+
3+
test('margin is shorthand for margin-top', () => {
4+
expect(isShorthand('margin', 'margin-top')).toBe(true);
5+
});
6+
7+
test('margin-top is not shorthand for margin', () => {
8+
expect(isShorthand('margin-top', 'margin')).toBe(false);
9+
});
10+
11+
test('margin-block is shorthand for margin-top', () => {
12+
expect(isShorthand('margin-block', 'margin-top')).toBe(true);
13+
});
14+
15+
test('margin-top is not shorthand for margin-block', () => {
16+
expect(isShorthand('margin-top', 'margin-block')).toBe(false);
17+
});
18+
19+
test('border-inline is shorthand for border-top-color', () => {
20+
expect(isShorthand('border-inline', 'border-top-color')).toBe(true);
21+
});
22+
23+
test('border-top-color is not shorthand for border-inline', () => {
24+
expect(isShorthand('border-top-color', 'border-inline')).toBe(false);
25+
});

‎lib/properties-order/isShorthand.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
const shorthandData = require('./shorthandData');
2+
3+
exports.isShorthand = function isShorthand(a, b) {
4+
if (!shorthandData[a]) {
5+
return false;
6+
}
7+
8+
if (shorthandData[a].includes(b)) {
9+
return true;
10+
}
11+
12+
for (const longhand of shorthandData[a]) {
13+
if (isShorthand(longhand, b)) {
14+
return true;
15+
}
16+
}
17+
18+
return false;
19+
};

‎lib/properties-order/shorthandData.js‎

Lines changed: 158 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,12 @@ module.exports = {
99
'margin-left',
1010
'margin-right',
1111
'margin-block',
12-
'margin-block-start',
13-
'margin-block-end',
1412
'margin-inline',
15-
'margin-inline-start',
16-
'margin-inline-end',
17-
],
18-
'margin-block': [
19-
'margin-block-start',
20-
'margin-block-end',
21-
'margin-top',
22-
'margin-bottom',
23-
'margin-left',
24-
'margin-right',
2513
],
14+
'margin-block': ['margin-block-start', 'margin-block-end'],
2615
'margin-block-start': ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
2716
'margin-block-end': ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
28-
'margin-inline': [
29-
'margin-inline-start',
30-
'margin-inline-end',
31-
'margin-top',
32-
'margin-bottom',
33-
'margin-left',
34-
'margin-right',
35-
],
17+
'margin-inline': ['margin-inline-start', 'margin-inline-end'],
3618
'margin-inline-start': ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
3719
'margin-inline-end': ['margin-top', 'margin-bottom', 'margin-left', 'margin-right'],
3820
padding: [
@@ -87,19 +69,149 @@ module.exports = {
8769
'line-height',
8870
],
8971
border: [
72+
'border-inline',
73+
'border-block',
74+
'border-top',
75+
'border-bottom',
76+
'border-left',
77+
'border-right',
78+
'border-width',
79+
'border-style',
80+
'border-color',
81+
],
82+
'border-inline': [
83+
'border-inline-start',
84+
'border-inline-end',
85+
'border-inline-width',
86+
'border-inline-style',
87+
'border-inline-color',
88+
],
89+
'border-inline-width': ['border-inline-start-width', 'border-inline-end-width'],
90+
'border-inline-style': ['border-inline-start-style', 'border-inline-end-style'],
91+
'border-inline-color': ['border-inline-start-color', 'border-inline-end-color'],
92+
'border-inline-start': [
93+
'border-inline-start-width',
94+
'border-inline-start-style',
95+
'border-inline-start-color',
96+
97+
'border-top',
98+
'border-bottom',
99+
'border-left',
100+
'border-right',
101+
],
102+
'border-inline-start-width': [
103+
'border-top-width',
104+
'border-bottom-width',
105+
'border-left-width',
106+
'border-right-width',
107+
],
108+
'border-inline-start-style': [
109+
'border-top-style',
110+
'border-bottom-style',
111+
'border-left-style',
112+
'border-right-style',
113+
],
114+
'border-inline-start-color': [
115+
'border-top-color',
116+
'border-bottom-color',
117+
'border-left-color',
118+
'border-right-color',
119+
],
120+
'border-inline-end': [
121+
'border-inline-end-width',
122+
'border-inline-end-style',
123+
'border-inline-end-color',
124+
125+
'border-top',
126+
'border-bottom',
127+
'border-left',
128+
'border-right',
129+
],
130+
'border-inline-end-width': [
131+
'border-top-width',
132+
'border-bottom-width',
133+
'border-left-width',
134+
'border-right-width',
135+
],
136+
'border-inline-end-style': [
137+
'border-top-style',
138+
'border-bottom-style',
139+
'border-left-style',
140+
'border-right-style',
141+
],
142+
'border-inline-end-color': [
143+
'border-top-color',
144+
'border-bottom-color',
145+
'border-left-color',
146+
'border-right-color',
147+
],
148+
'border-block': [
149+
'border-block-start',
150+
'border-block-end',
151+
'border-block-width',
152+
'border-block-style',
153+
'border-block-color',
154+
],
155+
'border-block-width': ['border-block-start-width', 'border-block-end-width'],
156+
'border-block-style': ['border-block-start-style', 'border-block-end-style'],
157+
'border-block-color': ['border-block-start-color', 'border-block-end-color'],
158+
'border-block-start': [
159+
'border-block-start-width',
160+
'border-block-start-style',
161+
'border-block-start-color',
162+
163+
'border-top',
164+
'border-bottom',
165+
'border-left',
166+
'border-right',
167+
],
168+
'border-block-start-width': [
90169
'border-top-width',
91170
'border-bottom-width',
92171
'border-left-width',
93172
'border-right-width',
173+
],
174+
'border-block-start-style': [
94175
'border-top-style',
95176
'border-bottom-style',
96177
'border-left-style',
97178
'border-right-style',
179+
],
180+
'border-block-start-color': [
98181
'border-top-color',
99182
'border-bottom-color',
100183
'border-left-color',
101184
'border-right-color',
102185
],
186+
'border-block-end': [
187+
'border-block-end-width',
188+
'border-block-end-style',
189+
'border-block-end-color',
190+
191+
'border-top',
192+
'border-bottom',
193+
'border-left',
194+
'border-right',
195+
],
196+
'border-block-end-width': [
197+
'border-top-width',
198+
'border-bottom-width',
199+
'border-left-width',
200+
'border-right-width',
201+
],
202+
'border-block-end-style': [
203+
'border-top-style',
204+
'border-bottom-style',
205+
'border-left-style',
206+
'border-right-style',
207+
],
208+
'border-block-end-color': [
209+
'border-top-color',
210+
'border-bottom-color',
211+
'border-left-color',
212+
'border-right-color',
213+
],
214+
103215
'border-top': ['border-top-width', 'border-top-style', 'border-top-color'],
104216
'border-bottom': ['border-bottom-width', 'border-bottom-style', 'border-bottom-color'],
105217
'border-left': ['border-left-width', 'border-left-style', 'border-left-color'],
@@ -122,13 +234,20 @@ module.exports = {
122234
'border-left-color',
123235
'border-right-color',
124236
],
125-
'list-style': ['list-style-type', 'list-style-position', 'list-style-image'],
237+
'border-image': [
238+
'border-image-source',
239+
'border-image-slice',
240+
'border-image-width',
241+
'border-image-outset',
242+
'border-image-repeat',
243+
],
126244
'border-radius': [
127245
'border-top-right-radius',
128246
'border-top-left-radius',
129247
'border-bottom-right-radius',
130248
'border-bottom-left-radius',
131249
],
250+
'list-style': ['list-style-type', 'list-style-position', 'list-style-image'],
132251
transition: [
133252
'transition-delay',
134253
'transition-duration',
@@ -145,33 +264,6 @@ module.exports = {
145264
'animation-fill-mode',
146265
'animation-play-state',
147266
],
148-
'border-block-end': [
149-
'border-block-end-width',
150-
'border-block-end-style',
151-
'border-block-end-color',
152-
],
153-
'border-block-start': [
154-
'border-block-start-width',
155-
'border-block-start-style',
156-
'border-block-start-color',
157-
],
158-
'border-image': [
159-
'border-image-source',
160-
'border-image-slice',
161-
'border-image-width',
162-
'border-image-outset',
163-
'border-image-repeat',
164-
],
165-
'border-inline-end': [
166-
'border-inline-end-width',
167-
'border-inline-end-style',
168-
'border-inline-end-color',
169-
],
170-
'border-inline-start': [
171-
'border-inline-start-width',
172-
'border-inline-start-style',
173-
'border-inline-start-color',
174-
],
175267
'column-rule': ['column-rule-width', 'column-rule-style', 'column-rule-color'],
176268
columns: ['column-width', 'column-count'],
177269
flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
@@ -193,7 +285,17 @@ module.exports = {
193285
'grid-template': ['grid-template-columns', 'grid-template-rows', 'grid-template-areas'],
194286
offset: ['offset-anchor', 'offset-distance', 'offset-path', 'offset-position', 'offset-rotate'],
195287
outline: ['outline-color', 'outline-style', 'outline-width'],
196-
overflow: ['overflow-x', 'overflow-y'],
288+
overflow: ['overflow-block', 'overflow-inline', 'overflow-x', 'overflow-y'],
289+
'overflow-block': ['overflow-x', 'overflow-y'],
290+
'overflow-inline': ['overflow-x', 'overflow-y'],
291+
'overscroll-behavior': [
292+
'overscroll-behavior-x',
293+
'overscroll-behavior-y',
294+
'overscroll-behavior-block',
295+
'overscroll-behavior-inline',
296+
],
297+
'overscroll-behavior-block': ['overscroll-behavior-x', 'overscroll-behavior-y'],
298+
'overscroll-behavior-inline': ['overscroll-behavior-x', 'overscroll-behavior-y'],
197299
'text-decoration': ['text-decoration-color', 'text-decoration-style', 'text-decoration-line'],
198300
'text-emphasis': ['text-emphasis-style', 'text-emphasis-color'],
199301
mask: [
@@ -214,4 +316,11 @@ module.exports = {
214316
'mask-border-source',
215317
'mask-border-width',
216318
],
319+
inset: ['top', 'right', 'bottom', 'left', 'inset-block', 'inset-inline'],
320+
'inset-block': ['inset-block-end', 'inset-block-start'],
321+
'inset-inline': ['inset-inline-end', 'inset-inline-start'],
322+
'inset-block-start': ['top', 'bottom', 'left', 'right'],
323+
'inset-block-end': ['top', 'bottom', 'left', 'right'],
324+
'inset-inline-start': ['top', 'bottom', 'left', 'right'],
325+
'inset-inline-end': ['top', 'bottom', 'left', 'right'],
217326
};

‎lib/properties-order/sortDeclarationsAlphabetically.js‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
let shorthandData = require('./shorthandData');
1+
const { isShorthand } = require('./isShorthand');
22
let vendor = require('./vendor');
33

44
module.exports = function sortDeclarationsAlphabetically(a, b) {
@@ -27,9 +27,3 @@ module.exports = function sortDeclarationsAlphabetically(a, b) {
2727

2828
return a.unprefixedName <= b.unprefixedName ? -1 : 1;
2929
};
30-
31-
function isShorthand(a, b) {
32-
const longhands = shorthandData[a] || [];
33-
34-
return longhands.includes(b);
35-
}

0 commit comments

Comments
 (0)