Clear and concise description of the problem

Hello,

I would like to add some functionalities in my stylus code by defining new functions in order to transform the output CSS. ¹

To do so I would need to use the stylus.define function, as mentioned in Stylus’ javascript API documentation.

There is no possibility to do that using Vite. I suggest to tap directly into imported nodeStylus into the stylus preprocessor, using a tap options :

{
   tap: stylus => 
     stylus
       .define('$var', 32)
       .define('fn', () => /* do something useful */)
   ...otherOptions // additionalData, filename, imports...
}

As set, include, import, define and use are chainable (they return the stylus instance), it is safe to use a tap-like mechanics. The case of deps, resolver and the final render can break the chain and lead to unexpected results, and thus may be addressed (e.g. not accessible, maybe using a subset of the stylus instance ?)

What do you think ?

Suggested solution

I can implement the thing, but I wanted to make sure it is relevant.

Alternative

For the final Vite config API, instead of tap: (stylus: Stylus) => Stylus which can lead to unexpected behavior if used unwisely, maybe we can use explicitly a define option which is an object [key: string]: any:

{
  define: {
    $var: 32,
    fn: () => /* do soemthing useful here */
  }
}

Additional context

No response

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.