-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
101 lines (85 loc) · 1.83 KB
/
index.js
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
const plugin = require('tailwindcss/plugin')
const proRataRem = plugin(
function({
addUtilities,
addComponents,
addBase,
addVariant,
e,
prefix,
theme,
variants,
config,
postcss
}) {
const presetsCritical = {
'default': '12px',
'xs': '12px',
'sm': '12px',
'tablet': '15px',
'md': '15px',
'laptop': '18px',
'lg': '18px',
'xl': '18px',
'desktop': '21px',
'2xl': '21px',
'desktop-4k': '24px',
'3xl': '24px'
}
const presetsInclusive = {
'default': '16px',
'xs': '16px',
'sm': '16px',
'tablet': '20px',
'md': '20px',
'laptop': '24px',
'lg': '24px',
'xl': '24px',
'desktop': '24px',
'2xl': '28px',
'desktop-4k': '24px',
'3xl': '32px'
}
const presetsKids = {
'default': '24px',
'xs': '24px',
'sm': '24px',
'tablet': '30px',
'md': '30px',
'laptop': '36px',
'lg': '36px',
'xl': '36px',
'desktop': '42px',
'2xl': '42px',
'desktop-4k': '42px',
'3xl': '48px'
}
function generateFontSizes(settings) {
let screensFontSizes = {};
Object
.keys(theme("screens"))
.forEach(function(key, index) {
screensFontSizes[`@screen ${key}`] = {
"font-size": settings[key]
}
});
return screensFontSizes;
}
let settings = presetsInclusive;
const newComponent = {
'.pro-rata-rem--critical': {
'font-size': presetsCritical['default'],
...generateFontSizes(presetsInclusive)
},
'.pro-rata-rem--inclusive': {
'font-size': presetsInclusive['default'],
...generateFontSizes(presetsInclusive)
},
'.pro-rata-rem--kids': {
'font-size': presetsKids['default'],
...generateFontSizes(presetsKids)
},
};
addComponents(newComponent);
});
module.exports = proRataRem