fixRelativePathsPlugin() — tailwindcss Function Reference

Architecture documentation for the fixRelativePathsPlugin() function in index.ts from the tailwindcss codebase.

Function typescript BuildIntegrations PostCSSPlugin called by 1

Entity Profile

BuildIntegrations→ PostCSSPlugin→ fixRelativePathsPlugin() — tailwindcss Function Reference

Dependency Diagram

graph TD
  06a6b835_65ff_54fa_2194_b15613c95964["fixRelativePathsPlugin()"]
  db071d11_4cec_4513_1261_677ffd86ce6e["index.ts"]
  06a6b835_65ff_54fa_2194_b15613c95964 -->|defined in| db071d11_4cec_4513_1261_677ffd86ce6e
  7e4891ad_b5c5_f083_e9e1_3dc43422517d["tailwindcss()"]
  7e4891ad_b5c5_f083_e9e1_3dc43422517d -->|calls| 06a6b835_65ff_54fa_2194_b15613c95964
  style 06a6b835_65ff_54fa_2194_b15613c95964 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/@tailwindcss-postcss/src/postcss-fix-relative-paths/index.ts lines 8–74

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