Unable to exclude certain css `@import` statements from getting inlined

freshgiammi commented 1 month ago

Describe the bug

I'm building a library which exports some css, but also imports some more from a second library.

The objective I'm pursuing is not to extract CSS files coming from a component library and keep them as imports, since that library itself will be already used by all consumers. Doing so also gets rid of possible specificity issues as the component library is always imported before the library's own styles.

The CSS is simple enough:

/* src/style/styles.css */
@import "@org/componentLibrary/dist/style.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

where an import is stated before tailwindcss' own styles. Since Vite provides @import inlining (as stated here), this import statement gets extracted and the content is merged in the output .css file.

Currently, it seems as there's no way to exclude certain import statements from getting inlined. This should be doable with postcss-import (using filter), however Vite already uses this plugin internally, and it seems like there's no way to configure it. Additionally, providing the postcss plugin in the css.postCss.plugins array seems to ignore the plugin (possibly getting skipped as it's a duplicate plugin?).

Is there a way to achieve this result and if not, can a way to exclude imports be proposed so that there's more flexibility here?

These issues/questions seem related:

https://discord.com/channels/804011606160703521/1121467219101089892/1121467219101089892 (same issue)
https://github.com/vitejs/vite/issues/16669 (unability to configure postcss-import)

Reproduction

https://stackblitz.com/edit/vitejs-vite-t6nqaz

Steps to reproduce

run npm run build
see that the import statement has been extracted and inlined in the output css

System Info

System:
    OS: macOS 14.5
    CPU: (12) arm64 Apple M2 Pro
    Memory: 492.94 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.0.5 - ~/.nvm/versions/node/v20.11.1/bin/pnpm
    bun: 1.1.21 - ~/.bun/bin/bun
  Browsers:
    Chrome: 128.0.6613.115
    Safari: 17.5

Used Package Manager

pnpm

Logs

No response

Validations

[X] Follow our Code of Conduct
[X] Read the Contributing Guidelines.
[X] Read the docs.
[X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
[X] 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.
[X] Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
[X] The provided reproduction is a minimal reproducible example of the bug.

sapphi-red commented 1 month ago

~~Duplicate of #13998~~ Nope, it's different.

freshgiammi commented 1 month ago

~Duplicate of #13998~ Nope, it's different.

Well they do seem to share the root issue: there's no way to filter out the @import statements.

I didn't come across that issue when searching before opening this one, I guess in a way it is a duplicate (unless we treat this as 'not being able to configure postcss-import' entirely)?

sapphi-red commented 1 month ago

Yeah, it shares some parts. But I think it's fine to have it separately because #13998 wants to externalize a CSS file in both dev and build, and this issue wants to externalize a CSS file only in build.

vitejs / vite