mirror of
https://github.com/wekan/wekan.git
synced 2025-09-22 01:50:48 +02:00
50 lines
2.5 KiB
Markdown
50 lines
2.5 KiB
Markdown
[Original issue](https://github.com/wekan/wekan/issues/4512)
|
|
|
|
## 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](https://github.com/Meteor-Community-Packages/meteor-stylus/issues/9) with newest Meteor 2.7.2
|
|
- Removing `coagmano:stylus` fixed [Mermaid Diagram error: Maximum call stack size exceeded](https://github.com/wekan/wekan/issues/4251) from browserside right click / Inspect / Console. After removing `coagmano:stylus`, that error was not there anymore.
|
|
|
|
## Converting Stylus to CSS
|
|
|
|
[Source](https://github.com/wekan/wekan/blob/main/releases/stylus-to-css.sh)
|
|
|
|
#### 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](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) that does [Eric Meyer's CSS reset of styles](https://github.com/stylus/nib/blob/master/lib/nib/reset.styl). xet7 [added that reset to separate CSS file](https://github.com/wekan/wekan/commit/985c2cdbfdb38eb43852f3aa257859bbd3f817b9). While in [original converting Stylus to CSS](https://github.com/wekan/wekan/commit/072778b9aaefd7fcaa7519b1ce1cafc1704d646d) that `@import 'nib'` was in many files, it seems it's enough to have it at [client/components/boards/boardsList.css](https://github.com/wekan/wekan/commit/985c2cdbfdb38eb43852f3aa257859bbd3f817b9#diff-c227ea7dd2df8f46604db81ce7c49902b7e8829266ab79bb1c80077b5ba2b5b0) 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](https://github.com/wekan/wekan/issues/4516)
|
|
- [Some wrong colors](https://github.com/wekan/wekan/issues/4519)
|
|
|
|
#### 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
|
|
```
|
|
|