Issue #356 resolved

Foobar CSS Generated By Stylus Differs Based Upon OS, Stylus Version

Roger Haase
created an issue

See https://github.com/LearnBoost/stylus/issues/993 for a description of Sylus issue.

Given the number of open Stylus issues and the backlog of pull requests, the easiest way to avoid having unwanted noise in future css changesets is to tweak the foobar Stylus files to avoid the issue.

A guess is that the issue will be avoided if the formulas in main_container_width, local_panel_width, content_width_with_panel, and content_width_no_panel are simplified.

A fix requires tweaking the foobar Stylus main.styl file without changing the foobar appearance in browsers (or make it look better), and verifying the generated CSS is the same for both Stylus version 0.29.0 and 0.31.0. If that works, Linux and Windows CSS output will probably be the same, but must be tested.

A workaround is for all developers to use Stylus 0.29.0:

sudo npm uninstall stylus -g
sudo npm install stylus@0.29.0 -g

Comments (6)

  1. sharky93

    On my machine upon checking output with stylus versions 0.29.0 & 0.31.0. I get the following diff. http://www.diffchecker.com/c3cswpyq

    An example!

    global_tray_width - definition

    https://bitbucket.org/thomaswaldmann/moin-2.0/src/1d8366403411a4b6f2b4eeebfe3278a52fe3d9d6/MoinMoin/themes/foobar/static/css/stylus/main.styl?at=default#cl-40

    This definition returns a value, 16.633333333333336% on stylus 0.31.0 whereas a value, 16.666666666666668% on stylus 0.29.0.

    This can be fixed with reverse calculations, but do we want to do that ? This is clearly a bug with stylus.

  2. Roger Haase reporter

    With Stylus 0.35.1 installed on CentOS and Windows 8, I again get different results when compiling CSS for the Foobar theme. Long numbers are from windows 8, short numbers are consistent with repo tip.

    -#moin-global-tray{float:left;width:16.55%;padding:.5%;overflow:hidden}
    +#moin-global-tray{float:left;width:16.666666666666668%;padding:.5%;overflow:hidden}
    
    -#moin-local-panel{float:left;width:16.55%;padding:.5%;margin-left:-1px;border-left:1px solid #ccc}
    +#moin-local-panel{float:left;width:16.666666666666668%;padding:.5%;margin-left:-1px;border-left:1px solid #ccc}
    

    The long number problem on Windows 8 persists through Stylus 0.38.0.

  3. Roger Haase reporter

    Development docs now specify that stylus@0.42.2 is to be installed. That version works on all OSs and is last version to create one rule per line in compressed mode. Newer versions create one line for all CSS in compressed mode.

  4. Log in to comment