Skip to content

Commit 2c87a93

Browse files
author
Henri
authored
Use CSSTOM in default unit plugin (#893)
* Added support for using CSSTOM in default unit plugin * Support grid properties in default unit * - Move hasCSSTOMSupport into core - Improve default unit selection * - Move hasCSSTOMSupport into core - Improve default unit selection * Update size-snapshots
1 parent 82dbfff commit 2c87a93

12 files changed

Lines changed: 211 additions & 163 deletions

File tree

‎flow-typed/css.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
interface CSSOM {
2+
px(val: number | string): {};
3+
percent(val: number | string): {};
4+
ms(val: number | string): {};
5+
number(val: number | string): {};
6+
}
7+
8+
declare var CSS: ?CSSOM

‎packages/jss-plugin-syntax-default-unit/.size-snapshot.json‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,30 @@
11
{
22
"dist/jss-plugin-syntax-default-unit.js": {
3-
"bundled": 5560,
4-
"minified": 3116,
5-
"gzipped": 1037
3+
"bundled": 5874,
4+
"minified": 2738,
5+
"gzipped": 1051
66
},
77
"dist/jss-plugin-syntax-default-unit.min.js": {
8-
"bundled": 5560,
9-
"minified": 3116,
10-
"gzipped": 1037
8+
"bundled": 5874,
9+
"minified": 2738,
10+
"gzipped": 1051
1111
},
1212
"dist/jss-plugin-syntax-default-unit.cjs.js": {
13-
"bundled": 4908,
14-
"minified": 3088,
15-
"gzipped": 991
13+
"bundled": 5183,
14+
"minified": 2843,
15+
"gzipped": 1020
1616
},
1717
"dist/jss-plugin-syntax-default-unit.esm.js": {
18-
"bundled": 4826,
19-
"minified": 3019,
20-
"gzipped": 938,
18+
"bundled": 5103,
19+
"minified": 2777,
20+
"gzipped": 965,
2121
"treeshaked": {
2222
"rollup": {
23-
"code": 2347,
24-
"import_statements": 0
23+
"code": 1871,
24+
"import_statements": 39
2525
},
2626
"webpack": {
27-
"code": 3309
27+
"code": 2892
2828
}
2929
}
3030
}

‎packages/jss-plugin-syntax-default-unit/src/defaultUnits.js‎

Lines changed: 136 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,146 @@
11
// @flow
2+
3+
import {hasCSSTOMSupport} from 'jss'
4+
5+
const px = hasCSSTOMSupport ? window.CSS.px : 'px'
6+
const ms = hasCSSTOMSupport ? window.CSS.ms : 'ms'
7+
const percent = hasCSSTOMSupport ? window.CSS.percent : '%'
8+
29
/**
310
* Generated jss-plugin-syntax-default-unit CSS property units
411
*
512
* @type object
613
*/
714
export default {
8-
'animation-delay': 'ms',
9-
'animation-duration': 'ms',
10-
'background-position': 'px',
11-
'background-position-x': 'px',
12-
'background-position-y': 'px',
13-
'background-size': 'px',
14-
border: 'px',
15-
'border-bottom': 'px',
16-
'border-bottom-left-radius': 'px',
17-
'border-bottom-right-radius': 'px',
18-
'border-bottom-width': 'px',
19-
'border-left': 'px',
20-
'border-left-width': 'px',
21-
'border-radius': 'px',
22-
'border-right': 'px',
23-
'border-right-width': 'px',
24-
'border-spacing': 'px',
25-
'border-top': 'px',
26-
'border-top-left-radius': 'px',
27-
'border-top-right-radius': 'px',
28-
'border-top-width': 'px',
29-
'border-width': 'px',
30-
'border-after-width': 'px',
31-
'border-before-width': 'px',
32-
'border-end-width': 'px',
33-
'border-horizontal-spacing': 'px',
34-
'border-start-width': 'px',
35-
'border-vertical-spacing': 'px',
36-
bottom: 'px',
37-
'box-shadow': 'px',
38-
'text-shadow': 'px',
39-
'column-gap': 'px',
40-
'column-rule': 'px',
41-
'column-rule-width': 'px',
42-
'column-width': 'px',
43-
'flex-basis': 'px',
44-
'font-size': 'px',
45-
'font-size-delta': 'px',
46-
height: 'px',
47-
left: 'px',
48-
'letter-spacing': 'px',
49-
'logical-height': 'px',
50-
'logical-width': 'px',
51-
margin: 'px',
52-
'margin-after': 'px',
53-
'margin-before': 'px',
54-
'margin-bottom': 'px',
55-
'margin-left': 'px',
56-
'margin-right': 'px',
57-
'margin-top': 'px',
58-
'max-height': 'px',
59-
'max-width': 'px',
60-
'margin-end': 'px',
61-
'margin-start': 'px',
62-
'mask-position-x': 'px',
63-
'mask-position-y': 'px',
64-
'mask-size': 'px',
65-
'max-logical-height': 'px',
66-
'max-logical-width': 'px',
67-
'min-height': 'px',
68-
'min-width': 'px',
69-
'min-logical-height': 'px',
70-
'min-logical-width': 'px',
71-
motion: 'px',
72-
'motion-offset': 'px',
73-
outline: 'px',
74-
'outline-offset': 'px',
75-
'outline-width': 'px',
76-
padding: 'px',
77-
'padding-bottom': 'px',
78-
'padding-left': 'px',
79-
'padding-right': 'px',
80-
'padding-top': 'px',
81-
'padding-after': 'px',
82-
'padding-before': 'px',
83-
'padding-end': 'px',
84-
'padding-start': 'px',
85-
'perspective-origin-x': '%',
86-
'perspective-origin-y': '%',
87-
perspective: 'px',
88-
right: 'px',
89-
'shape-margin': 'px',
90-
size: 'px',
91-
'text-indent': 'px',
92-
'text-stroke': 'px',
93-
'text-stroke-width': 'px',
94-
top: 'px',
95-
'transform-origin': '%',
96-
'transform-origin-x': '%',
97-
'transform-origin-y': '%',
98-
'transform-origin-z': '%',
99-
'transition-delay': 'ms',
100-
'transition-duration': 'ms',
101-
'vertical-align': 'px',
102-
width: 'px',
103-
'word-spacing': 'px',
15+
// Animation properties
16+
'animation-delay': ms,
17+
'animation-duration': ms,
18+
19+
// Background properties
20+
'background-position': px,
21+
'background-position-x': px,
22+
'background-position-y': px,
23+
'background-size': px,
24+
25+
// Border Properties
26+
border: px,
27+
'border-bottom': px,
28+
'border-bottom-left-radius': px,
29+
'border-bottom-right-radius': px,
30+
'border-bottom-width': px,
31+
'border-left': px,
32+
'border-left-width': px,
33+
'border-radius': px,
34+
'border-right': px,
35+
'border-right-width': px,
36+
'border-top': px,
37+
'border-top-left-radius': px,
38+
'border-top-right-radius': px,
39+
'border-top-width': px,
40+
'border-width': px,
41+
42+
// Margin properties
43+
margin: px,
44+
'margin-bottom': px,
45+
'margin-left': px,
46+
'margin-right': px,
47+
'margin-top': px,
48+
49+
// Padding properties
50+
padding: px,
51+
'padding-bottom': px,
52+
'padding-left': px,
53+
'padding-right': px,
54+
'padding-top': px,
55+
56+
// Mask properties
57+
'mask-position-x': px,
58+
'mask-position-y': px,
59+
'mask-size': px,
60+
61+
// Width and height properties
62+
height: px,
63+
width: px,
64+
'min-height': px,
65+
'max-height': px,
66+
'min-width': px,
67+
'max-width': px,
68+
69+
// Position properties
70+
bottom: px,
71+
left: px,
72+
top: px,
73+
right: px,
74+
75+
// Shadow properties
76+
'box-shadow': px,
77+
'text-shadow': px,
78+
79+
// Column properties
80+
'column-gap': px,
81+
'column-rule': px,
82+
'column-rule-width': px,
83+
'column-width': px,
84+
85+
// Font and text properties
86+
'font-size': px,
87+
'font-size-delta': px,
88+
'letter-spacing': px,
89+
'text-indent': px,
90+
'text-stroke': px,
91+
'text-stroke-width': px,
92+
'word-spacing': px,
93+
94+
// Motion properties
95+
motion: px,
96+
'motion-offset': px,
97+
98+
// Outline properties
99+
outline: px,
100+
'outline-offset': px,
101+
'outline-width': px,
102+
103+
// Perspective properties
104+
perspective: px,
105+
'perspective-origin-x': percent,
106+
'perspective-origin-y': percent,
107+
108+
// Transform properties
109+
'transform-origin': percent,
110+
'transform-origin-x': percent,
111+
'transform-origin-y': percent,
112+
'transform-origin-z': percent,
113+
114+
// Transition properties
115+
'transition-delay': ms,
116+
'transition-duration': ms,
117+
118+
// Alignment properties
119+
'vertical-align': px,
120+
'flex-basis': px,
121+
122+
// Some random properties
123+
'shape-margin': px,
124+
size: px,
125+
126+
// Grid properties
127+
grid: px,
128+
'grid-gap': px,
129+
'grid-row-gap': px,
130+
'grid-column-gap': px,
131+
'grid-template-rows': px,
132+
'grid-template-columns': px,
133+
'grid-auto-rows': px,
134+
'grid-auto-columns': px,
135+
104136
// Not existing properties.
105137
// Used to avoid issues with jss-expand integration.
106-
'box-shadow-x': 'px',
107-
'box-shadow-y': 'px',
108-
'box-shadow-blur': 'px',
109-
'box-shadow-spread': 'px',
110-
'font-line-height': 'px',
111-
'text-shadow-x': 'px',
112-
'text-shadow-y': 'px',
113-
'text-shadow-blur': 'px'
138+
'box-shadow-x': px,
139+
'box-shadow-y': px,
140+
'box-shadow-blur': px,
141+
'box-shadow-spread': px,
142+
'font-line-height': px,
143+
'text-shadow-x': px,
144+
'text-shadow-y': px,
145+
'text-shadow-blur': px
114146
}

‎packages/jss-plugin-syntax-default-unit/src/index.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,10 @@ const units = addCamelCasedVersion(defaultUnits)
2929
function iterate(prop, value, options) {
3030
if (!value) return value
3131

32-
let convertedValue = value
33-
3432
if (Array.isArray(value)) {
3533
for (let i = 0; i < value.length; i++) {
3634
value[i] = iterate(prop, value[i], options)
3735
}
38-
} else if (typeof value === 'number' && value !== 0) {
39-
convertedValue = value + (options[prop] || units[prop] || '')
4036
} else if (typeof value === 'object') {
4137
if (prop === 'fallbacks') {
4238
for (const innerProp in value) {
@@ -47,9 +43,21 @@ function iterate(prop, value, options) {
4743
value[innerProp] = iterate(`${prop}-${innerProp}`, value[innerProp], options)
4844
}
4945
}
46+
} else if (typeof value === 'number') {
47+
if (options[prop]) {
48+
return `${value}${options[prop]}`
49+
}
50+
51+
if (units[prop]) {
52+
return typeof units[prop] === 'function'
53+
? units[prop](value).toString()
54+
: `${value}${units[prop]}`
55+
}
56+
57+
return value.toString()
5058
}
5159

52-
return convertedValue
60+
return value
5361
}
5462

5563
export type Options = {[key: string]: string}

‎packages/jss-preset-default/.size-snapshot.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
{
22
"dist/jss-preset-default.js": {
3-
"bundled": 67177,
4-
"minified": 23526,
5-
"gzipped": 6976
3+
"bundled": 67453,
4+
"minified": 23133,
5+
"gzipped": 6951
66
},
77
"dist/jss-preset-default.min.js": {
8-
"bundled": 66061,
9-
"minified": 23006,
10-
"gzipped": 6720
8+
"bundled": 66337,
9+
"minified": 22613,
10+
"gzipped": 6696
1111
},
1212
"dist/jss-preset-default.cjs.js": {
1313
"bundled": 1399,

0 commit comments

Comments
 (0)
⚡