fit-content needs -moz prefix for Firefox compatibility

[sparkiegeek]

As per https://caniuse.com/mdn-css_properties_width_fit-content , Firefox needs a -moz- prefix for fit-content that Vanilla uses in

https://github.com/canonical-web-and-design/vanilla-framework/blob/f6fdcbf296d1fd4e360016ed1e682646c026cd7a/scss/_base_forms.scss#L100

and

https://github.com/canonical-web-and-design/vanilla-framework/blob/6ae77522f45ee78a7a40b456c8cfedfd6da9af0f/scss/_patterns_contextual-menu.scss#L26

[bartaz]

@sparkiegeek Is this causing any issues?

We are using autoprefixer to build SCSS which properly adds any needed prefixes:

[anthonydillon]

I thought we had planned to add the prefixes required in Vanilla framework? As there was only a few and it is difficult to require an extra dependency in projects that use Vanilla.

[bartaz]

@anthonydillon Yep, we had these discussions several times probably, and I feel like they always end with a conclusion that we use autoprefixer, it does what it should and we don't have to think about it. Removing it will require us to add any necessary prefixes, maintain that, remember to add any prefixes for new stuff, etc. And not just in Vanilla, any project adding custom CSS will have to be aware of what prefixes are needed. Seems like quite a lot of work that autoprefixer does automatically.

[bartaz]

Related issue: https://github.com/canonical-web-and-design/vanilla-framework/issues/3012

[sparkiegeek]

@bartaz I saw the error from Firefox console, when browsing MAAS UI which uses Vanilla. I searched for fit-content in the maas-ui project but found nothing, so then came here.

In the served CSS from MAAS, I see

label {
 max-width:40em;
 cursor:pointer;
 display:block;
 margin-bottom:.1rem;
 margin-top:0;
 padding-top:.4rem;
 width:fit-content
}

It's not clear to me how source code in Vanilla goes through maas-ui to get into MAAS and served up

[bartaz]

OK, seems like the build pipeline in maas-ui doesn't use autoprefixer.

[sparkiegeek]

OK, seems like the build pipeline in maas-ui doesn't use autoprefixer.

Hmm, so every downstream of Vanilla is supposed to use autoprefixer? Do you have documentation to explain it?

[bartaz]

Hmm, so every downstream of Vanilla is supposed to use autoprefixer? Do you have documentation to explain it?

I guess it was an unwritten assumption, as most of our webteam projects do use autoprefixer by default.

There are some mentions about autoprefixing in https://vanillaframework.io/docs/building-vanilla but nothing explicitly saying it's required.

We should either document it properly, or remove the need for it from Vanilla.

[bartaz]

Created #3516 on Vanilla side to properly document autoprefixer use, and https://github.com/canonical-web-and-design/maas-ui/issues/2103 in MAAS UI to investigate and fix autoprefixer build step.