UNPKG

brandeur-plugin-enforce-longhand

Version:

Brandeur plugin that enforces longhand properties over shorthand properties

113 lines • 3.48 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
import sortProperty from 'brandeur-plugin-sort-property'; function capitalize(str) { return str.charAt(0).toUpperCase() + str.slice(1); } function getPropertyPriority(_ref) { let { borderLonghand, borderDirectional, borderDirectionalLonghand } = _ref; const propertyPriority = { marginLeft: 2, marginRight: 2, marginTop: 2, marginBottom: 2, marginInline: 2, marginBlock: 2, marginInlineStart: 3, marginInlineEnd: 3, marginBlockStart: 3, marginBlockEnd: 3, paddingLeft: 2, paddingRight: 2, paddingBottom: 2, paddingTop: 2, paddingInline: 2, paddingBlock: 2, paddingInlineStart: 3, paddingInlineEnd: 3, paddingBlockStart: 3, paddingBlockEnd: 3, flexWrap: 2, flexShrink: 2, flexBasis: 2, backgroundColor: 2, backgroundRepeat: 2, backgroundPosition: 2, backgroundImage: 2, backgroundOrigin: 2, backgroundClip: 2, backgroundSize: 2, transitionProperty: 2, transitionTimingFunction: 2, transitionDuration: 2, transitionDelay: 2, animationDelay: 2, animationDirection: 2, animationDuration: 2, animationFillMode: 2, animationIterationCount: 2, animationName: 2, animationPlayState: 2, animationTimingFunction: 2, borderWidth: borderLonghand, borderStyle: borderLonghand, borderColor: borderLonghand, // these conflict with the longhands above borderTop: borderDirectional, borderRight: borderDirectional, borderBottom: borderDirectional, borderLeft: borderDirectional, borderTopWidth: borderDirectionalLonghand, borderTopStyle: borderDirectionalLonghand, borderTopColor: borderDirectionalLonghand, borderRightWidth: borderDirectionalLonghand, borderRightStyle: borderDirectionalLonghand, borderRightColor: borderDirectionalLonghand, borderBottomWidth: borderDirectionalLonghand, borderBottomStyle: borderDirectionalLonghand, borderBottomColor: borderDirectionalLonghand, borderLeftWidth: borderDirectionalLonghand, borderLeftStyle: borderDirectionalLonghand, borderLeftColor: borderDirectionalLonghand, borderBottomLeftRadius: 2, borderBottomRightRadius: 2, borderTopLeftRadius: 2, borderTopRightRadius: 2, borderImageOutset: 2, borderImageRepeat: 2, borderImageSlice: 2, borderImageSource: 2, borderImageWidth: 2, columnWidth: 2, columnCount: 2, listStyleImage: 2, listStylePosition: 2, listStyleType: 2, outlineWidth: 2, outlineStyle: 2, outlineColor: 2, overflowX: 2, overflowY: 2, textDecorationLine: 2, textDecorationStyle: 2, textDecorationColor: 2 }; // Add all possible vendor prefixes to all properties // brandeur-plugin-prefixer converts properties to prefixed ones like `WebkitBackgroundColor` return Object.entries(propertyPriority).reduce((acc, _ref2) => { let [property, priority] = _ref2; acc['Webkit' + capitalize(property)] = priority; return acc; }, propertyPriority); } export default function enforceLonghandPlugin() { let borderMode = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'none'; const propertyPriority = getPropertyPriority({ borderDirectional: borderMode === 'directional' ? 3 : 2, borderLonghand: borderMode === 'longhand' ? 3 : 2, borderDirectionalLonghand: borderMode === 'none' ? 3 : 4 }); return sortProperty(propertyPriority); }