SCSS should be built with autoprefixer

[bartaz]

Describe the bug

While it's not directly documented (we will fix that) Vanilla SCSS depends on the use of autoprefixer to fully support all the browsers that we care about.

Based on https://github.com/canonical-web-and-design/vanilla-framework/issues/3506 it seems that MAAS UI CSS is not built with autoprefixer.

Based on https://create-react-app.dev/docs/post-processing-css/ it seems that autoprefixer should be used by default in CRA, not sure why it may not be the case in MAAS UI.

[squidsoup]

@huwshimi wonders if this is possibly css built in the shared or legacy projects which don't use CRA.

[huwshimi]

@sparkiegeek I'm having a bit of trouble reproducing this. I've tried bolla as well as local dev and production builds (using firefox with CSS errors turned on).

A few things might help: Which version of Firefox? Which version of maas-ui shows that error? Was it displayed on a particular page?

[sparkiegeek]

maas-ui @maas-ui/maas-ui 1.3.1 (606f32f9).

Error shown in dev-tools as an inability to parse width

Error in parsing value for ‘width’.  Declaration dropped. _base_forms.scss:99:4
Elements matching selector: label
NodeList(13) [ label.u-off-screen, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, … ]

on http://bolla.internal:5240/MAAS/r/machines using Firefox 85.0

[anthonydillon]

I beleive this is to do with the level of browser support we target in production:

"browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

[hatched]

fwiw we compile to a much more modern set (maybe too modern) for the Juju dashboard to try and alleviate some issues we were having with the various transpilation steps and mocks that were being added. We haven't yet had any complaints...

Can we use a similar support matrix for maas-ui?

https://github.com/canonical-web-and-design/jaas-dashboard/blob/master/package.json#L33-L43

  "browserslist": {
    "production": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]

[huwshimi]

maas-ui @maas-ui/maas-ui 1.3.1 (606f32f).

Error shown in dev-tools as an inability to parse width

Error in parsing value for ‘width’.  Declaration dropped. _base_forms.scss:99:4
Elements matching selector: label
NodeList(13) [ label.u-off-screen, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, label.p-form__label, … ]

on http://bolla.internal:5240/MAAS/r/machines using Firefox 85.0

Thanks @sparkiegeek!