Parse spacing

Author: garronej

src/bin/css_to_ts/spacing.ts

@@ -1,18 +1,90 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-/*
+import memoize from "memoizee";
 import { assert } from "tsafe/assert";
-import type { Equals } from "tsafe";
-import { objectKeys } from "tsafe/objectKeys";
 import { exclude } from "tsafe/exclude";
-import { parseCss } from "./parseCss";
-*/
-import memoize from "memoizee";
+import { getRulesByBreakpoint } from "./breakpoints";
+import { objectKeys } from "tsafe/objectKeys";
 
 export type SpacingTokenAndValue = { token: string; value: string };
 
 export const parseSpacing = memoize((rawCssCode: string): SpacingTokenAndValue[] => {
-    //const parsedCss = parseCss(rawCssCode);
-    console.log(rawCssCode);
+    const spacingTokenAndValues: SpacingTokenAndValue[] = [];
+
+    const rulesByBreakpoint = getRulesByBreakpoint(rawCssCode);
+
+    objectKeys(rulesByBreakpoint).forEach(breakpoint => {
+        rulesByBreakpoint[breakpoint].forEach(({ selectors, declarations }) => {
+            let value: string | undefined = undefined;
+
+            selectors
+                .map((selector: string) => {
+                    const matchArr = selector.match(/^.fr-m-([0-9]+[a-zA-Z])+$/);
+                    return matchArr === null ? undefined : matchArr[1];
+                })
+                .filter(exclude(undefined))
+                .forEach(token => {
+                    if (value === undefined) {
+                        const declaration = declarations.find(
+                            (declaration: any) =>
+                                declaration.type === "declaration" &&
+                                declaration.property === "margin"
+                        );
+                        assert(declaration !== undefined);
+                        value = (declaration as any).value.replace(
+                            /\s*!important\s*$/,
+                            ""
+                        ) as string;
+                    }
+
+                    const preExistingSpacingTokenAndValues = spacingTokenAndValues.find(
+                        o => o.token === token
+                    );
+
+                    if (breakpoint !== "root") {
+                        assert(
+                            preExistingSpacingTokenAndValues !== undefined &&
+                                preExistingSpacingTokenAndValues.value === value,
+                            "Need tu update the module so that we support spacing that varies depending on screen sizes, so far we assumed they didn't"
+                        );
+
+                        return;
+                    }
+
+                    assert(spacingTokenAndValues.find(o => o.token === token) === undefined);
+
+                    spacingTokenAndValues.push({
+                        token,
+                        value
+                    });
+                });
+        });
+    });
+
+    {
+        const getValueWeight = (value: string) => {
+            const match = value.match(/^([0-9.]+)/);
+            assert(match !== null);
+            const n = parseFloat(match[1]);
+            assert(!isNaN(n));
+            return n;
+        };
+
+        spacingTokenAndValues.sort((a, b) => {
+            const w1 = getValueWeight(a.value);
+            const w2 = getValueWeight(b.value);
+
+            if (w1 === w2) {
+                if (a.token < b.token) {
+                    return -1;
+                }
+                if (a.token > b.token) {
+                    return 1;
+                }
+                return 0;
+            }
+
+            return w1 - w2;
+        });
+    }
 
-    return null as any;
+    return spacingTokenAndValues;
 });

test/behavior/bin/index.ts

@@ -1,19 +1,12 @@
 import testCases from "cases-of-test";
 import _0 from "./colorDecisions";
 import _1 from "./colorOptions";
-//import _2 from "./spacing";
+import _2 from "./spacing";
 import _3 from "./typography";
 import _4 from "./breakpoints.test";
 import _5 from "./cssVariable.test";
 
 export default () =>
     testCases({
-        "tests": [
-            [_0],
-            [_1],
-            //[_2],
-            [_3],
-            [_4],
-            [_5]
-        ]
+        "tests": [[_0], [_1], [_2], [_3], [_4], [_5]]
     });

test/behavior/bin/spacing/parseSpacing.test.ts

@@ -29,8 +29,12 @@ export default () =>
                 "value": "1.75rem"
             },
             {
-                "token": "7v",
-                "value": "1.75rem"
+                "token": "12v",
+                "value": "3rem"
+            },
+            {
+                "token": "6w",
+                "value": "3rem"
             }
         ];
 

test/behavior/bin/typography/parseTypographyVariants.test.ts

@@ -591,5 +591,3 @@ sup {
 
         expect(got).toStrictEqual(expected);
     });
-
-console.log("PASS");