Skip to content

Commit abb1b60

Browse files
semencovsemencov
committed
Refactoring styles generation
1 parent 539cbd5 commit abb1b60

File tree

4 files changed

+70
-69
lines changed

4 files changed

+70
-69
lines changed

‎CHANGELOG.md‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,50 @@
11
### Version 2.0.0
22

3-
- typo
4-
- Update dependencies
5-
- Update Inter to v3.15
6-
- Units normalization
7-
- Units normalization
8-
- Tailwind setup
9-
- Refactoring styles generation
3+
- Inter font updated to v3.15
4+
- Fixed different size units caused `NaN` for letter spacing
5+
- Refactored styles generation
6+
- Removed line height usage as redundant
7+
- Removed plugin specific font size classes to use inherited classes instead (`.text-inter-lg` → `.font-inter .text-lg`)
8+
- Limited font feature settings classes to apply only if Inter font family applied (`.font-feature-numeric` → `.font-inter .font-feature-numeric`)
9+
- Added `.font-feature-default` class with `calt` and `kern` font feature settings enabled
1010

1111
### Version 1.0.8
1212

13-
- Replaced Object.fromEntries with lodash methods to provide compatability older Node.js versions
13+
- Replaced Object.fromEntries with lodash methods to provide compatability older Node.js versions
1414

1515
### Version 1.0.7
1616

17-
- Fixed line height and letter spacing values calculation for different font sizes (#2, #3)
17+
- Fixed line height and letter spacing values calculation for different font sizes (#2, #3)
1818

1919
### Version 1.0.6
2020

21-
- Fixed npm package missed files
21+
- Fixed npm package missed files
2222

2323
### Version 1.0.5
2424

25-
- Bump config adjustments
25+
- Bump config adjustments
2626

2727
### Version 1.0.4
2828

29-
- Bump config adjustments
29+
- Bump config adjustments
3030

3131
### Version 1.0.3
3232

33-
- Bump config
33+
- Bump config
3434

3535
### Version 1.0.2
3636

37-
- Inter font updated to v3.11
38-
- Demo page updated
39-
- Small improvements
37+
- Inter font updated to v3.11
38+
- Demo page updated
39+
- Small improvements
4040

4141
### Version 1.0.1
4242

43-
- Fixed exception when no `interFontFeatures` config specified.
43+
- Fixed exception when no `interFontFeatures` config specified.
4444

4545
### Version 1.0.0
4646

4747
Currently supports fot feature settings and dynamic line height with the different font sizes.
4848

49-
- Inter font updated to v3.10 (1.000)
50-
- Updated README.md
49+
- Inter font updated to v3.10 (1.000)
50+
- Updated README.md

‎README.md‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,6 @@ The plugin uses [`fontSize` core plugin](https://tailwindcss.com/docs/configurat
7171
module.exports = {
7272
theme: {
7373
fontFeatureSettings: {
74-
default: ['calt', 'liga', 'kern'],
7574
numeric: ['tnum', 'salt', 'ss02']
7675
},
7776
fontSize: {
@@ -301,7 +300,6 @@ Also the plugin generates utility classes which allow you to specify named font
301300
module.exports = {
302301
theme: {
303302
interFontFeatures: {
304-
default: ['calt', 'kern'],
305303
numeric: ['tnum', 'salt', 'ss02']
306304
}
307305
},
@@ -312,7 +310,7 @@ module.exports = {
312310
This will generate the following classes:
313311

314312
```css
315-
/* This is a default class */
313+
/* This is a default classes */
316314
.font-inter .font-feature-normal,
317315
.font-inter.font-feature-normal {
318316
font-feature-settings: normal;
@@ -323,6 +321,7 @@ This will generate the following classes:
323321
font-feature-settings: 'calt' 1, 'kern' 1;
324322
}
325323

324+
/* This is a custom class defuned in config */
326325
.font-inter .font-feature-numeric,
327326
.font-inter.font-feature-numeric {
328327
font-feature-settings: 'tnum' 1, 'salt' 1, 'ss02' 1;

‎package.json‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,6 @@
4444
"tailwindcss": "^1.9.6"
4545
},
4646
"dependencies": {
47-
"lodash": "^4.17.20",
48-
"parse-unit": "^1.0.1",
49-
"to-px": "^1.1.0"
47+
"parse-unit": "^1.0.1"
5048
}
5149
}

‎src/index.js‎

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,48 @@
1-
const _ = require('lodash');
21
const { toPx } = require('./utils');
32
const Inter = require('../inter.json');
43

5-
const mapObject = (obj, cb) => _.fromPairs(_.toPairs(obj).map(val => cb(...val)));
6-
const filterObject = (obj, cb) => _.fromPairs(_.toPairs(obj).filter(val => cb(...val)));
4+
const isPlainObject = val => !!val && typeof val === 'object' && val.constructor === Object;
5+
const isArrayLike = obj => obj != null && typeof obj[Symbol.iterator] === 'function';
6+
const isBoolean = val => typeof val === 'boolean';
7+
const isString = val => typeof val === 'string';
8+
const entries = obj => Object.keys(obj).map(key => [key, obj[key]]);
9+
const fromEntries = iterable =>
10+
[...iterable].reduce((obj, [key, val]) => {
11+
obj[key] = val;
12+
return obj;
13+
}, {});
14+
const mapObject = (obj, cb) => fromEntries((Array.isArray(obj) ? obj : entries(obj)).map(val => cb(...val)));
15+
const filterObject = (obj, cb) => fromEntries((Array.isArray(obj) ? obj : entries(obj)).filter(val => cb(...val)));
16+
const defaults = (obj, ...defs) => Object.assign({}, obj, ...defs.reverse(), obj);
717
const round = (num, prec = 3) => parseFloat(num.toFixed(prec));
818
const unquote = str => str.replace(/^['"]|['"]$/g, '').trim();
919
const tracking = (fontSize, a, b, c) => a + b * Math.pow(Math.E, c * fontSize);
1020

1121
const normalizeEntry = (key, value) => {
12-
value = _.isBoolean(value) ? '' + 1 * value : '' + value;
22+
value = isBoolean(value) ? '' + 1 * value : '' + value;
1323
value = value !== '1' && value !== 'undefined' ? value : '1';
1424

1525
return [unquote(key), value];
1626
};
1727

1828
const generateFeatures = (features, available) => {
19-
if (_.isPlainObject(features)) {
29+
if (isPlainObject(features)) {
2030
features = mapObject(features, (key, value = '1') => normalizeEntry(key, value));
2131
} else {
22-
if (_.isString(features)) {
23-
features = _.fromPairs(features.split(',').map(f => f.trim().split(' ')));
32+
if (isString(features)) {
33+
features = fromEntries(features.split(',').map(f => f.trim().split(' ')));
2434
}
2535

26-
features = _.fromPairs(
36+
features = fromEntries(
2737
features.map(feature => {
2838
let key, value;
2939

30-
if (_.isString(feature)) {
40+
if (isString(feature)) {
3141
[key, value = '1'] = feature.replace(/\s\s+/g, ' ').split(' ', 2);
32-
} else if (_.isArrayLike(feature)) {
42+
} else if (isArrayLike(feature)) {
3343
[key, value = '1'] = feature;
34-
} else if (_.isPlainObject(feature)) {
35-
[key, value = '1'] = _.toPairs(feature)[0];
44+
} else if (isPlainObject(feature)) {
45+
[key, value = '1'] = entries(feature)[0];
3646
}
3747

3848
return normalizeEntry(key, value);
@@ -42,7 +52,7 @@ const generateFeatures = (features, available) => {
4252

4353
features = filterObject(features, key => available.includes(key));
4454

45-
return _.toPairs(features)
55+
return entries(features)
4656
.map(([key, value]) => `"${key}" ${value}`)
4757
.filter(val => !!val)
4858
.sort()
@@ -54,7 +64,7 @@ module.exports = function (options = {}) {
5464
return ({ addBase, addUtilities, variants, e, theme }) => {
5565
const { availableFeatures, utilities, base } = Inter;
5666

57-
const defaultConfig = _.defaults(options, {
67+
const defaultConfig = defaults(options, {
5868
a: -0.0223,
5969
b: 0.185,
6070
c: -0.1745,
@@ -69,10 +79,7 @@ module.exports = function (options = {}) {
6979
const fontSizeVariants = variants('fontSize', defaultFontSizeVariants);
7080
const fontFeaturesTheme = theme('interFontFeatures', defaultFontFeaturesTheme);
7181

72-
const fontFeatures = {
73-
...defaultFontFeaturesTheme,
74-
...fontFeaturesTheme
75-
};
82+
const fontFeatures = defaults(fontFeaturesTheme, defaultFontFeaturesTheme);
7683
const baseStyles = {
7784
...(defaultConfig.importFontFace ? base : {})
7885
};
@@ -88,40 +95,37 @@ module.exports = function (options = {}) {
8895
};
8996

9097
const fontFeatureStyles = value => {
91-
return {
92-
fontFeatureSettings: _.isArray(value) ? value.join(', ') : value
93-
};
98+
return value.length ? { fontFeatureSettings: Array.isArray(value) ? value.join(', ') : value } : null;
9499
};
95100

96-
const fontFeatureUtilities = _.fromPairs(
97-
_.chain(fontFeatures)
98-
.map((value, modifier) => {
99-
const features = generateFeatures(value, availableFeatures);
100-
if (!features.length) return [null];
101-
102-
return [
103-
`.font-inter .${e(`font-feature-${modifier}`)}, .font-inter.${e(`font-feature-${modifier}`)}`,
104-
{
105-
...fontFeatureStyles(features)
106-
}
107-
];
108-
})
109-
.filter(([key]) => key !== null)
110-
.value()
111-
);
112-
113-
const fontSizeUtilities = _.fromPairs(
114-
_.map(fontSizeTheme, (value, modifier) => {
115-
const { a, b, c } = defaultConfig;
101+
const fontFeatureUtilities = {
102+
...{
103+
'.font-inter .font-feature-normal, .font-inter.font-feature-normal': {
104+
...fontFeatureStyles('normal')
105+
}
106+
},
107+
...mapObject(fontFeatures, (modifier, value) => {
108+
const features = generateFeatures(value, availableFeatures);
116109

117110
return [
118-
`.font-inter .${e(`text-${modifier}`)}, .font-inter.${e(`text-${modifier}`)}`,
111+
`.font-inter .${e(`font-feature-${modifier}`)},.font-inter.${e(`font-feature-${modifier}`)}`,
119112
{
120-
...fontSizeStyles(value, { a, b, c })
113+
...fontFeatureStyles(features)
121114
}
122115
];
123116
})
124-
);
117+
};
118+
119+
const fontSizeUtilities = mapObject(fontSizeTheme, (modifier, value) => {
120+
const { a, b, c } = defaultConfig;
121+
122+
return [
123+
`.font-inter .${e(`text-${modifier}`)}, .font-inter.${e(`text-${modifier}`)}`,
124+
{
125+
...fontSizeStyles(value, { a, b, c })
126+
}
127+
];
128+
});
125129

126130
// Add @font-face if importFontFace: true
127131
// see https://rsms.me/inter/inter.css

0 commit comments

Comments
 (0)