Keith Solomon
fa3df3e3f4
- Implemented core functionality to generate fluid typography CSS variables based on user-defined breakpoints and font sizes. - Created configuration options for output format (Tailwind or vanilla CSS) and rounding settings. - Added input parsing for settings from text files or VSCode interface. - Developed CSS generation logic with support for `clamp()` and optional rounding. - Included tests for parsing settings, generating CSS, and inserting text at selection in the editor. - Documented project details and usage in project.md. - Added example CSS output in typography.css.
119 lines
3.0 KiB
JavaScript
119 lines
3.0 KiB
JavaScript
const assert = require('node:assert/strict');
|
|
const test = require('node:test');
|
|
|
|
const {
|
|
formatNumber,
|
|
generateCss,
|
|
parseSettings,
|
|
} = require('../src/fluidTypography');
|
|
|
|
const sampleInput = `Low: 360px
|
|
High: 1920px
|
|
|
|
text-14px: 12px-14px
|
|
text-18px: 16px-18px`;
|
|
|
|
test('parseSettings reads breakpoints and font-size variable ranges', () => {
|
|
assert.deepEqual(parseSettings(sampleInput), {
|
|
css: 'tailwind',
|
|
round: true,
|
|
roundValue: '2px',
|
|
low: 360,
|
|
high: 1920,
|
|
sizes: [
|
|
{ name: 'text-14px', min: 12, max: 14 },
|
|
{ name: 'text-18px', min: 16, max: 18 },
|
|
],
|
|
});
|
|
});
|
|
|
|
test('parseSettings reads CSS and rounding overrides', () => {
|
|
assert.deepEqual(parseSettings(`CSS: vanilla
|
|
Round: no
|
|
Low: 320px
|
|
High: 1440px
|
|
text-20px: 18px-20px`), {
|
|
css: 'vanilla',
|
|
round: false,
|
|
roundValue: '2px',
|
|
low: 320,
|
|
high: 1440,
|
|
sizes: [
|
|
{ name: 'text-20px', min: 18, max: 20 },
|
|
],
|
|
});
|
|
|
|
assert.equal(parseSettings(`Round: yes, 4px
|
|
Low: 360px
|
|
High: 1920px
|
|
text-20px: 18px-20px`).roundValue, '4px');
|
|
});
|
|
|
|
test('parseSettings uses provided defaults when input omits optional settings', () => {
|
|
const settings = parseSettings(sampleInput, {
|
|
css: 'vanilla',
|
|
round: false,
|
|
roundValue: '1px',
|
|
});
|
|
|
|
assert.equal(settings.css, 'vanilla');
|
|
assert.equal(settings.round, false);
|
|
assert.equal(settings.roundValue, '1px');
|
|
});
|
|
|
|
test('parseSettings reports missing breakpoints and malformed ranges', () => {
|
|
assert.throws(
|
|
() => parseSettings('Low: 360px\ntext-14px: 12px/14px'),
|
|
/Missing High breakpoint[\s\S]*Line 2/,
|
|
);
|
|
});
|
|
|
|
test('formatNumber trims unnecessary trailing zeros', () => {
|
|
assert.equal(formatNumber(1), '1');
|
|
assert.equal(formatNumber(1.25), '1.25');
|
|
assert.equal(formatNumber(0.721153846), '0.7212');
|
|
});
|
|
|
|
test('generateCss emits comments, viewport table, and rounded clamp variables', () => {
|
|
const css = generateCss(sampleInput);
|
|
|
|
assert.match(css, /text-14px: 12px-14px/);
|
|
assert.match(css, /Font sizes at standard viewport widths:/);
|
|
assert.match(css, /text-14px \| 12\.00 \| 12\.36/);
|
|
assert.match(
|
|
css,
|
|
/--text-14px: round\(down, clamp\(0\.75rem, 0\.7212rem \+ 0\.1282vw, 0\.875rem\), 2px\);/,
|
|
);
|
|
assert.match(
|
|
css,
|
|
/--text-18px: round\(down, clamp\(1rem, 0\.9712rem \+ 0\.1282vw, 1\.125rem\), 2px\);/,
|
|
);
|
|
});
|
|
|
|
test('generateCss emits vanilla CSS and unrounded clamp values', () => {
|
|
const css = generateCss(`CSS: vanilla
|
|
Round: no
|
|
Low: 360px
|
|
High: 1920px
|
|
text-14px: 12px-14px`);
|
|
|
|
assert.match(css, /:root \{/);
|
|
assert.doesNotMatch(css, /@theme static/);
|
|
assert.doesNotMatch(css, /round\(down/);
|
|
assert.match(
|
|
css,
|
|
/--text-14px: clamp\(0\.75rem, 0\.7212rem \+ 0\.1282vw, 0\.875rem\);/,
|
|
);
|
|
});
|
|
|
|
test('generateCss uses configured defaults unless project input overrides them', () => {
|
|
const css = generateCss(sampleInput, {
|
|
css: 'vanilla',
|
|
round: true,
|
|
roundValue: '4px',
|
|
});
|
|
|
|
assert.match(css, /:root \{/);
|
|
assert.match(css, /round\(down, clamp\(0\.75rem, 0\.7212rem \+ 0\.1282vw, 0\.875rem\), 4px\);/);
|
|
});
|