Ramu Narasinga

Posted on Oct 9, 2024 Edited on Apr 4, 2025 Originally published at thinkthroo.com

DefaultMap class in TailwindCSS source code.

#javascript #typescript #tailwindcss #defaultmap

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
  }
}

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()
}

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.

let parsedVariants = new DefaultMap(
                        (variant) => parseVariant(variant, designSystem)
                     );

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,
  }

This is the value returned by parseVariant function.

About me:

Hey, my name is Ramu Narasinga. I study large open-source projects and create content about their codebase architecture and best practices, sharing it through articles, videos.

I am open to work on interesting projects. Send me an email at ramu.narasinga@gmail.com

My Github — https://github.com/ramu-narasinga

My website — https://ramunarasinga.com

My Youtube channel — https://www.youtube.com/@ramu-narasinga

Learning platform — https://thinkthroo.com

Codebase Architecture — https://app.thinkthroo.com/architecture

Best practices — https://app.thinkthroo.com/best-practices

Production-grade projects — https://app.thinkthroo.com/production-grade-projects