webpack complains about "start" value when we should be using "flex-start" (probably)

[turt2live]

see https://github.com/vector-im/element-web/issues/22823

[luixxiul]

Happening again. The PR to address it: https://github.com/matrix-org/matrix-react-sdk/pull/10163

[richvdh]

Irrespective of whether the warnings are valid, they are hella annoying, so I'm reopening this issue.

I don't know if the correct fix is to fix webpack or fix our css.

[richvdh]

This warning is coming from autoprefixer, of which we are using a rather old version (9.8.8, released Oct 4, 2021). I suspect this is because we are using an even older postcss-preset-env version (6.7.0, released 9 July 2019. 6.7.2 was released a couple of months ago, but I suspect it was a minor update. I can't find a changelog that explains the difference.)

[richvdh]

I spent a bit of time looking into whether this was an easy fix, but I'm going to have to give up.

I heavily suspect this is a side-effect of us using ancient postcss (despite the dependency on "postcss": "^8.4.31" in package.json, we're actually using postcss 7 because we're on a very old version of postcss-loader). I tried upgrading postcss-loader, but now I get errors like:

ERROR in ../matrix-react-sdk/res/css/_common.pcss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!../matrix-react-sdk/res/css/_common.pcss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Package path ./dist/style.css is not exported from package /home/rav/work/matrix-react-sdk/node_modules/@vector-im/compound-web (see exports field in /home/rav/work/matrix-react-sdk/node_modules/@vector-im/compound-web/package.json)
 @ ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!../matrix-react-sdk/res/css/_components.pcss 5:0-220 399:26-59
 @ ../matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!../matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss 10:0-247 18:26-59
 @ ../matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss

and

ERROR in ../matrix-react-sdk/res/css/components/views/polls/_PollOption.pcss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!../matrix-react-sdk/res/css/components/views/polls/_PollOption.pcss)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
Error: Can't resolve '$(res)/img/element-icons/check-white.svg' in '/home/rav/work/matrix-react-sdk/res/css/components/views/polls'
 @ ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!../matrix-react-sdk/res/css/_components.pcss 41:0-248 435:26-60
 @ ../matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!../matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss 10:0-247 18:26-59
 @ ../matrix-react-sdk/res/themes/dark-custom/css/dark-custom.pcss

... and I don't know how to fix them.

[richvdh]

Error: Package path ./dist/style.css is not exported from package /home/rav/work/matrix-react-sdk/node_modules/@vector-im/compound-web (see exports field in /home/rav/work/matrix-react-sdk/node_modules/@vector-im/compound-web/package.json)

This actually seems to be unhappy about the conditional export in https://github.com/element-hq/compound-web/blob/main/package.json#L15-L18; since both exports are the same the easiest fix may just be to turn it into an unconditional export (https://github.com/element-hq/compound-web/pull/136).

That doesn't help with the $(res) error though. I don't know where $(res) is supposed to be defined.

[richvdh]

I was hoping this might have been fixed by https://github.com/element-hq/element-web/pull/26993 which updated postcss and autoprefix, but it seems not:

2024-02-20 10:10:31.610 [element-js] WARNING in ../matrix-react-sdk/res/themes/dark/css/dark.pcss (../matrix-react-sdk/res/themes/dark/css/dark.pcss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!../matrix-react-sdk/res/themes/dark/css/dark.pcss)
2024-02-20 10:10:31.610 [element-js] Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
2024-02-20 10:10:31.610 [element-js] (23:3) from "autoprefixer" plugin: start value has mixed support, consider using flex-start instead
2024-02-20 10:10:31.610 [element-js] 
2024-02-20 10:10:31.610 [element-js] Code:
2024-02-20 10:10:31.610 [element-js]   align-items: start
2024-02-20 10:10:31.610 [element-js] 
2024-02-20 10:10:31.610 [element-js] 
2024-02-20 10:10:31.610 [element-js] WARNING in ../matrix-react-sdk/res/themes/dark/css/dark.pcss (../matrix-react-sdk/res/themes/dark/css/dark.pcss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[2].use[1]!./node_modules/postcss-loader/dist/cjs.js??postcss!../matrix-react-sdk/res/themes/dark/css/dark.pcss)
2024-02-20 10:10:31.610 [element-js] Module Warning (from ./node_modules/postcss-loader/dist/cjs.js):
2024-02-20 10:10:31.610 [element-js] (24:3) from "autoprefixer" plugin: start value has mixed support, consider using flex-start instead
2024-02-20 10:10:31.610 [element-js] 
2024-02-20 10:10:31.610 [element-js] Code:
2024-02-20 10:10:31.610 [element-js]   justify-content: start
2024-02-20 10:10:31.610 [element-js] 
2024-02-20 10:10:31.610 [element-js] 

(etc)