feat: add Fluid Typography Generator extension for VSCode

- 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.
2026-06-06 22:21:22 -05:00
commit fa3df3e3f4
17 changed files with 4310 additions and 0 deletions
@@ -0,0 +1,118 @@
+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\);/);
+});