Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 7 commits into from
Mar 6, 2023

Conversation

qnp
Copy link
Contributor

@qnp qnp commented Mar 8, 2022

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

tests

@qnp
Copy link
Contributor Author

qnp commented Mar 8, 2022

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.

@Niputi Niputi changed the title feat(css): add preprocessor option to define stylus vars & funcs (#6354) feat(css): add preprocessor option to define stylus vars & funcs Mar 8, 2022
@bluwy bluwy added the p2-to-be-discussed Enhancement under consideration (priority) label Mar 9, 2022
@qnp
Copy link
Contributor Author

qnp commented Mar 29, 2022

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
Copy link
Member

bluwy commented Mar 30, 2022

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
Copy link
Member

bluwy commented Feb 26, 2023

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.

@bluwy bluwy added p2-nice-to-have Not breaking anything but nice to have (priority) and removed p2-to-be-discussed Enhancement under consideration (priority) labels Feb 26, 2023
@bluwy bluwy added this to the 4.2 milestone Feb 26, 2023
patak-dev
patak-dev previously approved these changes Mar 6, 2023
@@ -68,6 +69,10 @@ export default defineConfig({
'./options/relative-import.styl',
path.join(__dirname, 'options/absolute-import.styl'),
],
define: {
$definedColor: new stylus.Parser('#33C5FF').peek().val,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mmm... it is a real issue 🤔

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

@patak-dev patak-dev enabled auto-merge (squash) March 6, 2023 17:57
@patak-dev patak-dev merged commit 5968bec into vitejs:main Mar 6, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat: css p2-nice-to-have Not breaking anything but nice to have (priority)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[stylus] tap into Stylus to use its javascript API
4 participants