DEV Community

Cover image for DefaultMap class in TailwindCSS source code.
thinkThroo
thinkThroo

Posted on

DefaultMap class in TailwindCSS source code.

In this article, we analyse DefaultMap class in Tailwind CSS source code. This is a map that can generate default values for keys that don’t exist. Generated default values are added to the map to avoid re-computation.


/**
 * A Map that can generate default values for keys that don't exist.
 * Generated default values are added to the map to avoid recomputation.
 */
export class DefaultMap<T = string, V = any> extends Map<T, V> {
  constructor(private factory: (key: T, self: DefaultMap<T, V>) => V) {
    super()
  }

  get(key: T): V {
    let value = super.get(key)

    if (value === undefined) {
      value = this.factory(key, this)
      this.set(key, value)
    }

    return value
  }
}
Enter fullscreen mode Exit fullscreen mode

In JavaScript, we have a Map API but there is no DefaultMap. This DefaultMap is a custom class that extends Map in Tailwind CSS source code.

Let’s understand this code.

constructor(private factory: (key: T, self: DefaultMap<T, V>) => V) {
    super()
}
Enter fullscreen mode Exit fullscreen mode

DefaultMap is a class that has a constructor that expects a factory function. super() calls the parent class’s constructor, in this case, this is Map API and factory function’s second parameter is self: DefaultMap<T, V> which means it has access to Map instance.

How DefaultMap is initialized?

Let’s find an example where this DefaultMap is initialised. design-system.ts desmonstrates usage of DefaultMap.

Image description

let parsedVariants = new DefaultMap(
                        (variant) => parseVariant(variant, designSystem)
                     );
Enter fullscreen mode Exit fullscreen mode

Here (variant) => parseVariant(variant, designSystem) becomes our factory method that adds a default if a key does not exist.

return {
      kind: 'arbitrary',
      selector,
      compounds: true,
      relative,
  }
Enter fullscreen mode Exit fullscreen mode

This is the value returned by parseVariant function.

About us:

At Think Throo, we are on a mission to teach the advanced codebase architectural concepts used in open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

We also provide web development and technical writing services. Reach out to us at hello@thinkthroo.com to learn more!

References:

  1. https://github.com/tailwindlabs/tailwindcss/blob/next/packages/tailwindcss/src/utils/default-map.ts#L5

  2. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/design-system.ts#L40

  3. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

  4. https://github.com/tailwindlabs/tailwindcss/blob/c01b8254e822d4f328674357347ca0532f1283a0/packages/tailwindcss/src/candidate.ts#L511-L516



Top comments (0)