Clear and concise description of the problem

Currently, it is impossible to write a custom css loader to handle imports like this one :

import values from "./asset/style/values.styl?values"

without vite built-in plugin transforming the code. (These plugins check for special vite queries with : export const SPECIAL_QUERY_RE = /[\?&](?:worker|sharedworker|raw|url)\b/ but all these queries have a specific effect in vite, and none of them, even raw, permits to load the code without any transformation)

This problem occurs with css, but it is certainly not the only type of file concerned (html and json seems to be good candidates too...)

Suggested solution

Adding a special query prefix, like "?strict" (this choice entirely up to debate since I didn't came up with something more satisfying...) would do the trick. When used, it would require plugins to match strictly the query chain before applying a transformation or doing a load.

This would be applicable to vite built-in plugins.

Example :

import * as V from "./asset/style/values.styl?strict&values"

...Would not be transformed by any plugins, except the ones that specifically recognize &values as sub query.

Alternative

I used & in the previous example because it's the separator from GET query argument. But to simplify the filtering, we could use ? as query separator instead.

I considered proposing to prevent transformation on query not recognized, but I though some plugins could use queries to add a transformation layer in specific cases, but keeping what vite already does, and may break some existing code. Thus it's not a viable alternative

I also considered using the meta object to disable some plugins in some case, but plugins may not be aware of all other plugins that could be used. Only the user (developper) know what plugins (s)he use thus, and therefore, (s)he needs to be able to fine control this behavior from user-code.

Additional context

The default plugin could also have their own query "tag" to use them with strict.

This would permits stuff like this :

• plugin A transform stylus code to export all its variable into a V object
• plugin B adds a I object containing all the value as number
• plugin C adds a classes object containing the classes (like css-modules or postCss)
• built-in plugin vite:css

import {V, I} from "./style/values.styl?strict?A?B"

...Variables and numbers.

import * as something from "./style/values.styl"

...Default vite transforming

import * as something from "./style/values.styl?strict?css"

...Only vite:css transform

...This would give a very fine-grained control to the user on what transform should be applied at each import, without breaking any existing code...

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.