Skip to content

Commit 15e3eb1

Browse files
garronejgarronej
committed
Typography test passes
1 parent 2e16969 commit 15e3eb1

File tree

8 files changed

+241
-39
lines changed

8 files changed

+241
-39
lines changed

‎src/bin/css_to_ts/typography.ts

Lines changed: 25 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
11
import { getRulesByBreakpoint, parseBreakpointsValues } from "./breakpoints";
2-
import {
3-
createGetCssVariable,
4-
isInvariantAcrossScreenSizes,
5-
isInvariantAcrossTheme
6-
} from "./cssVariable";
72
import { objectKeys } from "tsafe/objectKeys";
3+
import { capitalize } from "tsafe/capitalize";
84
import { assert } from "tsafe/assert";
9-
import { is } from "tsafe/is";
105

116
// Object that represent a set of CSS rules, see https://www.npmjs.com/package/csstype
127
// It's the argument of the `css()` function of @emotion/css.
@@ -24,8 +19,6 @@ export function parseTypographyVariants(rawCssCode: string): TypographyVariant[]
2419

2520
const { mediaQueryByBreakpoint } = parseBreakpointsValues(rawCssCode);
2621

27-
const { getCssVariable } = createGetCssVariable(rawCssCode);
28-
2922
objectKeys(rulesByBreakpoint).forEach(breakpoint => {
3023
const mediaQuery = breakpoint === "root" ? undefined : mediaQueryByBreakpoint[breakpoint];
3124

@@ -38,24 +31,35 @@ export function parseTypographyVariants(rawCssCode: string): TypographyVariant[]
3831

3932
const style: CSSObject = {};
4033

41-
rule.declarations.forEach(
42-
declaration =>
43-
(style[(declaration as any).property] = (() => {
44-
const value = declaration.value as string;
34+
rule.declarations.forEach(declaration => {
35+
const property: string = (declaration as any).property;
36+
37+
assert(
38+
!property.startsWith("--"),
39+
"We don't know how to deal with variables redefined specifically for typography"
40+
);
4541

46-
int: {
47-
const n = parseInt(value.replace(/px$/, ""));
42+
return (style[
43+
property
44+
.split("-")
45+
.map((word, i) => (i === 0 ? word : capitalize(word)))
46+
.join("")
47+
] = (() => {
48+
const value = declaration.value as string;
4849

49-
if (isNaN(n)) {
50-
break int;
51-
}
50+
int: {
51+
const matchArr = value.match(/^([0-9]+(?:\.[0-9]+)?)(?:px)?$/);
5252

53-
return n;
53+
if (matchArr === null) {
54+
break int;
5455
}
5556

56-
return value;
57-
})())
58-
);
57+
return Number.parseFloat(matchArr[1]);
58+
}
59+
60+
return value;
61+
})());
62+
});
5963

6064
matchedSelectors.forEach(selector => {
6165
const typographyVariant = typographyVariants.find(

‎src/test/bin/colorDecisions/generateGetColorDecisionsTsCode.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ const input = `
3030
3131
@media (min-width: 48em) { }
3232
33-
@media (min-width: 78em) { }
34-
3533
@media (min-width: 62em) { }
34+
35+
@media (min-width: 78em) { }
3636
`;
3737

3838
const expected = `

‎src/test/bin/colorDecisions/parseColorDecision.test.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,9 +32,9 @@ const rawCssCode = `
3232
3333
@media (min-width: 48em) { }
3434
35-
@media (min-width: 78em) { }
36-
3735
@media (min-width: 62em) { }
36+
37+
@media (min-width: 78em) { }
3838
`;
3939

4040
const got = parseColorDecision(rawCssCode);

‎src/test/bin/colorDecisions/parseColorDecisionName.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@ const rawCssCode = `
3434
3535
@media (min-width: 36em) { }
3636
@media (min-width: 48em) { }
37-
@media (min-width: 78em) { }
3837
@media (min-width: 62em) { }
38+
@media (min-width: 78em) { }
3939
`;
4040

4141
const { parseColorDecisionName } = createParseColorDecisionName(rawCssCode);

‎src/test/bin/colorOptions/generateGetColorOptionsTsCode.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ const input = `
5151
5252
@media (min-width: 36em) { }
5353
@media (min-width: 48em) { }
54-
@media (min-width: 78em) { }
5554
@media (min-width: 62em) { }
55+
@media (min-width: 78em) { }
5656
`;
5757

5858
const expected = `

‎src/test/bin/colorOptions/parseColorOptions.test.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ const rawCssCode = `
5353
5454
@media (min-width: 36em) { }
5555
@media (min-width: 48em) { }
56-
@media (min-width: 78em) { }
5756
@media (min-width: 62em) { }
57+
@media (min-width: 78em) { }
5858
`;
5959

6060
const got = parseColorOptions(rawCssCode);

‎src/test/bin/cssVariable.test.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,14 +29,14 @@ const rawCssCode = `
2929
}
3030
3131
}
32-
33-
@media (min-width: 78em) {
32+
@media (min-width: 62em) {
3433
:root {
3534
--my-var-3: #000001;
3635
}
3736
}
3837
39-
@media (min-width: 62em) { }
38+
@media (min-width: 78em) { }
39+
4040
`;
4141

4242
const { getCssVariable } = createGetCssVariable(rawCssCode);

‎src/test/bin/typography/parseTypographyVariants.test.ts

Lines changed: 206 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@ import { parseTypographyVariants } from "../../../bin/css_to_ts/typography";
22
import type { TypographyVariant } from "../../../bin/css_to_ts/typography";
33
import { assert } from "tsafe/assert";
44
import { same } from "evt/tools/inDepth/same";
5-
import * as fs from "fs";
65

76
console.log(`Running test ${__filename}`);
87

98
const rawCssCode = `
109
1110
:root {
1211
--title-spacing: 0 0 1.5rem;
12+
--text-spacing: 0 0 1.5rem;
1313
}
1414
1515
h6 {
@@ -359,18 +359,14 @@ sup {
359359

360360
const got = parseTypographyVariants(rawCssCode);
361361

362-
fs.writeFileSync("./view.json", Buffer.from(got as any, "utf8"));
363-
364-
//console.log(got);
365-
366362
const expected: TypographyVariant[] = [
367363
{
368364
"selector": "h6",
369365
"style": {
370366
"fontWeight": 700,
371367
"fontSize": "1.125rem",
372368
"lineHeight": "1.5rem",
373-
"margin": "0 0 1.5rem",
369+
"margin": "var(--title-spacing)",
374370
"@media (min-width: 48em)": {
375371
"fontSize": "1.25rem",
376372
"lineHeight": "1.75rem"
@@ -383,14 +379,216 @@ const expected: TypographyVariant[] = [
383379
"fontWeight": 700,
384380
"fontSize": "1.25rem",
385381
"lineHeight": "1.75rem",
386-
"margin": "0 0 1.5rem",
382+
"margin": "var(--title-spacing)",
387383
"@media (min-width: 48em)": {
388384
"fontSize": "1.375rem",
389385
"lineHeight": "1.75rem"
390386
}
391387
}
388+
},
389+
{
390+
"selector": "h4",
391+
"style": {
392+
"fontWeight": 700,
393+
"fontSize": "1.375rem",
394+
"lineHeight": "1.75rem",
395+
"margin": "var(--title-spacing)",
396+
"@media (min-width: 48em)": {
397+
"fontSize": "1.5rem",
398+
"lineHeight": "2rem"
399+
}
400+
}
401+
},
402+
{
403+
"selector": "h3",
404+
"style": {
405+
"fontWeight": 700,
406+
"fontSize": "1.5rem",
407+
"lineHeight": "2rem",
408+
"margin": "var(--title-spacing)",
409+
"@media (min-width: 48em)": {
410+
"fontSize": "1.75rem",
411+
"lineHeight": "2.25rem"
412+
}
413+
}
414+
},
415+
{
416+
"selector": "h2",
417+
"style": {
418+
"fontWeight": 700,
419+
"fontSize": "1.75rem",
420+
"lineHeight": "2.25rem",
421+
"margin": "var(--title-spacing)",
422+
"@media (min-width: 48em)": {
423+
"fontSize": "2rem",
424+
"lineHeight": "2.5rem"
425+
}
426+
}
427+
},
428+
{
429+
"selector": "h1",
430+
"style": {
431+
"fontWeight": 700,
432+
"fontSize": "2rem",
433+
"lineHeight": "2.5rem",
434+
"margin": "var(--title-spacing)",
435+
"@media (min-width: 48em)": {
436+
"fontSize": "2.5rem",
437+
"lineHeight": "3rem"
438+
}
439+
}
440+
},
441+
{
442+
"selector": "p",
443+
"style": {
444+
"fontSize": "1rem",
445+
"lineHeight": "1.5rem",
446+
"margin": "var(--text-spacing)"
447+
}
448+
},
449+
{
450+
"selector": ".fr-text--light",
451+
"style": {
452+
"fontWeight": "300 !important"
453+
}
454+
},
455+
{
456+
"selector": ".fr-text--regular",
457+
"style": {
458+
"fontWeight": "400 !important"
459+
}
460+
},
461+
{
462+
"selector": ".fr-text--bold",
463+
"style": {
464+
"fontWeight": "700 !important"
465+
}
466+
},
467+
{
468+
"selector": ".fr-text--heavy",
469+
"style": {
470+
"fontWeight": "900 !important"
471+
}
472+
},
473+
{
474+
"selector": ".fr-display--xs",
475+
"style": {
476+
"fontWeight": "700 !important",
477+
"fontSize": "2.5rem !important",
478+
"lineHeight": "3rem !important",
479+
"margin": "var(--display-spacing)",
480+
"@media (min-width: 48em)": {
481+
"fontSize": "3rem !important",
482+
"lineHeight": "3.5rem !important"
483+
}
484+
}
485+
},
486+
{
487+
"selector": ".fr-display--sm",
488+
"style": {
489+
"fontWeight": "700 !important",
490+
"fontSize": "3rem !important",
491+
"lineHeight": "3.5rem !important",
492+
"margin": "var(--display-spacing)",
493+
"@media (min-width: 48em)": {
494+
"fontSize": "3.5rem !important",
495+
"lineHeight": "4rem !important"
496+
}
497+
}
498+
},
499+
{
500+
"selector": ".fr-display--md",
501+
"style": {
502+
"fontWeight": "700 !important",
503+
"fontSize": "3.5rem !important",
504+
"lineHeight": "4rem !important",
505+
"margin": "var(--display-spacing)",
506+
"@media (min-width: 48em)": {
507+
"fontSize": "4rem !important",
508+
"lineHeight": "4.5rem !important"
509+
}
510+
}
511+
},
512+
{
513+
"selector": ".fr-display--lg",
514+
"style": {
515+
"fontWeight": "700 !important",
516+
"fontSize": "4rem !important",
517+
"lineHeight": "4.5rem !important",
518+
"margin": "var(--display-spacing)",
519+
"@media (min-width: 48em)": {
520+
"fontSize": "4.5rem !important",
521+
"lineHeight": "5rem !important"
522+
}
523+
}
524+
},
525+
{
526+
"selector": ".fr-display--xl",
527+
"style": {
528+
"fontWeight": "700 !important",
529+
"fontSize": "4.5rem !important",
530+
"lineHeight": "5rem !important",
531+
"margin": "var(--display-spacing)",
532+
"@media (min-width: 48em)": {
533+
"fontSize": "5rem !important",
534+
"lineHeight": "5.5rem !important"
535+
}
536+
}
537+
},
538+
{
539+
"selector": ".fr-text--alt",
540+
"style": {
541+
"fontFamily": '"Spectral", georgia, serif !important'
542+
}
543+
},
544+
{
545+
"selector": ".fr-text--xs",
546+
"style": {
547+
"fontSize": "0.75rem !important",
548+
"lineHeight": "1.25rem !important",
549+
"margin": "var(--text-spacing)"
550+
}
551+
},
552+
{
553+
"selector": ".fr-text--sm",
554+
"style": {
555+
"fontSize": "0.875rem !important",
556+
"lineHeight": "1.5rem !important",
557+
"margin": "var(--text-spacing)"
558+
}
559+
},
560+
{
561+
"selector": ".fr-text--md",
562+
"style": {
563+
"fontSize": "1rem !important",
564+
"lineHeight": "1.5rem !important",
565+
"margin": "var(--text-spacing)"
566+
}
567+
},
568+
{
569+
"selector": ".fr-text--lg",
570+
"style": {
571+
"fontSize": "1.125rem !important",
572+
"lineHeight": "1.75rem !important",
573+
"margin": "var(--text-spacing)"
574+
}
575+
},
576+
{
577+
"selector": ".fr-text--xl",
578+
"style": {
579+
"fontSize": "1.25rem !important",
580+
"lineHeight": "2rem !important",
581+
"margin": "var(--text-spacing)"
582+
}
583+
},
584+
{
585+
"selector": ".fr-text--lead",
586+
"style": {
587+
"fontSize": "1.25rem !important",
588+
"lineHeight": "2rem !important",
589+
"margin": "var(--text-spacing)"
590+
}
392591
}
393-
/* ... */
394592
];
395593

396594
assert(same(got, expected));

0 commit comments

Comments
 (0)