vite Architecture Docs
Home / File/ postcss.config.js — vite Source File

postcss.config.js — vite Source File

Architecture documentation for postcss.config.js, a javascript file in the vite codebase. 5 imports, 0 dependents.

File javascript ViteCore ConfigEngine 5 imports 3 functions

Entity Profile

Dependency Diagram

graph LR
  6432e4e3_1309_4b33_9744_036f5048ffb8["postcss.config.js"]
  e6032fbc_44cf_58d6_868d_dd15106c18c5["node:fs"]
  6432e4e3_1309_4b33_9744_036f5048ffb8 --> e6032fbc_44cf_58d6_868d_dd15106c18c5
  51e96894_3556_ed5c_1ede_97d449867adf["node:path"]
  6432e4e3_1309_4b33_9744_036f5048ffb8 --> 51e96894_3556_ed5c_1ede_97d449867adf
  f768205a_533a_2be3_ec95_10f7f47d71ce["tinyglobby"]
  6432e4e3_1309_4b33_9744_036f5048ffb8 --> f768205a_533a_2be3_ec95_10f7f47d71ce
  54c37fea_4fe7_2693_71cb_1276b77f55f9["vite"]
  6432e4e3_1309_4b33_9744_036f5048ffb8 --> 54c37fea_4fe7_2693_71cb_1276b77f55f9
  194ec5a9_362f_0212_3596_cd476c449b98["postcss-nested"]
  6432e4e3_1309_4b33_9744_036f5048ffb8 --> 194ec5a9_362f_0212_3596_cd476c449b98
  style 6432e4e3_1309_4b33_9744_036f5048ffb8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

import fs from 'node:fs'
import path from 'node:path'
import { globSync } from 'tinyglobby'
import { normalizePath } from 'vite'
import postcssNested from 'postcss-nested'

export default {
  plugins: [postcssNested, testDirDep, testSourceInput, testInjectUrl],
}

/**
 * A plugin for testing the `dir-dependency` message handling.
 */
function testDirDep() {
  return {
    postcssPlugin: 'dir-dep',
    AtRule(atRule, { result, Comment }) {
      if (atRule.name === 'test') {
        const pattern = normalizePath(
          path.resolve(path.dirname(result.opts.from), './glob-dep/**/*.css'),
        )
        const files = globSync(pattern, { expandDirectories: false })
        const text = files.map((f) => fs.readFileSync(f, 'utf-8')).join('\n')
        atRule.parent.insertAfter(atRule, text)
        atRule.remove()

        result.messages.push({
          type: 'dir-dependency',
          plugin: 'dir-dep',
          dir: './glob-dep',
          glob: '*.css',
          parent: result.opts.from,
        })

        result.messages.push({
          type: 'dir-dependency',
          plugin: 'dir-dep',
          dir: './glob-dep/nested (dir)', // includes special characters in glob
          glob: '*.css',
          parent: result.opts.from,
        })
      }
    },
  }
}
testDirDep.postcss = true

function testSourceInput() {
  return {
    postcssPlugin: 'source-input',
    AtRule(atRule) {
      if (atRule.name === 'source-input') {
        atRule.after(
          `.source-input::before { content: ${JSON.stringify(
            atRule.source.input.from,
          )}; }`,
        )
        atRule.remove()
      }
    },
  }
}
testSourceInput.postcss = true

function testInjectUrl() {
  return {
    postcssPlugin: 'inject-url',
    Once(root, { Rule }) {
      root.walkAtRules('inject-url', (atRule) => {
        const rule = new Rule({
          selector: '.inject-url',
          source: atRule.source,
        })
        rule.append({
          prop: 'background',
          value: "url('=/ok.png')",
          source: atRule.source,
        })
        atRule.after(rule)
        atRule.remove()
      })
    },
  }
}
testInjectUrl.postcss = true

Domain

Subdomains

Functions

Dependencies

  • node:fs
  • node:path
  • postcss-nested
  • tinyglobby
  • vite

Source

Frequently Asked Questions

What does postcss.config.js do?
postcss.config.js is a source file in the vite codebase, written in javascript. It belongs to the ViteCore domain, ConfigEngine subdomain.
What functions are defined in postcss.config.js?
postcss.config.js defines 3 function(s): testDirDep, testInjectUrl, testSourceInput.
What does postcss.config.js depend on?
postcss.config.js imports 5 module(s): node:fs, node:path, postcss-nested, tinyglobby, vite.
Where is postcss.config.js in the architecture?
postcss.config.js is located at playground/css/postcss.config.js (domain: ViteCore, subdomain: ConfigEngine, directory: playground/css).

Analyze Your Own Codebase

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

Try Supermodel Free