sortBuckets() — tailwindcss Function Reference

Source Code

packages/@tailwindcss-upgrade/src/codemods/css/sort-buckets.ts lines 24–150

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

          // Figure out the closest node to the comment
          let prevDistance = distance(node.prev(), node) ?? Infinity
          let nextDistance = distance(node, node.next()) ?? Infinity

          if (prevDistance < nextDistance) {
            buckets.get(lastLayer).nodes?.push(node)
          } else {
            comments.push(node)
          }
        }

        // Known at-rules
        else if (
          node.type === 'atrule' &&
          ['config', 'plugin', 'source', 'theme', 'utility', 'custom-variant'].includes(node.name)
        ) {
          injectInto(node.name, node)
        }

        // Imports bucket, which also contains the `@charset` and body-less `@layer`
        else if (
          (node.type === 'atrule' && node.name === 'layer' && !node.nodes) || // @layer foo, bar;
          (node.type === 'atrule' && node.name === 'import') ||
          (node.type === 'atrule' && node.name === 'charset') || // @charset "UTF-8";
          (node.type === 'atrule' && node.name === 'tailwind')
        ) {
          injectInto('import', node)
        }

        // User CSS
        else if (node.type === 'rule' || node.type === 'atrule') {
          injectInto('user', node)
        }

        // Fallback
        else {
          injectInto('user', node)
        }

        return WalkAction.Skip
      })