tailwindcss Architecture Docs
Home / File/ sort-buckets.ts — tailwindcss Source File

sort-buckets.ts — tailwindcss Source File

Architecture documentation for sort-buckets.ts, a typescript file in the tailwindcss codebase. 6 imports, 10 dependents.

File typescript UpgradeToolkit Codemods 6 imports 10 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  ecf9faa2_4ccf_f16c_bb10_222be63faed0["sort-buckets.ts"]
  c056448b_f7a2_9149_54e8_f0f8470fe3aa["default-map.ts"]
  ecf9faa2_4ccf_f16c_bb10_222be63faed0 --> c056448b_f7a2_9149_54e8_f0f8470fe3aa
  bf2992f6_4a37_8536_70f8_94b13631027d["DefaultMap"]
  ecf9faa2_4ccf_f16c_bb10_222be63faed0 --> bf2992f6_4a37_8536_70f8_94b13631027d
  200c8408_4d17_9364_423b_0ce2d40b1e09["walk.ts"]
  ecf9faa2_4ccf_f16c_bb10_222be63faed0 --> 200c8408_4d17_9364_423b_0ce2d40b1e09
  fb009bc2_68d9_5c0f_7fa7_fa364488e50a["walk"]
  ecf9faa2_4ccf_f16c_bb10_222be63faed0 --> fb009bc2_68d9_5c0f_7fa7_fa364488e50a
  5abba2e8_591c_8b93_1630_783a6907b808["WalkAction"]
  ecf9faa2_4ccf_f16c_bb10_222be63faed0 --> 5abba2e8_591c_8b93_1630_783a6907b808
  ba54c7c3_7b1e_9984_bfef_a693a3df2d84["postcss"]
  ecf9faa2_4ccf_f16c_bb10_222be63faed0 --> ba54c7c3_7b1e_9984_bfef_a693a3df2d84
  fb30d75d_33fe_1bdc_7044_fd6d2cc1b187["format-nodes.test.ts"]
  fb30d75d_33fe_1bdc_7044_fd6d2cc1b187 --> ecf9faa2_4ccf_f16c_bb10_222be63faed0
  bf639994_959a_cded_6f3a_163595545a18["migrate-at-layer-utilities.test.ts"]
  bf639994_959a_cded_6f3a_163595545a18 --> ecf9faa2_4ccf_f16c_bb10_222be63faed0
  2a2fbf55_42db_0140_9db5_094f5369e747["migrate-media-screen.test.ts"]
  2a2fbf55_42db_0140_9db5_094f5369e747 --> ecf9faa2_4ccf_f16c_bb10_222be63faed0
  eb33b378_40f9_8aa4_2ce0_91f69294a359["migrate-missing-layers.test.ts"]
  eb33b378_40f9_8aa4_2ce0_91f69294a359 --> ecf9faa2_4ccf_f16c_bb10_222be63faed0
  48369d9b_74af_14f1_33c7_7d263509d02f["migrate-preflight.test.ts"]
  48369d9b_74af_14f1_33c7_7d263509d02f --> ecf9faa2_4ccf_f16c_bb10_222be63faed0
  8c7e8a4d_b48e_dd10_cef8_38f31c518cee["migrate-tailwind-directives.test.ts"]
  8c7e8a4d_b48e_dd10_cef8_38f31c518cee --> ecf9faa2_4ccf_f16c_bb10_222be63faed0
  0c13c6dd_2cb9_954d_8cc6_359b1ce5d612["migrate-theme-to-var.test.ts"]
  0c13c6dd_2cb9_954d_8cc6_359b1ce5d612 --> ecf9faa2_4ccf_f16c_bb10_222be63faed0
  10853aef_1b75_87ab_4c90_e8e234d21371["migrate-variants-directive.test.ts"]
  10853aef_1b75_87ab_4c90_e8e234d21371 --> ecf9faa2_4ccf_f16c_bb10_222be63faed0
  style ecf9faa2_4ccf_f16c_bb10_222be63faed0 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import postcss, { type AtRule, type ChildNode, type Comment, type Plugin, type Root } from 'postcss'
import { DefaultMap } from '../../../../tailwindcss/src/utils/default-map'
import { walk, WalkAction } from '../../utils/walk'

const BUCKET_ORDER = [
  // Imports
  'import', // @import

  // Configuration
  'config', // @config
  'plugin', // @plugin
  'source', // @source
  'custom-variant', // @custom-variant
  'theme', // @theme

  // Styles
  'compatibility', // @layer base with compatibility CSS
  'utility', // @utility

  // User CSS
  'user',
]

export function sortBuckets(): Plugin {
  async function migrate(root: Root) {
    // 1. Move items that are not in a bucket, into a bucket
    {
      let comments: Comment[] = []

      let buckets = new DefaultMap<string, AtRule>((name) => {
        let bucket = postcss.atRule({ name: 'tw-bucket', params: name, nodes: [] })
        root.append(bucket)
        return bucket
      })

      // Seed the buckets with existing buckets
      root.walkAtRules('tw-bucket', (node) => {
        buckets.set(node.params, node)
      })

      let lastLayer = 'user'
      function injectInto(name: string, ...nodes: ChildNode[]) {
        lastLayer = name
        buckets.get(name).nodes?.push(...comments.splice(0), ...nodes)
      }

      walk(root, (node) => {
        // Already in a bucket, skip it
        if (node.type === 'atrule' && node.name === 'tw-bucket') {
          return WalkAction.Skip
        }

        // Comments belong to the bucket of the nearest node, which is typically
        // in the "next" bucket.
        if (node.type === 'comment') {
          // We already have comments, which means that we already have nodes
          // that belong in the next bucket, so we should move the current
          // comment into the next bucket as well.
          if (comments.length > 0) {
            comments.push(node)
// ... (102 more lines)

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does sort-buckets.ts do?
sort-buckets.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the UpgradeToolkit domain, Codemods subdomain.
What functions are defined in sort-buckets.ts?
sort-buckets.ts defines 2 function(s): distance, sortBuckets.
What does sort-buckets.ts depend on?
sort-buckets.ts imports 6 module(s): DefaultMap, WalkAction, default-map.ts, postcss, walk, walk.ts.
What files import sort-buckets.ts?
sort-buckets.ts is imported by 10 file(s): format-nodes.test.ts, index.test.ts, index.ts, migrate-at-layer-utilities.test.ts, migrate-media-screen.test.ts, migrate-missing-layers.test.ts, migrate-preflight.test.ts, migrate-tailwind-directives.test.ts, and 2 more.
Where is sort-buckets.ts in the architecture?
sort-buckets.ts is located at packages/@tailwindcss-upgrade/src/codemods/css/sort-buckets.ts (domain: UpgradeToolkit, subdomain: Codemods, directory: packages/@tailwindcss-upgrade/src/codemods/css).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free