stylus/stylus

Stylus should not overwrite CSS built-in functions, such as min and max

Open

#2,584 opened on Apr 1, 2021

View on GitHub
 (28 comments) (22 reactions) (0 assignees)JavaScript (11,125 stars) (1,173 forks)batch import
help wantedp: Hight: Bug

Description

In CSS, there are built-in functions, such as min and max. Unfortunately, Stylus has the exactly same built-in functions, That's bad and error prone.

I wanted to write a CSS max to responsively, dynamically calculate the height of an image from the current view port:

.myclass
        height: max(30vh, 50vw)

But it did not work as expected. After quite some time and debugging the generated CSS-code and then searching the Stylus docs, I found out, that Stylus has an internal function of the same name maxthat is called here.

So, stylus produced the following output:

.myclass {height:50vw;}

This is crazy stupid! Stylus cannot know the size of 1vw nor 1vhat compile time! It should at least abort with an error, instead of silently producing rubbish!

So,to solve my problem, I finally got the correct result with the following work-around:

.myclass
    height: @css{max(30vh, 50vw)}

Please rename or remove the Stylus functions max and min, and any other Stylus function that shadows a CSS built-in function!

Why not prepend all Stylus built-in functions with a prefix, such as stylus_min, __min or _min?

Contributor guide

Tech stack
cssjavascript
Domain
frontenddeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
basic Stylus knowledgeunderstanding of CSS functions
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70
Research direction
Examine the Stylus source code, particularly the built in functions in the `lib/functions/` directory. Identify how `min` and `max` are currently implemented and propose a fix that prevents them from overriding CSS native functions, such as by prefixing them. Review the issue comments for discussions on potential solutions and test with the provided example.