Skip to content

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

Merged
patak-cat merged 7 commits intovitejs:mainfrom
qnp:feat/stylus-define
Mar 6, 2023
Merged

feat(css): add preprocessor option to define stylus vars & funcs#7227
patak-cat merged 7 commits intovitejs:mainfrom
qnp:feat/stylus-define

Conversation

@qnp
Copy link
Contributor

@qnp qnp commented Mar 8, 2022 •
edited by Niputi
Loading

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 qnp mentioned this pull request Mar 8, 2022
Closed
4 tasks
@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-cat
patak-cat previously approved these changes Mar 6, 2023
View reviewed changes
patak-cat
patak-cat reviewed Mar 6, 2023
View reviewed changes
playground/css/vite.config.js Outdated
path.join(__dirname, 'options/absolute-import.styl'),
],
define: {
$definedColor: new stylus.Parser('#33C5FF').peek().val,
Copy link
Member

@patak-cat patak-cat Mar 6, 2023

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

@patak-cat patak-cat Mar 6, 2023

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

@patak-cat patak-cat Mar 6, 2023

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-cat patak-cat enabled auto-merge (squash) March 6, 2023 17:57
@patak-cat patak-cat 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

Reviewers

@patak-cat patak-cat patak-cat approved these changes

Assignees

No one assigned

Labels

feat: css p2-nice-to-have Not breaking anything but nice to have (priority)

Projects

None yet

Milestone

4.2

Development

Successfully merging this pull request may close these issues.

[stylus] tap into Stylus to use its javascript API

4 participants

@qnp @bluwy @patak-cat @Niputi