tailwindcss Architecture Docs
Home / File/ index.ts — tailwindcss Source File

index.ts — tailwindcss Source File

Architecture documentation for index.ts, a typescript file in the tailwindcss codebase. 3 imports, 1 dependents.

File typescript PostCSSPlugin AST 3 imports 1 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  739a225a_d3d9_2f2f_c552_0cee87ad8d15["index.ts"]
  08129f89_e6ef_0092_629d_821c60228c89["node"]
  739a225a_d3d9_2f2f_c552_0cee87ad8d15 --> 08129f89_e6ef_0092_629d_821c60228c89
  89aef3dd_1eed_c141_d425_b8949215a653["node:path"]
  739a225a_d3d9_2f2f_c552_0cee87ad8d15 --> 89aef3dd_1eed_c141_d425_b8949215a653
  7c3c22f8_be1a_4490_9f3e_622280887fe1["postcss"]
  739a225a_d3d9_2f2f_c552_0cee87ad8d15 --> 7c3c22f8_be1a_4490_9f3e_622280887fe1
  2bc39c56_196b_12bc_1a08_0896427ab477["index.ts"]
  2bc39c56_196b_12bc_1a08_0896427ab477 --> 739a225a_d3d9_2f2f_c552_0cee87ad8d15
  style 739a225a_d3d9_2f2f_c552_0cee87ad8d15 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import { normalizePath } from '@tailwindcss/node'
import path from 'node:path'
import type { AtRule, Plugin } from 'postcss'

const SINGLE_QUOTE = "'"
const DOUBLE_QUOTE = '"'

export default function fixRelativePathsPlugin(): Plugin {
  // Retain a list of touched at-rules to avoid infinite loops
  let touched: WeakSet<AtRule> = new WeakSet()

  function fixRelativePath(atRule: AtRule) {
    let rootPath = atRule.root().source?.input.file
    if (!rootPath) {
      return
    }

    let inputFilePath = atRule.source?.input.file
    if (!inputFilePath) {
      return
    }

    if (touched.has(atRule)) {
      return
    }

    let value = atRule.params[0]

    let quote =
      value[0] === DOUBLE_QUOTE && value[value.length - 1] === DOUBLE_QUOTE
        ? DOUBLE_QUOTE
        : value[0] === SINGLE_QUOTE && value[value.length - 1] === SINGLE_QUOTE
          ? SINGLE_QUOTE
          : null
    if (!quote) {
      return
    }
    let glob = atRule.params.slice(1, -1)

    // Handle eventual negative rules. We only support one level of negation.
    let negativePrefix = ''
    if (glob.startsWith('!')) {
      glob = glob.slice(1)
      negativePrefix = '!'
    }

    // We only want to rewrite relative paths.
    if (!glob.startsWith('./') && !glob.startsWith('../')) {
      return
    }

    let absoluteGlob = path.posix.join(normalizePath(path.dirname(inputFilePath)), glob)
    let absoluteRootPosixPath = path.posix.dirname(normalizePath(rootPath))

    let relative = path.posix.relative(absoluteRootPosixPath, absoluteGlob)

    // If the path points to a file in the same directory, `path.relative` will
    // remove the leading `./` and we need to add it back in order to still
    // consider the path relative
    if (!relative.startsWith('.')) {
      relative = './' + relative
    }

    atRule.params = quote + negativePrefix + relative + quote
    touched.add(atRule)
  }

  return {
    postcssPlugin: 'tailwindcss-postcss-fix-relative-paths',
    Once(root) {
      root.walkAtRules(/source|plugin|config/, fixRelativePath)
    },
  }
}

Domain

Subdomains

Functions

Dependencies

  • node
  • node:path
  • postcss

Imported By

Source

Frequently Asked Questions

What does index.ts do?
index.ts is a source file in the tailwindcss codebase, written in typescript. It belongs to the PostCSSPlugin domain, AST subdomain.
What functions are defined in index.ts?
index.ts defines 1 function(s): fixRelativePathsPlugin.
What does index.ts depend on?
index.ts imports 3 module(s): node, node:path, postcss.
What files import index.ts?
index.ts is imported by 1 file(s): index.ts.
Where is index.ts in the architecture?
index.ts is located at packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts (domain: PostCSSPlugin, subdomain: AST, directory: packages/@tailwindcss-postcss/src/postcss-fix-relative-paths).

Analyze Your Own Codebase

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

Try Supermodel Free