@thi.ng/hiccup-css example to generate tachyons.css width & height rules incl. their media query versions

rulegen.ts

import * as fs from "fs";

import * as css from "@thi.ng/hiccup-css";

const mediaQueries = [
    [""],
    ["-ns", "--breakpoint-no-small"],
    ["-m", "--breakpoint-medium"],
    ["-l", "--breakpoint-large"]
];

const remScale = [[1, 1], [2, 2], [3, 4], [4, 8], [5, 16]];
const percScale = [10, 20, 25, 30, 33, 34, 40, 50, 60, 70, 75, 80, 90, 100].map(x => [x, x]);

// single attrib css rule builder
const rule = (pre, key) => (suffix, unit) => ([id, u]) => [pre + id + suffix, { [key]: unit(u) }];

// create rule instances for the different scales above (plus 3 others)
const group = (prefix1, prefix2, attr) => {
    const r1 = rule(prefix1, attr);
    const r2 = rule(prefix2, attr);
    return (suffix) =>
        [
            remScale.map(r1(suffix, css.rem)),
            percScale.map(r2(suffix, css.perc)),
            [prefix2 + "third" + suffix, { [attr]: "calc(100% / 3 )" }],
            [prefix2 + "two-thirds" + suffix, { [attr]: "calc(100% / 1.5 )" }],
            [prefix2 + "auto" + suffix, { [attr]: "auto" }],
        ];
};

// create all versions of given rule group using above media queries
const allVersions = (group) =>
    mediaQueries.map(([mq, cond]) => cond ? [css.at_media(cond, group(mq))] : group(mq));

// generate all tachyons.css width & height rules
const root = [
    [css.comment("generated, don't edit", true)],
    allVersions(group(".w", ".w-", "width")),
    allVersions(group(".h", ".h-", "height")),
];

fs.writeFileSync("tachy.css", css.css(root, { format: css.PRETTY }));

tachy.css

/*
generated, don't edit
 */

.w1 {
    width: 1rem;
}

.w2 {
    width: 2rem;
}

.w3 {
    width: 4rem;
}

.w4 {
    width: 8rem;
}

.w5 {
    width: 16rem;
}

.w-10 {
    width: 10%;
}

.w-20 {
    width: 20%;
}

.w-25 {
    width: 25%;
}

.w-30 {
    width: 30%;
}

.w-33 {
    width: 33%;
}

.w-34 {
    width: 34%;
}

.w-40 {
    width: 40%;
}

.w-50 {
    width: 50%;
}

.w-60 {
    width: 60%;
}

.w-70 {
    width: 70%;
}

.w-75 {
    width: 75%;
}

.w-80 {
    width: 80%;
}

.w-90 {
    width: 90%;
}

.w-100 {
    width: 100%;
}

.w-third {
    width: calc(100% / 3 );
}

.w-two-thirds {
    width: calc(100% / 1.5 );
}

.w-auto {
    width: auto;
}

@media(--breakpoint-no-small) {

    .w1-ns {
        width: 1rem;
    }

    .w2-ns {
        width: 2rem;
    }

    .w3-ns {
        width: 4rem;
    }

    .w4-ns {
        width: 8rem;
    }

    .w5-ns {
        width: 16rem;
    }

    .w-10-ns {
        width: 10%;
    }

    .w-20-ns {
        width: 20%;
    }

    .w-25-ns {
        width: 25%;
    }

    .w-30-ns {
        width: 30%;
    }

    .w-33-ns {
        width: 33%;
    }

    .w-34-ns {
        width: 34%;
    }

    .w-40-ns {
        width: 40%;
    }

    .w-50-ns {
        width: 50%;
    }

    .w-60-ns {
        width: 60%;
    }

    .w-70-ns {
        width: 70%;
    }

    .w-75-ns {
        width: 75%;
    }

    .w-80-ns {
        width: 80%;
    }

    .w-90-ns {
        width: 90%;
    }

    .w-100-ns {
        width: 100%;
    }

    .w-third-ns {
        width: calc(100% / 3 );
    }

    .w-two-thirds-ns {
        width: calc(100% / 1.5 );
    }

    .w-auto-ns {
        width: auto;
    }

}

@media(--breakpoint-medium) {

    .w1-m {
        width: 1rem;
    }

    .w2-m {
        width: 2rem;
    }

    .w3-m {
        width: 4rem;
    }

    .w4-m {
        width: 8rem;
    }

    .w5-m {
        width: 16rem;
    }

    .w-10-m {
        width: 10%;
    }

    .w-20-m {
        width: 20%;
    }

    .w-25-m {
        width: 25%;
    }

    .w-30-m {
        width: 30%;
    }

    .w-33-m {
        width: 33%;
    }

    .w-34-m {
        width: 34%;
    }

    .w-40-m {
        width: 40%;
    }

    .w-50-m {
        width: 50%;
    }

    .w-60-m {
        width: 60%;
    }

    .w-70-m {
        width: 70%;
    }

    .w-75-m {
        width: 75%;
    }

    .w-80-m {
        width: 80%;
    }

    .w-90-m {
        width: 90%;
    }

    .w-100-m {
        width: 100%;
    }

    .w-third-m {
        width: calc(100% / 3 );
    }

    .w-two-thirds-m {
        width: calc(100% / 1.5 );
    }

    .w-auto-m {
        width: auto;
    }

}

@media(--breakpoint-large) {

    .w1-l {
        width: 1rem;
    }

    .w2-l {
        width: 2rem;
    }

    .w3-l {
        width: 4rem;
    }

    .w4-l {
        width: 8rem;
    }

    .w5-l {
        width: 16rem;
    }

    .w-10-l {
        width: 10%;
    }

    .w-20-l {
        width: 20%;
    }

    .w-25-l {
        width: 25%;
    }

    .w-30-l {
        width: 30%;
    }

    .w-33-l {
        width: 33%;
    }

    .w-34-l {
        width: 34%;
    }

    .w-40-l {
        width: 40%;
    }

    .w-50-l {
        width: 50%;
    }

    .w-60-l {
        width: 60%;
    }

    .w-70-l {
        width: 70%;
    }

    .w-75-l {
        width: 75%;
    }

    .w-80-l {
        width: 80%;
    }

    .w-90-l {
        width: 90%;
    }

    .w-100-l {
        width: 100%;
    }

    .w-third-l {
        width: calc(100% / 3 );
    }

    .w-two-thirds-l {
        width: calc(100% / 1.5 );
    }

    .w-auto-l {
        width: auto;
    }

}

.h1 {
    height: 1rem;
}

.h2 {
    height: 2rem;
}

.h3 {
    height: 4rem;
}

.h4 {
    height: 8rem;
}

.h5 {
    height: 16rem;
}

.h-10 {
    height: 10%;
}

.h-20 {
    height: 20%;
}

.h-25 {
    height: 25%;
}

.h-30 {
    height: 30%;
}

.h-33 {
    height: 33%;
}

.h-34 {
    height: 34%;
}

.h-40 {
    height: 40%;
}

.h-50 {
    height: 50%;
}

.h-60 {
    height: 60%;
}

.h-70 {
    height: 70%;
}

.h-75 {
    height: 75%;
}

.h-80 {
    height: 80%;
}

.h-90 {
    height: 90%;
}

.h-100 {
    height: 100%;
}

.h-third {
    height: calc(100% / 3 );
}

.h-two-thirds {
    height: calc(100% / 1.5 );
}

.h-auto {
    height: auto;
}

@media(--breakpoint-no-small) {

    .h1-ns {
        height: 1rem;
    }

    .h2-ns {
        height: 2rem;
    }

    .h3-ns {
        height: 4rem;
    }

    .h4-ns {
        height: 8rem;
    }

    .h5-ns {
        height: 16rem;
    }

    .h-10-ns {
        height: 10%;
    }

    .h-20-ns {
        height: 20%;
    }

    .h-25-ns {
        height: 25%;
    }

    .h-30-ns {
        height: 30%;
    }

    .h-33-ns {
        height: 33%;
    }

    .h-34-ns {
        height: 34%;
    }

    .h-40-ns {
        height: 40%;
    }

    .h-50-ns {
        height: 50%;
    }

    .h-60-ns {
        height: 60%;
    }

    .h-70-ns {
        height: 70%;
    }

    .h-75-ns {
        height: 75%;
    }

    .h-80-ns {
        height: 80%;
    }

    .h-90-ns {
        height: 90%;
    }

    .h-100-ns {
        height: 100%;
    }

    .h-third-ns {
        height: calc(100% / 3 );
    }

    .h-two-thirds-ns {
        height: calc(100% / 1.5 );
    }

    .h-auto-ns {
        height: auto;
    }

}

@media(--breakpoint-medium) {

    .h1-m {
        height: 1rem;
    }

    .h2-m {
        height: 2rem;
    }

    .h3-m {
        height: 4rem;
    }

    .h4-m {
        height: 8rem;
    }

    .h5-m {
        height: 16rem;
    }

    .h-10-m {
        height: 10%;
    }

    .h-20-m {
        height: 20%;
    }

    .h-25-m {
        height: 25%;
    }

    .h-30-m {
        height: 30%;
    }

    .h-33-m {
        height: 33%;
    }

    .h-34-m {
        height: 34%;
    }

    .h-40-m {
        height: 40%;
    }

    .h-50-m {
        height: 50%;
    }

    .h-60-m {
        height: 60%;
    }

    .h-70-m {
        height: 70%;
    }

    .h-75-m {
        height: 75%;
    }

    .h-80-m {
        height: 80%;
    }

    .h-90-m {
        height: 90%;
    }

    .h-100-m {
        height: 100%;
    }

    .h-third-m {
        height: calc(100% / 3 );
    }

    .h-two-thirds-m {
        height: calc(100% / 1.5 );
    }

    .h-auto-m {
        height: auto;
    }

}

@media(--breakpoint-large) {

    .h1-l {
        height: 1rem;
    }

    .h2-l {
        height: 2rem;
    }

    .h3-l {
        height: 4rem;
    }

    .h4-l {
        height: 8rem;
    }

    .h5-l {
        height: 16rem;
    }

    .h-10-l {
        height: 10%;
    }

    .h-20-l {
        height: 20%;
    }

    .h-25-l {
        height: 25%;
    }

    .h-30-l {
        height: 30%;
    }

    .h-33-l {
        height: 33%;
    }

    .h-34-l {
        height: 34%;
    }

    .h-40-l {
        height: 40%;
    }

    .h-50-l {
        height: 50%;
    }

    .h-60-l {
        height: 60%;
    }

    .h-70-l {
        height: 70%;
    }

    .h-75-l {
        height: 75%;
    }

    .h-80-l {
        height: 80%;
    }

    .h-90-l {
        height: 90%;
    }

    .h-100-l {
        height: 100%;
    }

    .h-third-l {
        height: calc(100% / 3 );
    }

    .h-two-thirds-l {
        height: calc(100% / 1.5 );
    }

    .h-auto-l {
        height: auto;
    }

}