Design constraints with css classes and typescript validation and auto-completion

[kaaboaye]

• Your full name: Mieszko Wawrzyniak
• Target audience (beginner/intermediate/advanced/everyone): intermediate
• Estimated duration: 20 min
• Keywords:

<Title of your talk>

Design constraints with css classes and typescript validation and auto-completion

Title is WIP

The talk

One-sentence summary

I'll explain how you can leverage Typescript template literal types to create both run-time and compile time classes enabling your very own Tailwind-like developer experience.

What's the format — is it a case study, a live coding session, a workshop or something else?

case study

Tell us more about the talk

I'll most likely go through the following file and show step by step how Typescript's type system can infer types in various real time scenarios.

// register global styles
declare global {
  interface Window {
    sfrStyles?: HTMLStyleElement;
  }
}

const atomicClasses = (() => {
  const baseClasses = {
    hide: "display: none",
    block: "display: block",
    "inline-block": "display: inline-block",
    flex: "display: flex",
    "inline-flex": "display: inline-flex",

    "flex-wrap": "flex-wrap: wrap",

    flex1: "flex: 1",
    flex2: "flex: 2",
    flex3: "flex: 3",
    flex4: "flex: 4",
    flex5: "flex: 5",
    flex6: "flex: 6",

    capitalize: "text-transform: capitalize",
    lowercase: "text-transform: lowercase",
    uppercase: "text-transform: uppercase",

    "margin-0auto": "margin: 0 auto",
    "margin-left-auto": "margin-left: auto",
    "position-relative": "position: relative",
    "background-color-initial": "background-color: initial",
    "background-color-white": "background-color: white",
    "user-select-none": "user-select: none",
    "cursor-pointer": "cursor: pointer",
    "color-white": "color: white",

    "max-width400": "max-width: 400px",
    "max-width720": "max-width: 720px",

    "pointer-events-auto": "pointer-events: auto",

    "white-space-pre-wrap": "white-space: pre-wrap",
  } as const;

  function computeVariations<
    T1 extends string,
    T2 extends string,
    V1 extends string,
    V2 extends string
  >(
    [names, subNames]: readonly [readonly T1[], readonly T2[]],
    values: readonly (readonly [V1, V2])[]
  ) {
    return names.flatMap(
      (name) =>
        [
          ...values.map(
            ([valueName, value]) =>
              [`${name}${valueName}`, `${name}: ${value}`] as const
          ),
          ...subNames.flatMap((subName) =>
            values.map(
              ([valueName, value]) =>
                [
                  `${name}-${subName}${valueName}`,
                  `${name}-${subName}: ${value}`,
                ] as const
            )
          ),
        ] as const
    );
  }

  const sizes = [
    ["4", "4px"],
    ["6", "6px"],
    ["8", "8px"],
    ["12", "12px"],
    ["16", "16px"],
    ["18", "18px"],
    ["24", "24px"],
    ["32", "32px"],
    ["48", "48px"],
    ["64", "64px"],
  ] as const;

  const colors = (["blue", "green", "red", "gray"] as const).flatMap((color) =>
    (["1", "2", "3", "4", "5", "6", "7", "8", "9", "10"] as const).flatMap(
      (step) => [`${color}-${step}`] as const
    )
  );

  const colorOptions = (
    [
      ["background", "background-color"],
      ["color", "color"],
    ] as const
  ).flatMap(([name, property]) =>
    colors.map(
      (color) => [`${name}-${color}`, `${property}: var(--${color})`] as const
    )
  );

  const sizeEntries = computeVariations(
    [
      ["width", "max-width", "min-width", "height", "max-height", "min-height"],
      [],
    ],
    [
      ...sizes,
      ["128", "128px"],
      ["100", "100%"],
      ["-min", "min-content"],
      ["-max", "max-content"],
    ]
  );

  const spacingEntries = computeVariations(
    [
      ["margin", "padding"],
      ["top", "bottom", "left", "right"],
    ],
    [["0", "0"], ...sizes]
  );

  const gapEntries = computeVariations(
    [["gap"], []],
    [...sizes, ["-items", "var(--gap-items)"], ["-cards", "var(--gap-cards)"]]
  );

  const sizedEntries = computeVariations(
    [["border-radius"], []],
    [
      ["6", "6px"],
      ["16", "16px"],
      ["100", "100%"],
    ]
  );

  const borderEntries = computeVariations(
    [["border"], ["right"]],
    [
      ["0", "0"],
      ["-none", "none"],
    ]
  );

  const flexDirectionEntries = computeVariations(
    [["flex-direction"], []],
    [
      ["-row", "row"],
      ["-column", "column"],
      ["-row-reverse", "row-reverse"],
      ["-column-reverse", "column-reverse"],
    ]
  );

  const contentEntries = computeVariations(
    [["justify-content"], []],
    [
      ["-space-between", "space-between"],
      ["-space-around", "space-around"],
      ["-center", "center"],
      ["-end", "end"],
      ["-flex-end", "flex-end"],
    ]
  );

  const itemsEntries = computeVariations(
    [["align-items", "align-self", "justify-items"], []],
    [
      ["-start", "start"],
      ["-center", "center"],
      ["-stretch", "stretch"],
      ["-end", "end"],
      ["-flex-end", "flex-end"],
    ]
  );

  const textAlignEntries = computeVariations(
    [["text-align"], []],
    [
      ["-left", "left"],
      ["-center", "center"],
      ["-right", "right"],
    ]
  );

  const overflowEntries = computeVariations(
    [["overflow"], ["x", "y"]],
    [
      ["-visible", "visible"],
      ["-hidden", "hidden"],
      ["-auto", "auto"],
    ]
  );

  const fontSizeEntries = computeVariations([["font-size"], []], sizes);

  type NameFromEntries<T extends readonly (readonly [string, string])[]> =
    T[number][0];

  const externalClasses = [
    "btn-hidable",
    "btn-icon-right",
    "pagination-hide-steps",
  ] as const;

  type Name =
    | keyof typeof baseClasses
    | NameFromEntries<typeof sizeEntries>
    | NameFromEntries<typeof colorOptions>
    | NameFromEntries<typeof spacingEntries>
    | NameFromEntries<typeof gapEntries>
    | NameFromEntries<typeof sizedEntries>
    | NameFromEntries<typeof flexDirectionEntries>
    | NameFromEntries<typeof contentEntries>
    | NameFromEntries<typeof itemsEntries>
    | NameFromEntries<typeof textAlignEntries>
    | NameFromEntries<typeof overflowEntries>
    | NameFromEntries<typeof borderEntries>
    | NameFromEntries<typeof fontSizeEntries>
    | typeof externalClasses[number];

  const classes = Object.freeze(
    Object.assign(
      Object.create(null) as object,
      baseClasses,
      Object.fromEntries(sizeEntries),
      Object.fromEntries(colorOptions),
      Object.fromEntries(spacingEntries),
      Object.fromEntries(gapEntries),
      Object.fromEntries(sizedEntries),
      Object.fromEntries(flexDirectionEntries),
      Object.fromEntries(contentEntries),
      Object.fromEntries(itemsEntries),
      Object.fromEntries(textAlignEntries),
      Object.fromEntries(overflowEntries),
      Object.fromEntries(borderEntries),
      Object.fromEntries(fontSizeEntries),
      Object.fromEntries(externalClasses.map((name) => [name, ""] as const))
    ) as { [key in Name]: string }
  );

  // register styles

  const styleContent = Object.entries(classes)
    .filter(([, style]) => style)
    .map(([className, style]) => `.sfr-${className} {${style} !important;}`)
    .join("\n");

  const textNode = document.createTextNode(styleContent);

  if (window.sfrStyles) {
    window.sfrStyles.firstChild?.remove();
    window.sfrStyles.appendChild(textNode);
  } else {
    window.sfrStyles = document.createElement("style");
    window.sfrStyles.appendChild(textNode);
    document.head.appendChild(window.sfrStyles);
  }

  return classes;
})();

type Name = keyof typeof atomicClasses;

// let's use arguments directly to prevent webpack from converting it to array
/* eslint-disable prefer-rest-params */
export const cssCommons = function cssCommons(): string {
  const parts: string[] = new Array(arguments.length * 2);
  let partsIdx = 0;

  // those loops aren't recommended because of readability but they are still the fastest way
  // to iterate over an array
  // eslint-disable-next-line no-plusplus
  for (let argumentsIdx = 0; argumentsIdx < arguments.length; argumentsIdx++) {
    // since app wont crash when unknown css classes are used we don't need this check
    // in production builds and webpack will remove this code when bundling
    if (process.env.NODE_ENV !== "production") {
      if (!((arguments[argumentsIdx] as Name) in atomicClasses)) {
        throw new Error(
          `Unknown atomic class. "${
            arguments[argumentsIdx] as Name
          }" is not available.`
        );
      }
    }

    // parts.push() is a no-go since we preallocate the array
    /* eslint-disable no-plusplus */
    parts[partsIdx++] = " sfr-";
    parts[partsIdx++] = arguments[argumentsIdx];
    /* eslint-enable no-plusplus */
  }

  // apply is faster then "".concat(...parts)
  return String.prototype.concat.apply("", parts);
} as (...classNames: readonly [Name, ...(readonly Name[])]) => string;
/* eslint-enable prefer-rest-params */

And explain how we've got from the code above the following results

You

Co-Funder and CTO at Surfer Local. https://surferlocal.com

A few words about yourself

https://www.linkedin.com/in/mieszko-wawrzyniak/

I'll work up something later if my talk is accepted.

How can we find you on social media?

It's best to email me.

Would you be willing to have a Q/A session after the talk?

Sure

Do you mind if we record the event?

Nope, go ahead

Is there anything we can help you with?

Nope

I was invited to post my proposal by @hasparus

[welcome]

Thanks for your contribution! One of the @WrocTypeScript/organisers will go back to you as soon as possible.

[karol-majewski]

Nice proposal @kaaboaye! Looking forward to this one.