Skip to content

Commit 08312a4

Browse files
davidhellmanndavidhellmann
committed
✨ feat: possibity to use theme() function.
1 parent 02240f4 commit 08312a4

File tree

8 files changed

+1642
-121
lines changed

8 files changed

+1642
-121
lines changed

‎package-lock.json‎

Lines changed: 1464 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tailwindcss-fluid-type",
3-
"version": "1.3.3",
3+
"version": "2.0.0.alpha.1",
44
"description": "Bring fluid type to tailwindcss",
55
"main": "src/index.js",
66
"license": "MIT",

‎src/config/defaults.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Default Settings
3+
*/
4+
5+
module.exports = {
6+
settings: {
7+
fontSizeMin: 1.125,
8+
fontSizeMax: 1.25,
9+
ratioMin: 1.125,
10+
ratioMax: 1.2,
11+
screenMin: 20,
12+
screenMax: 96,
13+
unit: 'rem',
14+
prefix: '',
15+
},
16+
values: {
17+
'xs': [-2, 1.6],
18+
'sm': [-1, 1.6],
19+
'base': [0, 1.6],
20+
'lg': [1, 1.6],
21+
'xl': [2, 1.2],
22+
'2xl': [3, 1.2],
23+
'3xl': [4, 1.2],
24+
'4xl': [5, 1.1],
25+
'5xl': [6, 1.1],
26+
'6xl': [7, 1.1],
27+
'7xl': [8, 1],
28+
'8xl': [9, 1],
29+
'9xl': [10, 1],
30+
},
31+
variants: ['responsive']
32+
};

‎src/index.js‎

Lines changed: 16 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -1,122 +1,20 @@
11
const plugin = require('tailwindcss/plugin')
2-
// Defaults
3-
const DEFAULT_SETTINGS = {
4-
fontSizeMin: 1.125,
5-
fontSizeMax: 1.25,
6-
ratioMin: 1.125,
7-
ratioMax: 1.2,
8-
screenMin: 20,
9-
screenMax: 96,
10-
unit: 'rem',
11-
prefix: '',
12-
}
13-
const DEFAULT_VALUES = {
14-
'xs': [-2, 1.6],
15-
'sm': [-1, 1.6],
16-
'base': [0, 1.6],
17-
'lg': [1, 1.6],
18-
'xl': [2, 1.2],
19-
'2xl': [3, 1.2],
20-
'3xl': [4, 1.2],
21-
'4xl': [5, 1.1],
22-
'5xl': [6, 1.1],
23-
'6xl': [7, 1.1],
24-
'7xl': [8, 1],
25-
'8xl': [9, 1],
26-
'9xl': [10, 1],
27-
}
28-
const DEFAULT_VARIANTS = ['responsive']
29-
30-
module.exports = plugin(
31-
function ({addUtilities, theme, variants, e}) {
32-
const values = theme('fluidType.values', DEFAULT_VALUES);
33-
const prefix = theme('fluidType.settings.prefix', DEFAULT_SETTINGS.prefix);
34-
const settingsAsArray = Object.entries(theme('fluidType.settings', DEFAULT_SETTINGS));
35-
const settingsAsArrayFiltered = settingsAsArray
36-
.filter(([key, value]) => key !== 'unit')
37-
.filter(([key, value]) => key !== 'prefix');
38-
const finalSettings = Object.fromEntries(settingsAsArrayFiltered);
39-
const settingsAreNumbers = Object
40-
.values(finalSettings)
41-
.every(value => typeof value === 'number')
42-
43-
const calcModularScale = (value = 0) => {
44-
if (settingsAreNumbers) {
45-
const sFtMin = theme('fluidType.settings.fontSizeMin', DEFAULT_SETTINGS.fontSizeMin);
46-
const sFtMax = theme('fluidType.settings.fontSizeMax', DEFAULT_SETTINGS.fontSizeMax);
47-
const sFtRMin = theme('fluidType.settings.ratioMin', DEFAULT_SETTINGS.ratioMin);
48-
const sFtRMax = theme('fluidType.settings.ratioMax', DEFAULT_SETTINGS.ratioMax);
49-
const sFtSMin = theme('fluidType.settings.screenMin', DEFAULT_SETTINGS.screenMin);
50-
const sFtSMax = theme('fluidType.settings.screenMax', DEFAULT_SETTINGS.screenMax);
51-
const sFtUnit = typeof theme('fluidType.settings.unit', DEFAULT_SETTINGS.unit) === 'string'
52-
? theme('fluidType.settings.unit', DEFAULT_SETTINGS.unit)
53-
: 'rem';
54-
const ftMin = sFtMin * Math.pow(sFtRMin, value);
55-
const ftMax = sFtMax * Math.pow(sFtRMax, value);
56-
return `clamp(${ftMin}${sFtUnit}, calc(${ftMin}${sFtUnit} + ((${ftMax} - ${ftMin}) * ((100vw - ${sFtSMin}${sFtUnit}) / (${sFtSMax} - ${sFtSMin})))), ${ftMax}${sFtUnit})`;
2+
const defaults = require('./config/defaults')
3+
const createClasses = require('./utils/createClasses')
4+
const createThemeOptions = require('./utils/createThemeOptions')
5+
6+
module.exports = plugin.withOptions(
7+
function (options) {
8+
return function ({addUtilities, variants, e}) {
9+
addUtilities(createClasses(options, e),
10+
variants('fontSize', defaults.variants));
11+
};
12+
},
13+
function (options) {
14+
return {
15+
theme: {
16+
fontSize: createThemeOptions(options, defaults)
5717
}
58-
return value;
5918
};
60-
61-
addUtilities(
62-
[
63-
Object.entries(values).map(([key, value]) => {
64-
let output = {};
65-
66-
// Check if value is a string
67-
if (typeof value === 'string') {
68-
output.fontSize = value
69-
}
70-
71-
// Check if value is a number
72-
if (Number.isInteger(value)) {
73-
output.fontSize = calcModularScale(value)
74-
}
75-
76-
// Check if value is array with length 1
77-
if (Array.isArray(value) && value.length === 1) {
78-
output.fontSize = Number.isInteger(value[0]) ? calcModularScale(value[0]) : value[0]
79-
}
80-
81-
// Check if value is array with length 2
82-
if (Array.isArray(value) && value.length === 2) {
83-
84-
// Check if second value is an object
85-
if (typeof value[1] === 'object' && value[1] !== null) {
86-
output.fontSize = Number.isInteger(value[0]) ? calcModularScale(value[0]) : value[0]
87-
88-
// Check if key lineHeight exists
89-
if ("lineHeight" in value[1]) {
90-
output.lineHeight = value[1]['lineHeight']
91-
}
92-
93-
// Check if key letterSpacing exists
94-
if ("letterSpacing" in value[1]) {
95-
output.letterSpacing = value[1]['letterSpacing']
96-
}
97-
} else {
98-
output.fontSize = Number.isInteger(value[0]) ? calcModularScale(value[0]) : value[0]
99-
output.lineHeight = value[1]
100-
}
101-
}
102-
103-
return {
104-
[`.${e(`${prefix}text-${key}`)}`]: output,
105-
}
106-
}),
107-
],
108-
variants('fluidType', DEFAULT_VARIANTS)
109-
)
11019
},
111-
{
112-
theme: {
113-
fluidType: {
114-
settings: DEFAULT_SETTINGS,
115-
values: DEFAULT_VALUES
116-
},
117-
},
118-
variants: {
119-
fluidType: DEFAULT_VARIANTS,
120-
},
121-
}
122-
)
20+
);

‎src/utils/calcModularScale.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
const defaults = require("../config/defaults");
2+
3+
module.exports = (value, data) => {
4+
if (data.settingsAreNumbers && data.settings && defaults.settings) {
5+
const sFtMin = data.settings?.fontSizeMin || defaults.settings?.fontSizeMin
6+
const sFtMax = data.settings?.fontSizeMax || defaults.settings?.fontSizeMax
7+
const sFtRMin = data.settings?.ratioMin || defaults.settings?.ratioMin
8+
const sFtRMax = data.settings?.ratioMax || defaults.settings?.ratioMax
9+
const sFtSMin = data.settings?.screenMin || defaults.settings?.screenMin
10+
const sFtSMax = data.settings?.screenMax || defaults.settings?.screenMax
11+
const unit = data.settings?.unit || defaults.settings?.unit
12+
const sFtUnit = typeof unit === 'string' ? unit : 'rem';
13+
const ftMin = sFtMin * Math.pow(sFtRMin, value);
14+
const ftMax = sFtMax * Math.pow(sFtRMax, value);
15+
return `clamp(${ftMin}${sFtUnit}, calc(${ftMin}${sFtUnit} + ((${ftMax} - ${ftMin}) * ((100vw - ${sFtSMin}${sFtUnit}) / (${sFtSMax} - ${sFtSMin})))), ${ftMax}${sFtUnit})`;
16+
}
17+
return value;
18+
}

‎src/utils/createClasses.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
const calcModularScale = require('./calcModularScale')
2+
const createData = require('./createData')
3+
const defaults = require("../config/defaults");
4+
5+
module.exports = (options, e) => {
6+
const data = createData(options, {}, defaults)
7+
8+
if (data.values) {
9+
return Object.entries(data.values).map(([key, value]) => {
10+
let output = {};
11+
12+
// Check if value is a string
13+
if (typeof value === 'string') {
14+
output.fontSize = value
15+
}
16+
17+
// Check if value is a number
18+
if (Number.isInteger(value)) {
19+
output.fontSize = calcModularScale(value, data)
20+
}
21+
22+
// Check if value is array with length 1
23+
if (Array.isArray(value) && value.length === 1) {
24+
output.fontSize = Number.isInteger(value[0]) ? calcModularScale(value[0], data) : value[0]
25+
}
26+
27+
// Check if value is array with length 2
28+
if (Array.isArray(value) && value.length === 2) {
29+
30+
31+
// Check if second value is an object
32+
if (typeof value[1] === 'object' && value[1] !== null) {
33+
output.fontSize = Number.isInteger(value[0]) ? calcModularScale(value[0], data) : value[0]
34+
35+
// Check if key lineHeight exists
36+
if ("lineHeight" in value[1]) {
37+
output.lineHeight = value[1]['lineHeight']
38+
}
39+
40+
// Check if key letterSpacing exists
41+
if ("letterSpacing" in value[1]) {
42+
output.letterSpacing = value[1]['letterSpacing']
43+
}
44+
} else {
45+
output.fontSize = Number.isInteger(value[0]) ? calcModularScale(value[0], data) : value[0]
46+
output.lineHeight = value[1]
47+
}
48+
}
49+
50+
return {
51+
[`.${e(`${data.prefix}text-${key}`)}`]: output,
52+
}
53+
})
54+
}
55+
}

‎src/utils/createData.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const defaults = require("../config/defaults");
2+
3+
module.exports = (options, data) => {
4+
if (defaults.settings && defaults.values && options.settings && options.values) {
5+
// Add settings
6+
data.settings = Object.fromEntries(Object.entries({
7+
...options.settings, ...defaults.settings
8+
}).filter(([key]) => key !== 'unit').filter(([key]) => key !== 'prefix'));
9+
10+
// Add values
11+
data.values = {...options.values, ...defaults.values}
12+
13+
// Add prefix
14+
data.prefix = options.settings?.prefix || defaults.settings?.prefix || ''
15+
16+
// Add number check
17+
data.settingsAreNumbers = Object
18+
.values(data.settings)
19+
.every(value => typeof value === 'number')
20+
21+
return data
22+
}
23+
}

‎src/utils/createThemeOptions.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const calcModularScale = require('./calcModularScale')
2+
const createData = require('./createData')
3+
4+
module.exports = (options) => {
5+
const data = createData(options, {})
6+
const theme = {}
7+
if (data.values) {
8+
Object.entries(data.values).map(([key, value]) => {
9+
10+
// Check if value is a string
11+
if (typeof value === 'string') {
12+
theme[key] = value
13+
}
14+
15+
// Check if value is a number
16+
if (Number.isInteger(value)) {
17+
theme[key] = calcModularScale(value, data)
18+
}
19+
20+
// Check if value is array with length 1
21+
if (Array.isArray(value) && value.length === 1) {
22+
theme[key] = Number.isInteger(value[0]) ? calcModularScale(value[0], data) : value[0]
23+
}
24+
25+
// Check if value is array with length 2
26+
if (Array.isArray(value) && value.length === 2) {
27+
theme[key] = Number.isInteger(value[0]) ? calcModularScale(value[0], data) : value[0]
28+
}
29+
})
30+
31+
return theme
32+
}
33+
}

0 commit comments

Comments
 (0)