Converting Meteor Stylus to CSS

Original issue

Introduction

Previously WeKan used Stylus, that is similar to CSS. Stylus has some additional features.

Stylus code was located at wekan/client/components/*/*.styl, for example wekan/client/components/boards/boardsList.styl.

Why

• coagmano:stylus is not maintained anymore
• When building meteor bundle, coagmano:stylus causes errors like Warning: Accessing non-existent property 'lineno' of module exports inside circular dependency with newest Meteor 2.7.2
• Removing coagmano:stylus fixed Mermaid Diagram error: Maximum call stack size exceeded from browserside right click / Inspect / Console. After removing coagmano:stylus, that error was not there anymore.

Converting Stylus to CSS

Source

1) Install Stylus

sudo npm -g install stylus

2) Comment out @import 'nib' that is not supported syntax in newest plain Stylus, for all .styl files in directory

sed -i "s|@import 'nib'|//@import 'nib'|g" *.styl

That code @import 'nib' is using CSS imports that does Eric Meyer's CSS reset of styles. xet7 added that reset to separate CSS file. While in original converting Stylus to CSS that @import 'nib' was in many files, it seems it's enough to have it at client/components/boards/boardsList.css that is used at all pages of WeKan.

Alternative to CSS imports would be to add that CSS code to beginning of that CSS file where it is needed.

Other CSS transpilers may use similar imports.

Not having all requires CSS can be seen like:

• Some extra bullets
• Some wrong colors

3) For all files in directory, run command stylus filename.styl

ls *.styl | xargs stylus

4) Remove coagmano:stylus

meteor remove coagmano:stylus

5) Delete .styl files

cd wekan
rm client/components/*/*.styl