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

Commit 7438fc0

Browse files
romainmenkejonathantneal
romainmenke
authored and
jonathantneal
committed
use postcss 8 visitor pattern per property
1 parent d0bab53 commit 7438fc0

File tree

1 file changed

+104
-55
lines changed

1 file changed

+104
-55
lines changed

‎src/index.js‎

Lines changed: 104 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -10,50 +10,6 @@ import transformTextAlign from './lib/transform-text-align';
1010
import transformTransition from './lib/transform-transition';
1111
import { splitBySpace } from './lib/split';
1212

13-
// supported transforms
14-
const transforms = {
15-
// Flow-Relative Values
16-
'clear': transformFloat,
17-
'float': transformFloat,
18-
'resize': transformResize,
19-
'text-align': transformTextAlign,
20-
21-
// Logical Height and Logical Width
22-
'block-size': transformSize, 'max-block-size': transformSize, 'min-block-size': transformSize,
23-
'inline-size': transformSize, 'max-inline-size': transformSize, 'min-inline-size': transformSize,
24-
25-
// Flow-relative Margins
26-
'margin': transformDirectionalShorthands, 'margin-inline': transformSide['inline'], 'margin-inline-end': transformSide['inline-end'], 'margin-inline-start': transformSide['inline-start'], 'margin-block': transformSide['block'], 'margin-block-end': transformSide['block-end'], 'margin-block-start': transformSide['block-start'],
27-
28-
// Flow-relative Offsets
29-
'inset': transformInset, 'inset-inline': transformSide['inline'], 'inset-inline-end': transformSide['inline-end'], 'inset-inline-start': transformSide['inline-start'], 'inset-block': transformSide['block'], 'inset-block-end': transformSide['block-end'], 'inset-block-start': transformSide['block-start'],
30-
31-
// Flow-relative Padding
32-
'padding': transformDirectionalShorthands, 'padding-inline': transformSide['inline'], 'padding-inline-end': transformSide['inline-end'], 'padding-inline-start': transformSide['inline-start'], 'padding-block': transformSide['block'], 'padding-block-end': transformSide['block-end'], 'padding-block-start': transformSide['block-start'],
33-
34-
// Flow-relative Borders
35-
'border-block': transformBorder['border-block'], 'border-block-color': transformBorder['border-block'], 'border-block-style': transformBorder['border-block'], 'border-block-width': transformBorder['border-block'],
36-
'border-block-end': transformBorder['border-block-end'], 'border-block-end-color': transformBorder['border-block-end'], 'border-block-end-style': transformBorder['border-block-end'], 'border-block-end-width': transformBorder['border-block-end'],
37-
'border-block-start': transformBorder['border-block-start'], 'border-block-start-color': transformBorder['border-block-start'], 'border-block-start-style': transformBorder['border-block-start'], 'border-block-start-width': transformBorder['border-block-start'],
38-
'border-inline': transformBorder['border-inline'], 'border-inline-color': transformBorder['border-inline'], 'border-inline-style': transformBorder['border-inline'], 'border-inline-width': transformBorder['border-inline'],
39-
'border-inline-end': transformBorder['border-inline-end'], 'border-inline-end-color': transformBorder['border-inline-end'], 'border-inline-end-style': transformBorder['border-inline-end'], 'border-inline-end-width': transformBorder['border-inline-end'],
40-
'border-inline-start': transformBorder['border-inline-start'], 'border-inline-start-color': transformBorder['border-inline-start'], 'border-inline-start-style': transformBorder['border-inline-start'], 'border-inline-start-width': transformBorder['border-inline-start'],
41-
42-
// Flow-relative Corner Rounding
43-
'border-end-end-radius': transformBorderRadius, 'border-end-start-radius': transformBorderRadius, 'border-start-end-radius': transformBorderRadius, 'border-start-start-radius': transformBorderRadius,
44-
45-
// Four-Directional Shorthand Border Properties
46-
'border-color': transformDirectionalShorthands, 'border-style': transformDirectionalShorthands, 'border-width': transformDirectionalShorthands,
47-
48-
// Transition helpers
49-
'transition': transformTransition, 'transition-property': transformTransition
50-
};
51-
52-
const transformsRegExp = new RegExp(`^(${Object.keys(transforms).join('|')})$`, 'i');
53-
54-
// properties whose values will not be split
55-
const unsplitPropRegExp = /^(border-block|border-block-end|border-block-start|border-inline|border-inline-end|border-inline-start)$/i;
56-
5713
// plugin
5814
function postcssLogicalProperties(opts) {
5915
opts = Object(opts);
@@ -65,19 +21,112 @@ function postcssLogicalProperties(opts) {
6521
: 'ltr'
6622
: false;
6723

24+
const makeTransform = (transform) => {
25+
return (decl) => {
26+
const parent = decl.parent;
27+
const values = splitBySpace(decl.value, true);
28+
transform(decl, values, dir, preserve);
29+
if (!parent.nodes.length) {
30+
parent.remove();
31+
}
32+
}
33+
}
34+
35+
const makeTransformWithoutSplittingValues = (transform) => {
36+
return (decl) => {
37+
const parent = decl.parent;
38+
const values = [decl.value];
39+
transform(decl, values, dir, preserve);
40+
if (!parent.nodes.length) {
41+
parent.remove();
42+
}
43+
}
44+
}
45+
6846
return {
6947
postcssPlugin: 'postcss-logical-properties',
70-
Declaration: (decl) => {
71-
if (transformsRegExp.test(decl.prop)) {
72-
const parent = decl.parent;
73-
const values = unsplitPropRegExp.test(decl.prop) ? [decl.value] : splitBySpace(decl.value, true);
74-
const prop = decl.prop.toLowerCase();
75-
76-
transforms[prop](decl, values, dir, preserve);
77-
if (!parent.nodes.length) {
78-
parent.remove();
79-
}
80-
}
48+
Declaration: {
49+
// Flow-Relative Values
50+
'clear': makeTransform(transformFloat),
51+
'float': makeTransform(transformFloat),
52+
'resize': makeTransform(transformResize),
53+
'text-align': makeTransform(transformTextAlign),
54+
55+
// Logical Height and Logical Width
56+
'block-size': makeTransform(transformSize),
57+
'max-block-size': makeTransform(transformSize),
58+
'min-block-size': makeTransform(transformSize),
59+
'inline-size': makeTransform(transformSize),
60+
'max-inline-size': makeTransform(transformSize),
61+
'min-inline-size': makeTransform(transformSize),
62+
63+
// Flow-relative Margins
64+
'margin': makeTransform(transformDirectionalShorthands),
65+
'margin-inline': makeTransform(transformSide['inline']),
66+
'margin-inline-end': makeTransform(transformSide['inline-end']),
67+
'margin-inline-start': makeTransform(transformSide['inline-start']),
68+
'margin-block': makeTransform(transformSide['block']),
69+
'margin-block-end': makeTransform(transformSide['block-end']),
70+
'margin-block-start': makeTransform(transformSide['block-start']),
71+
72+
// Flow-relative Offsets
73+
'inset': makeTransform(transformInset),
74+
'inset-inline': makeTransform(transformSide['inline']),
75+
'inset-inline-end': makeTransform(transformSide['inline-end']),
76+
'inset-inline-start': makeTransform(transformSide['inline-start']),
77+
'inset-block': makeTransform(transformSide['block']),
78+
'inset-block-end': makeTransform(transformSide['block-end']),
79+
'inset-block-start': makeTransform(transformSide['block-start']),
80+
81+
// Flow-relative Padding
82+
'padding': makeTransform(transformDirectionalShorthands),
83+
'padding-inline': makeTransform(transformSide['inline']),
84+
'padding-inline-end': makeTransform(transformSide['inline-end']),
85+
'padding-inline-start': makeTransform(transformSide['inline-start']),
86+
'padding-block': makeTransform(transformSide['block']),
87+
'padding-block-end': makeTransform(transformSide['block-end']),
88+
'padding-block-start': makeTransform(transformSide['block-start']),
89+
90+
// Flow-relative Borders
91+
'border-block': makeTransformWithoutSplittingValues(transformBorder['border-block']),
92+
'border-block-color': makeTransform(transformBorder['border-block']),
93+
'border-block-style': makeTransform(transformBorder['border-block']),
94+
'border-block-width': makeTransform(transformBorder['border-block']),
95+
'border-block-end': makeTransformWithoutSplittingValues(transformBorder['border-block-end']),
96+
'border-block-end-color': makeTransform(transformBorder['border-block-end']),
97+
'border-block-end-style': makeTransform(transformBorder['border-block-end']),
98+
'border-block-end-width': makeTransform(transformBorder['border-block-end']),
99+
'border-block-start': makeTransformWithoutSplittingValues(transformBorder['border-block-start']),
100+
'border-block-start-color': makeTransform(transformBorder['border-block-start']),
101+
'border-block-start-style': makeTransform(transformBorder['border-block-start']),
102+
'border-block-start-width': makeTransform(transformBorder['border-block-start']),
103+
'border-inline': makeTransformWithoutSplittingValues(transformBorder['border-inline']),
104+
'border-inline-color': makeTransform(transformBorder['border-inline']),
105+
'border-inline-style': makeTransform(transformBorder['border-inline']),
106+
'border-inline-width': makeTransform(transformBorder['border-inline']),
107+
'border-inline-end': makeTransformWithoutSplittingValues(transformBorder['border-inline-end']),
108+
'border-inline-end-color': makeTransform(transformBorder['border-inline-end']),
109+
'border-inline-end-style': makeTransform(transformBorder['border-inline-end']),
110+
'border-inline-end-width': makeTransform(transformBorder['border-inline-end']),
111+
'border-inline-start': makeTransformWithoutSplittingValues(transformBorder['border-inline-start']),
112+
'border-inline-start-color': makeTransform(transformBorder['border-inline-start']),
113+
'border-inline-start-style': makeTransform(transformBorder['border-inline-start']),
114+
'border-inline-start-width': makeTransform(transformBorder['border-inline-start']),
115+
116+
// Flow-relative Corner Rounding
117+
'border-end-end-radius': makeTransform(transformBorderRadius),
118+
'border-end-start-radius': makeTransform(transformBorderRadius),
119+
'border-start-end-radius': makeTransform(transformBorderRadius),
120+
'border-start-start-radius': makeTransform(transformBorderRadius),
121+
122+
// Four-Directional Shorthand Border Properties
123+
'border-color': makeTransform(transformDirectionalShorthands),
124+
'border-style': makeTransform(transformDirectionalShorthands),
125+
'border-width': makeTransform(transformDirectionalShorthands),
126+
127+
// Transition helpers
128+
'transition': makeTransform(transformTransition),
129+
'transition-property': makeTransform(transformTransition)
81130
}
82131
};
83132
}

0 commit comments

Comments
 (0)