/
index.ts
109 lines (94 loc) · 2.45 KB
/
index.ts
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
/**
* Internal dependencies
*/
import type { GeneratedCSSRule, Style, StyleOptions } from '../../types';
import { generateRule, safeDecodeURI } from '../utils';
const backgroundImage = {
name: 'backgroundImage',
generate: ( style: Style, options: StyleOptions ) => {
const _backgroundImage = style?.background?.backgroundImage;
const _backgroundSize = style?.background?.backgroundSize;
const styleRules: GeneratedCSSRule[] = [];
if ( ! _backgroundImage ) {
return styleRules;
}
if ( _backgroundImage?.source === 'file' && _backgroundImage?.url ) {
styleRules.push( {
selector: options.selector,
key: 'backgroundImage',
// Passed `url` may already be encoded. To prevent double encoding, decodeURI is executed to revert to the original string.
value: `url( '${ encodeURI(
safeDecodeURI( _backgroundImage.url )
) }' )`,
} );
}
// If no background size is set, but an image is, default to cover.
if ( _backgroundSize === undefined ) {
styleRules.push( {
selector: options.selector,
key: 'backgroundSize',
value: 'cover',
} );
}
return styleRules;
},
};
const backgroundPosition = {
name: 'backgroundRepeat',
generate: ( style: Style, options: StyleOptions ) => {
return generateRule(
style,
options,
[ 'background', 'backgroundPosition' ],
'backgroundPosition'
);
},
};
const backgroundRepeat = {
name: 'backgroundRepeat',
generate: ( style: Style, options: StyleOptions ) => {
return generateRule(
style,
options,
[ 'background', 'backgroundRepeat' ],
'backgroundRepeat'
);
},
};
const backgroundSize = {
name: 'backgroundSize',
generate: ( style: Style, options: StyleOptions ) => {
const _backgroundSize = style?.background?.backgroundSize;
const _backgroundPosition = style?.background?.backgroundPosition;
const styleRules: GeneratedCSSRule[] = [];
if ( _backgroundSize === undefined ) {
return styleRules;
}
styleRules.push(
...generateRule(
style,
options,
[ 'background', 'backgroundSize' ],
'backgroundSize'
)
);
// If background size is set to contain, but no position is set, default to center.
if (
_backgroundSize === 'contain' &&
_backgroundPosition === undefined
) {
styleRules.push( {
selector: options.selector,
key: 'backgroundPosition',
value: 'center',
} );
}
return styleRules;
},
};
export default [
backgroundImage,
backgroundPosition,
backgroundRepeat,
backgroundSize,
];