Unable to configure the built in postcss-import plugin

[xenobytezero]

Describe the bug

I was looking to add additional paths to the postcss-import paths configuration, but it seems like this is impossible. I was planning to use this to add multiple packages worth of CSS into the process and allow them all to be referenced, without huge folder traversing paths.

I assume that the answer to this would be to use resolve.alias in the Vite config file. This is possible, however in my project I am pulling together 3 or 4 other libraries which have CSS, so I would need to have a different alias for each, whereas if I can add to the paths array this can be resolved elsewhere.

I have tried a few things

• Adding a postcss.config.mjs file with a postcss-import just creates a duplicate instance of the plugin, which is never hit.
• Breakpointing the source, it doesn't seem like there is a way to pass in additional objects to the built in PostCSS support in Vite?

Reproduction

https://stackblitz.com/edit/vitejs-vite-uae7yh?file=css%2Flvl1%2Flvl2%2Findex.css

Steps to reproduce

The nature of the issue makes it difficult to provide concrete steps.

However, the linked StackBlitz shows a version of my usecase, where I would like to be able to add the nested folder structure to the paths checked for imports. While this could be done with resolve.alias once I have 3 or more of these, this starts to become unwieldy.

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (16) x64 Intel(R) Xeon(R) W-11955M CPU @ 2.60GHz
    Memory: 28.70 GB / 63.67 GB
  Binaries:
    Node: 18.17.1 - C:\Languages\NodeJS\node.EXE
    Yarn: 4.1.1 - C:\Languages\NodeJS\yarn.CMD
    npm: 9.6.7 - C:\Languages\NodeJS\npm.CMD
  Browsers:
    Edge: Chromium (123.0.2420.97)
    Internet Explorer: 11.0.19041.3636

Used Package Manager

yarn

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-uae7yh (Open reproduction)

[bluwy]

I'm curious why resolve.alias with multiple aliases would be an issue? If you want to group the 3/4 CSS libraries together, you can also create a single CSS file importing all of those, and then have an alias to that CSS file?

[xenobytezero]

It's totally a valid solution that will solve the problem, just wasn't entirely obvious based on the documentation that exists. The docs mention PostCSS is used and how to configure it, but nothing about what is already configured and what can't be changed.

My thought process was realising PostCSS is present, realising it could be configured, realising it didn't work, then having to look through source to figure out why.

I'll close this ticket since there is a suggested solution. Thanks for the responses.