Stylus options override internal stylus imports required for compilation

[qnp]

Describe the bug

Related to this answer #832 (comment)
I use:

css: {
  preprocessorOptions: {
     styl: {
       imports: ['path/to/my/variables.styl'],
     }
  }
}

to globally import a stylus file for the compilation.

In my project I have another file containing $easing := cubic-bezier(0.4, 0.0, 0.2, 1) which should be compiled normally. However, I get the error:

TypeError: stylus:1:12
      $easing := cubic-bezier(0.4, 0.0, 0.2, 1)
-----------------^

Cannot read property 'nodes' of undefined

The way Vite passes custom preprocessor options to stylus leads to this bug (I think this is also due to a bug in stylus, but a workaround can be easily done in Vite to avoid this bug).

Indeed, Vite passes these options after having booted stylus on the source, see https://github.com/vitejs/vite/blob/main/packages/vite/src/node/plugins/css.ts#L1110

This causes the final ref to have its imports option completely overridden by our custom ones. Whereas, out of the box, this ref has already an imports option with the internal stylus file node_modules/stylus/lib/functions/index.styl which is required for correct compilation.

Reproduction

Having install stylus node module, this code will show the error:

const stylus = require('stylus')
const source = `$easing := cubic-bezier(0.4, 0.0, 0.2, 1)`
const options = { imports: ['path/to/my/variables.styl'] }

const ref = stylus(source)
// Here if you console.log(ref), you will see that this ref has
// an `import` option with the required internal file I mentioned

Object.keys(options).forEach((key) => ref.set(key, options[key]))
// Fails
const result = ref.render() 

Workaround

This works properly:

const stylus = require('stylus')
const source = `$easing := cubic-bezier(0.4, 0.0, 0.2, 1)`
const options = { imports: ['path/to/my/variables.styl'] }
// Pass options directly here, they will be properly merged with internal ones
const ref = stylus(source, options)
// Compiles properly
const result = ref.render()

I'll try to do the PR for that fix/workaround, while notifying stylus for the bug.

System Info

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i7-8569U CPU @ 2.80GHz
    Memory: 158.77 MB / 16.00 GB
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 12.20.1 - ~/.nvm/versions/node/v12.20.1/bin/node
    Yarn: 1.17.3 - ~/.yarn/bin/yarn
    npm: 6.14.10 - ~/.nvm/versions/node/v12.20.1/bin/npm
  Browsers:
    Chrome: 89.0.4389.114
    Firefox: 86.0.1
    Firefox Developer Edition: 71.0
    Firefox Nightly: 76.0a1
    Safari: 14.0.3
    Safari Technology Preview: 13.2
  npmPackages:
    @vitejs/plugin-vue: ^1.2.1 => 1.2.1
    vite: ^2.1.5 => 2.1.5

Used package manager: yarn

Before submitting the issue, please make sure you do the following

• 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.
• Provide a description in this issue that describes the bug.
• 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 https://github.com/vuejs/vue-next instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.