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 CommandLineInterface Codemods 6 imports 10 dependents 2 functions

Entity Profile

Dependency Diagram

graph LR
  a1d91fdc_e00f_534f_abf6_a58adf4778f1["sort-buckets.ts"]
  28a2f72d_350c_6647_bf9d_77c69e637045["default-map.ts"]
  a1d91fdc_e00f_534f_abf6_a58adf4778f1 --> 28a2f72d_350c_6647_bf9d_77c69e637045
  cfb4af0e_7b2d_34a1_693a_90088443cfec["DefaultMap"]
  a1d91fdc_e00f_534f_abf6_a58adf4778f1 --> cfb4af0e_7b2d_34a1_693a_90088443cfec
  8c8c71d8_c9b0_02ac_73ec_950510adcf7a["walk.ts"]
  a1d91fdc_e00f_534f_abf6_a58adf4778f1 --> 8c8c71d8_c9b0_02ac_73ec_950510adcf7a
  dd7577d7_bdb0_88c5_438f_51bb090ec42a["walk"]
  a1d91fdc_e00f_534f_abf6_a58adf4778f1 --> dd7577d7_bdb0_88c5_438f_51bb090ec42a
  df3a8122_6d4c_d7b5_82c0_a0aa72c62ab9["WalkAction"]
  a1d91fdc_e00f_534f_abf6_a58adf4778f1 --> df3a8122_6d4c_d7b5_82c0_a0aa72c62ab9
  7c3c22f8_be1a_4490_9f3e_622280887fe1["postcss"]
  a1d91fdc_e00f_534f_abf6_a58adf4778f1 --> 7c3c22f8_be1a_4490_9f3e_622280887fe1
  d416162c_9943_db17_ed57_8be427000ef6["format-nodes.test.ts"]
  d416162c_9943_db17_ed57_8be427000ef6 --> a1d91fdc_e00f_534f_abf6_a58adf4778f1
  2cb5ef1d_43c0_4377_fe5a_941d800f83c7["migrate-at-layer-utilities.test.ts"]
  2cb5ef1d_43c0_4377_fe5a_941d800f83c7 --> a1d91fdc_e00f_534f_abf6_a58adf4778f1
  ee07edaa_f575_f9a5_6581_1200f759b32c["migrate-media-screen.test.ts"]
  ee07edaa_f575_f9a5_6581_1200f759b32c --> a1d91fdc_e00f_534f_abf6_a58adf4778f1
  961d377c_755d_e488_5737_dfddc91c3ee6["migrate-missing-layers.test.ts"]
  961d377c_755d_e488_5737_dfddc91c3ee6 --> a1d91fdc_e00f_534f_abf6_a58adf4778f1
  45ec79c2_d411_4cc2_0b36_0b2e19cf72e6["migrate-preflight.test.ts"]
  45ec79c2_d411_4cc2_0b36_0b2e19cf72e6 --> a1d91fdc_e00f_534f_abf6_a58adf4778f1
  320d991a_2688_e5d4_fc07_c946ad430e00["migrate-tailwind-directives.test.ts"]
  320d991a_2688_e5d4_fc07_c946ad430e00 --> a1d91fdc_e00f_534f_abf6_a58adf4778f1
  503d103e_c7cf_7d9c_7027_bc94b8da09d3["migrate-theme-to-var.test.ts"]
  503d103e_c7cf_7d9c_7027_bc94b8da09d3 --> a1d91fdc_e00f_534f_abf6_a58adf4778f1
  abead924_2390_edac_c530_1a639293bbdf["migrate-variants-directive.test.ts"]
  abead924_2390_edac_c530_1a639293bbdf --> a1d91fdc_e00f_534f_abf6_a58adf4778f1
  style a1d91fdc_e00f_534f_abf6_a58adf4778f1 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 CommandLineInterface 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: CommandLineInterface, 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