Use Prettier for code formatting and implement Sass

[wnm210]

I propose implementing Sass and Prettier to this project. It would make things easier. Prettier is a code formatter, read more about it here. Sass is a stylesheet language that is compiled to CSS. It is really easy to use and saves you a lot of time when writing styling rules. Documentation: https://sass-lang.com/documentation/

Prettier is a great tool and it supports plenty of languages. You should also implement it to your other projects as the key feature of it is that there is no need to discuss style in code review.

Prettier configuration that I use

{
    "tabWidth": 4,
    "useTabs": false,
    "printWidth": 180,
    "singleQuote": true,
    "bracketSpacing": true,
    "bracketSameLine": true
}

Sass syntax

@mixin button-base()
    @include typography(button)
    @include ripple-surface
    @include ripple-radius-bounded

    display: inline-flex
    position: relative
    height: $button-height
    border: none
    vertical-align: middle

    &:hover
        cursor: pointer

    &:disabled
        color: $mdc-button-disabled-ink-color
        cursor: default
        pointer-events: none

[GeopJr]

Thanks for bringing this up!

The decision when first writing this was to avoid any build steps and js as much as possible. Introducing sass and prettier (for ~400 lines of css and ~100 lines of js) is a bit too-much.

I'll leave this issue open for now but it's not planned.

[wnm210]

Well, by introducing Prettier you actually don't have to run any additional compiling. You can just simply install the extension from e.g. Visual Studio marketplace and add config file to your project.

[Yimura]

This would be overkill to implement for a single pager with no dynamic content so to speak off.

Maybe in the future if we were to go beyond this however I don't see this happening any time soon.

[wnm210]

Sure. By the way @Yimura what do you think of implementing Prettier to the main repo. It would be easier to keep code style. You could also think of implementing commit lint so people can only add commits that meet the rules of e.g. Conventional Commits (fix:, feat:, chore:, e.t.c.).