feat(css): add preprocessor option to define stylus vars & funcs

[qnp]

Description

In the light of #6354, I have done the implementation that exposes a css.preprocessorOptions.styl.define option that allows to define stylus variables and functions with Javascript. An other useful use-case, not discussed in the linked issue, is the possibility to define only once, in a unique place, design tokens with Javascript (such as breakpoints, colors, etc.) and use them in the Stylus side and in the Vue components, Javascript side.

close: #6354

Additional context

Beware that Stylus needs to understand properly the type of nodes you define, so, for example in the case of colors, you need to define them as follows:

define: {
  $definedColor: new stylus.Parser('teal').peek().val,
  funcReturnsColor: () => new stylus.nodes.RGBA(255, 0, 98, 1)
}

That’s inherent to Stylus.

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

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

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the Commit Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

All tests pass

[qnp]

Sorry I did not ran build tests. One test is failing because I chose teal as a color, which was not expected in an other place. I'm fixing it.

[qnp]

Hi there, any news on the core-team discussion about this PR ?
It's quite a simple improvement but would be very useful for our team.
Best,

[bluwy]

I was only in the first-half of the last meeting, but I don't think this has been discussed yet. It's still in the board, hopefully we'll get to it in the next one.

[bluwy]

We have discussed this in the last meeting! We agree that it's good to support define only for now if that's the only option relevant for Vite. Sorry for the long wait. I'll rebase this up and it should be good for Vite 4.2.

[patak-dev]

I got a type error here after merging but seems it should be an issue with my editor. cc @bluwy just in case

[patak-dev]

mmm... it is a real issue 🤔

[patak-dev]

It looks like Parser is an internal class we shouldn't be using

    //#region Internal Classes

    export class Visitor {
    }

    export class Parser {
    }

    export class Evaluator {
    }

    export class Compiler {
    }

    //#endregion

Ignoring the error in the test to make this one pass for now: 556de6e (#7227)